OpenGL_JS-lighting_maps_specular

Lamp vertex shader

export let vs_lamp = `#version 300 es layout (location = 0) in vec3 aPos; uniform mat4 model; uniform mat4 view; uniform mat4 projection; Void main() {gl_Position = projection * view * model * vec4(aPos, 1.0); } `
Copy the code

Lamp element shader

export let fs_lamp = `#version 300 es precision mediump float; out vec4 FragColor; Void main() {FragColor = vec4(1.0); // set alle 4 vector values to 1.0}
Copy the code

Material Vertex shader (Lighting model)

export let vs_lighting_maps = `#version 300 es layout (location = 0) in vec3 aPos; layout (location = 1) in vec3 aNormal; layout (location = 2) in vec2 aTexCoords; out vec3 FragPos; out vec3 Normal; out vec2 TexCoords; uniform mat4 model; uniform mat4 view; uniform mat4 projection; Void main() {FragPos = vec3(model * vec4(aPos, 1.0)); Normal = mat3(transpose(inverse(model))) * aNormal; TexCoords = aTexCoords; Gl_Position = projection * view * vec4(FragPos, 1.0); } `
Copy the code

Material fragment shader (Lighting model)

export let fs_lighting_maps = `#version 300 es precision mediump float; out vec4 FragColor; struct Material { sampler2D diffuse; sampler2D specular; float shininess; }; struct Light { vec3 position; vec3 ambient; vec3 diffuse; vec3 specular; }; in vec3 FragPos; in vec3 Normal; in vec2 TexCoords; uniform vec3 viewPos; uniform Material material; uniform Light light; void main() { // ambient vec3 ambient = light.ambient * texture(material.diffuse, TexCoords).rgb; // diffuse vec3 norm = normalize(Normal); vec3 lightDir = normalize(light.position - FragPos); Float diff = Max (dot(norm, lightDir), 0.0); vec3 diffuse = light.diffuse * diff * texture(material.diffuse, TexCoords).rgb; // specular vec3 viewDir = normalize(viewPos - FragPos); vec3 reflectDir = reflect(-lightDir, norm); Float spec = pow(Max (dot(viewDir, reflectDir), 0.0), material. Shininess); float spec = pow(Max (dot(viewDir, reflectDir), 0.0), Material. vec3 specular = light.specular * spec * texture(material.specular, TexCoords).rgb; vec3 result = ambient + diffuse + specular; FragColor = vec4 (result, 1.0); } `
Copy the code

Two models lamp and Lighting

    lightingShader = new Shader(gl, vs_materials, fs_materials);
    lampShader = new Shader(gl, vs_lamp, fs_lamp);
Copy the code

createVertexArray bindVertexArray
createBuffer bindBuffer bufferData vertexAttribPointer enableVertexAttribArray

    gl.enable(gl.DEPTH_TEST);
    let vertices = new Float32Array([-0.5, -0.5, -0.5.0.0.0.0, -1.0.0.5, -0.5, -0.5.0.0.0.0, -1.0.0.5.0.5, -0.5.0.0.0.0, -1.0.0.5.0.5, -0.5.0.0.0.0, -1.0,
        -0.5.0.5, -0.5.0.0.0.0, -1.0,
        -0.5, -0.5, -0.5.0.0.0.0, -1.0,
        -0.5, -0.5.0.5.0.0.0.0.1.0.0.5, -0.5.0.5.0.0.0.0.1.0.0.5.0.5.0.5.0.0.0.0.1.0.0.5.0.5.0.5.0.0.0.0.1.0,
        -0.5.0.5.0.5.0.0.0.0.1.0,
        -0.5, -0.5.0.5.0.0.0.0.1.0,
        -0.5.0.5.0.5, -1.0.0.0.0.0,
        -0.5.0.5, -0.5, -1.0.0.0.0.0,
        -0.5, -0.5, -0.5, -1.0.0.0.0.0,
        -0.5, -0.5, -0.5, -1.0.0.0.0.0,
        -0.5, -0.5.0.5, -1.0.0.0.0.0,
        -0.5.0.5.0.5, -1.0.0.0.0.0.0.5.0.5.0.5.1.0.0.0.0.0.0.5.0.5, -0.5.1.0.0.0.0.0.0.5, -0.5, -0.5.1.0.0.0.0.0.0.5, -0.5, -0.5.1.0.0.0.0.0.0.5, -0.5.0.5.1.0.0.0.0.0.0.5.0.5.0.5.1.0.0.0.0.0,
        -0.5, -0.5, -0.5.0.0, -1.0.0.0.0.5, -0.5, -0.5.0.0, -1.0.0.0.0.5, -0.5.0.5.0.0, -1.0.0.0.0.5, -0.5.0.5.0.0, -1.0.0.0,
        -0.5, -0.5.0.5.0.0, -1.0.0.0,
        -0.5, -0.5, -0.5.0.0, -1.0.0.0,
        -0.5.0.5, -0.5.0.0.1.0.0.0.0.5.0.5, -0.5.0.0.1.0.0.0.0.5.0.5.0.5.0.0.1.0.0.0.0.5.0.5.0.5.0.0.1.0.0.0,
        -0.5.0.5.0.5.0.0.1.0.0.0,
        -0.5.0.5, -0.5.0.0.1.0.0.0
    ]);
    cubeVAO = gl.createVertexArray();
    let VBO = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, VBO);
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
    gl.bindVertexArray(cubeVAO);
    gl.vertexAttribPointer(0.3, gl.FLOAT, false.8 * sizeFloat, 0);
    gl.enableVertexAttribArray(0);
    gl.vertexAttribPointer(1.3, gl.FLOAT, false.8 * sizeFloat, (3 * sizeFloat));
    gl.enableVertexAttribArray(1);
    gl.vertexAttribPointer(2.2, gl.FLOAT, false.8 * sizeFloat, (6 * sizeFloat));
    gl.enableVertexAttribArray(2);
    lightVAO = gl.createVertexArray();
    gl.bindVertexArray(lightVAO);
    gl.bindBuffer(gl.ARRAY_BUFFER, VBO);
    gl.vertexAttribPointer(0.3, gl.FLOAT, false.8 * sizeFloat, 0);
    gl.enableVertexAttribArray(0);
    diffuseMap = gl.createTexture();
    loadTexture(".. /.. /textures/container2.png", diffuseMap);
    specularMap = gl.createTexture();
    loadTexture(".. /.. /textures/container2_specular.png", specularMap);
    lightingShader.use(gl);
    lightingShader.setInt(gl, "material.diffuse".0);
    lightingShader.setInt(gl, "material.specular".1);
    requestAnimationFrame(render);
    function loadTexture(url, texture) {
        initTexture(gl, texture);
        const image1 = new Image();
        image1.onload = function () {
            gl.bindTexture(gl.TEXTURE_2D, texture);
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image1);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
            gl.generateMipmap(gl.TEXTURE_2D);
        };
        image1.src = url;
    }
    function initTexture(gl, texture) {
        gl.bindTexture(gl.TEXTURE_2D, texture);
        const width = 1;
        const height = 1;
        const pixel = new Uint8Array([0.0.255]);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, width, height, 0, gl.RGB, gl.UNSIGNED_BYTE, pixel);
    }
