2021-10-09-----------点光源（逐顶点）

Mr_Swilder
43 阅读1分钟 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            text-align: center;
        }

        #canvas {
            margin: 0;
        }
    </style>
</head>

<body onload="main()">
    <canvas id="canvas" height="800" width="1200"></canvas>
</body>
<script src="/lib/webgl-utils.js"></script>
<script src="/lib/webgl-debug.js"></script>
<script src="/lib/cuon-utils.js"></script>
<script src="/lib/cuon-matrix.js"></script>
<script>
    //顶点着色器
    var VSHADER_SOURCE = `
        attribute vec4 a_Position;
        attribute vec4 a_Color; 
        attribute vec4 a_Normal;
        uniform vec3 u_LightPosition;
        uniform vec3 u_LightColor;
        uniform vec3 u_AmbitionColor;
        uniform mat4 u_ModelMatrix;
        uniform mat4 u_NormalMatrix;
        uniform mat4 u_ModelViewMatrix; 
        varying vec4 v_Color; 
        void main(){ 
           gl_Position = u_ModelViewMatrix * a_Position;
           vec4 wc_position=u_ModelMatrix*a_Position;
           vec3 lightDirection=normalize(u_LightPosition-vec3(wc_position));
           vec3 normal = normalize(vec3(u_NormalMatrix *a_Normal));
         
           float nDotL = max(dot(lightDirection,normal),0.0);
           vec3 diffuse = u_LightColor * vec3(a_Color) * nDotL;
           vec3 ambitionColor=u_AmbitionColor*a_Color.rgb;
           v_Color = vec4(diffuse+ambitionColor,a_Color.a);
        }`;

    //片元着色器
    var FSHADER_SOURCE = `
        #ifdef GL_ES
        precision mediump float;
        #endif
        varying vec4 v_Color;
        void main(){
           gl_FragColor = v_Color;
        }`;

    //声明js需要的相关变量
    var canvas = document.getElementById("canvas");
    var gl = getWebGLContext(canvas);

    function main() {
        if (!gl) {
            console.log("你的浏览器不支持WebGL");
            return;
        }

        //初始化着色器
        if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
            console.log("无法初始化着色器");
            return;
        }

        var n = initVertexBuffers(gl);
        if (n < 0) {
            console.log("无法创建缓冲区");
            return;
        }




        var u_LightColor = gl.getUniformLocation(gl.program, "u_LightColor");
        var u_LightPosition = gl.getUniformLocation(gl.program, "u_LightPosition");
        var u_AmbitionColor = gl.getUniformLocation(gl.program, "u_AmbitionColor");

        //设置光线颜色（白色）
        gl.uniform3f(u_LightColor, 1.0, 1.0, 1.0);
        // //设置光线方向（世界坐标系下的）
        // var lightDirection = new Vector3([2.0, 3.0, 4.0]);
        // lightDirection.normalize(); //归一化
        //gl.uniform3fv(u_LightDirection, lightDirection.elements)
        //设置光源位置
        var lightPosition = new Vector3([2.0, 2.1, 2.2]);
        gl.uniform3fv(u_LightPosition, lightPosition.elements)


        var ambitionColor = new Vector3([0.2, 0.2, 0.2]);
        gl.uniform3fv(u_AmbitionColor, ambitionColor.elements)
        //设置底色
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        var currentAngle = 0
        var tick = function () {
            //计算角度
            currentAngle += 0.3
            draw(gl, currentAngle)
            requestAnimationFrame(tick)
        }
        tick()
        //进入场景初始化
        //draw(gl, n, u_ModelViewMatrix, u_ModelMatrix, u_NormalMatrix);
    }

    function draw(gl, currentAngle) {
        //设置视角矩阵的相关信息（视点，视线，上方向）
        var viewMatrix = new Matrix4();
        viewMatrix.setLookAt(3, 3, 7, 0, 0, 0, 0, 1, 0);

        //设置模型矩阵的相关信息
        var modelMatrix = new Matrix4();
        modelMatrix.setRotate(currentAngle, 0, 1, 0);

        //设置透视投影矩阵
        var projMatrix = new Matrix4();
        projMatrix.setPerspective(30, canvas.width / canvas.height, 1, 100);

        //计算出模型视图矩阵 viewMatrix.multiply(modelMatrix)相当于在着色器里面u_ViewMatrix * u_ModelMatrix
        var modeViewMatrix = projMatrix.multiply(viewMatrix.multiply(modelMatrix));
        //设置视角矩阵的相关信息
        var u_ModelMatrix = gl.getUniformLocation(gl.program, "u_ModelMatrix");
        if (u_ModelMatrix < 0) {
            console.log("无法获取模型矩阵变量的存储位置");
            return;
        }

        //设置视角矩阵的相关信息
        var u_ModelViewMatrix = gl.getUniformLocation(gl.program, "u_ModelViewMatrix");
        if (u_ModelViewMatrix < 0) {
            console.log("无法获取mvp矩阵变量的存储位置");
            return;
        }
        var u_NormalMatrix = gl.getUniformLocation(gl.program, "u_NormalMatrix");

        //将试图矩阵传给u_ViewMatrix变量
        gl.uniformMatrix4fv(u_ModelViewMatrix, false, modeViewMatrix.elements);
        gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);

        var normalMatrix = new Matrix4(); //用来变换法向量的矩阵
        //根据模型矩阵计算用来变换法向量的矩阵
        normalMatrix.setInverseOf(modelMatrix);
        normalMatrix.transpose();
        //将用来变换放下了的矩阵传给u_NormalMatrix变量
        gl.uniformMatrix4fv(u_NormalMatrix, false, normalMatrix.elements);
        //开启隐藏面清除
        gl.enable(gl.DEPTH_TEST);

        //清空颜色和深度缓冲区
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        //绘制图形
        gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_BYTE, 0);

    }

    function initVertexBuffers(gl) {
        // 创建一个立方体
        //    v6----- v5
        //   /|      /|
        //  v1------v0|
        //  | |     | |
        //  | |v7---|-|v4
        //  |/      |/
        //  v2------v3

        var vertices = new Float32Array([ // 顶点的位置坐标数据
            1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, // v0-v1-v2-v3 front
            1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, // v0-v3-v4-v5 right
            1.0, 1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, // v0-v5-v6-v1 up
            -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, // v1-v6-v7-v2 left
            -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0, // v7-v4-v3-v2 down
            1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0 // v4-v7-v6-v5 back
        ]);

        var colors = new Float32Array([ // 顶点的颜色
            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, // v0-v1-v2-v3 front
            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, // v0-v3-v4-v5 right
            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, // v0-v5-v6-v1 up
            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, // v1-v6-v7-v2 left
            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, // v7-v4-v3-v2 down
            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, // v4-v7-v6-v5 back
        ]);


        //设置法向量
        var normals = new Float32Array([
            0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0,
            1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0,
            0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0,
            -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0,
            0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0,
            0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0,

        ])

        var indices = new Uint8Array([ // 绘制的索引
            0, 1, 2, 0, 2, 3, // front
            4, 5, 6, 4, 6, 7, // right
            8, 9, 10, 8, 10, 11, // up
            12, 13, 14, 12, 14, 15, // left
            16, 17, 18, 16, 18, 19, // down
            20, 21, 22, 20, 22, 23 // back
        ]);

        //创建缓冲区对象
        initArrayBuffer(gl, vertices, 3, gl.FLOAT, "a_Position");

        initArrayBuffer(gl, colors, 3, gl.FLOAT, "a_Color");

        initArrayBuffer(gl, normals, 3, gl.FLOAT, "a_Normal");

        //将顶点索引数据写入缓冲区对象
        var indexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

        return indices.length;
    }

    function initArrayBuffer(gl, data, num, type, attribute) {
        //创建缓冲区对象
        var buffer = gl.createBuffer();
        if (!buffer) {
            console.log("无法创建缓冲区对象");
            return -1;
        }

        //绑定缓冲区对象并写入数据
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);

        //获取顶点位置变量位置
        var a_attribue = gl.getAttribLocation(gl.program, attribute);
        if (a_attribue < 0) {
            console.log("无法获取顶点位置的存储变量" + attribute);
            return -1;
        }

        //对位置的顶点数据进行分配，并开启
        gl.vertexAttribPointer(a_attribue, num, type, false, 0, 0);
        gl.enableVertexAttribArray(a_attribue);
    }
</script>

</html>
avatar
文章
阅读
粉丝