OpenGL_JS-shaders_class-一一网

上下文获取

// canvas creation and initializing OpenGL context
//很简单
canvas = document.createElement("canvas"); 
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
gl = canvas.getContext("webgl2");
if (!gl) {
    console.log("WebGL 2 needed");
    return;
}
复制代码

窗口缩放函数

function framebufferSizeCallback(width, height) {
    canvas.width = width;
    canvas.height = height;
    gl.viewport(0, 0, width, height);
    requestAnimationFrame(render);
}
window.onresize = () => {
    framebufferSizeCallback(window.innerWidth, window.innerHeight); //很简单
};
复制代码

创建shader和program,删除shader

顶点着色器

export let vs_shader = `#version 300 es
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec3 aColor;
out vec3 ourColor;
void main()
{
    gl_Position = vec4(aPos, 1.0);
    ourColor = aColor;
}
复制代码

片元着色器

export let fs_shader = `#version 300 es
precision mediump float;
out vec4 FragColor;
in vec3 ourColor;
void main()
{
    FragColor = vec4(ourColor, 1.0f);
}`
复制代码

导出

import {vs_shader} from "./vs_shader.js";
import {fs_shader} from "./fs_shader.js";
export {vs_shader, fs_shader}
复制代码

shader的创建

export class Shader {
    constructor(gl, vertexCode, fragmentCode, geometryCode) {
        this.createShader = function (gl, source, type) {
            var shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);
            return shader;
        };
        var program = gl.createProgram();
        var vshader = this.createShader(gl, vertexCode, gl.VERTEX_SHADER);
        var fshader = this.createShader(gl, fragmentCode, gl.FRAGMENT_SHADER);
        gl.attachShader(program, vshader);
        gl.deleteShader(vshader);
        gl.attachShader(program, fshader);
        gl.deleteShader(fshader);
        gl.linkProgram(program);
        var log = gl.getProgramInfoLog(program);
        if (log) {
            console.log(log);
        }
        log = gl.getShaderInfoLog(vshader);
        if (log) {
            console.log(log);
        }
        log = gl.getShaderInfoLog(fshader);
        if (log) {
            console.log(log);
        }
        this.programId = program;
    }
    ;
    use(gl) {
        gl.useProgram(this.programId);
    }
    setBoolean(gl, name, value) {
        gl.uniform1i(gl.getUniformLocation(this.programId, name), value ? 1 : 0);
    }
    setInt(gl, name, value) {
        gl.uniform1i(gl.getUniformLocation(this.programId, name), value);
    }
    setFloat(gl, name, value) {
        gl.uniform1f(gl.getUniformLocation(this.programId, name), value);
    }
    setFloat2(gl, name, value1, value2) {
        gl.uniform2f(gl.getUniformLocation(this.programId, name), value1, value2);
    }
    setFloat3(gl, name, value1, value2, value3) {
        gl.uniform3f(gl.getUniformLocation(this.programId, name), value1, value2, value3);
    }
    setFloat4(gl, name, value1, value2, value3, value4) {
        gl.uniform4f(gl.getUniformLocation(this.programId, name), value1, value2, value3, value4);
    }
}
//# sourceMappingURL=Shader.js.map
复制代码

使用shader

import { vs_shader, fs_shader } from "../../js/Ch6/shaders/index.js";
import { Shader } from "../../js/common/Shader.js";
ourShader = new Shader(gl, vs_shader, fs_shader);
复制代码

VAO
createVertexArray bindVertexArray
createBuffer bindBuffer bufferData vertexAttribPointer enableVertexAttribArray

// This code is a javascript translation of code originally written by Joey de Vries under the CC BY-NC 4.0 licence. 
// For more information please visit https://learnopengl.com/About

let vertices = new Float32Array([
    0.5, -0.5, 0.0, 1.0, 0.0, 0.0,
    -0.5, -0.5, 0.0, 0.0, 1.0, 0.0,
    0.0, 0.5, 0.0, 0.0, 0.0, 1.0
]);
VAO = gl.createVertexArray(); 
let VBO = gl.createBuffer();
gl.bindVertexArray(VAO);
gl.bindBuffer(gl.ARRAY_BUFFER, VBO);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 6 * sizeFloat, 0);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 6 * sizeFloat, (3 * sizeFloat));
gl.enableVertexAttribArray(1);
requestAnimationFrame(render);

function render() {
    processInput();
    gl.clearColor(0.2, 0.3, 0.3, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    ourShader.use(gl);
    gl.bindVertexArray(VAO);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
    requestAnimationFrame(render);
}
function processInput() {
}

复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端