Copy the code

drawCall lighting

let currentFrame = performance.now() / 1000; deltaTime = (currentFrame - lastFrame) * 1000; lastFrame = currentFrame; processInput(); Gl. ClearColor (0.1, 0.1, 0.1, 1.0); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- let lightPos = vec3) fromValues (0.5, 0.7, 2.0); Camera = new camera (vec3. FromValues (0.0, 0.0, 3.0), vec3. FromValues (0.0, 1.0, 0.0)); lightingShader.use(gl); setVec3vShader(lightingShader, "light.position", lightPos); setVec3vShader(lightingShader, "viewPos", camera.Position); LightingShader. SetFloat3 (gl, "light. Ambient ", 0.2, 0.2, 0.2); LightingShader. SetFloat3 (GL, "light.diffuse", 0.5, 0.5, 0.5); LightingShader. SetFloat3 (gl, "light.specular", 1.0, 1.0, 1.0); LightingShader. SetFloat (gl, "material. The shininess, 64.0); let projection = mat4.create(); Mat4. Perspective (projection, (camera.Zoom) * math.pi / 180, Canvas.width/canvas.height, 0.1, 100.0); let view = camera.GetViewMatrix(); setMat4vShader(lightingShader, "projection", projection); setMat4vShader(lightingShader, "view", view); let model = mat4.create(); setMat4vShader(lightingShader, "model", model); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, diffuseMap); gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, specularMap); gl.bindVertexArray(cubeVAO); gl.drawArrays(gl.TRIANGLES, 0, 36);Copy the code

drawCall lampShader

lampShader.use(gl); setMat4vShader(lampShader, "projection", projection); setMat4vShader(lampShader, "view", view); mat4.identity(model); mat4.translate(model, model, lightPos); Mat4. scale(model, model, vec3. FromValues (0.2, 0.2, 0.2)); setMat4vShader(lampShader, "model", model); gl.bindVertexArray(lightVAO); gl.drawArrays(gl.TRIANGLES, 0, 36);Copy the code

function setVec3vShader(shader, uniformName, value) {
    gl.uniform3fv(gl.getUniformLocation(shader.programId, uniformName), value);
}
function setMat4vShader(shader, uniformName, value) {
    gl.uniformMatrix4fv(gl.getUniformLocation(shader.programId, uniformName), false, value);
}
function componentProduct3(a, b) {
    return vec3.fromValues(a[0] * b[0], a[1] * b[1], a[2] * b[2]);
}
//# sourceMappingURL=materials.js.map
Copy the code

Related Posts

Vue+ElementUI to build background management system (actual combat series ii) | August more text challenge

[luffy]_ Delete duplicate elements in sorted list II

Vue-element-admin project code learning -01-main.js