WebGL进阶（十）逐片源光照、逐顶点光照

wangyk,C'est la vie

已于 2024-11-23 21:09:18 修改

阅读量422

点赞数 12

分类专栏： WebGL 文章标签： webgl javascript 开发语言前端矩阵

于 2024-11-23 07:15:00 首次发布

本文链接：https://blog.csdn.net/Ian1025/article/details/143926009

版权

WebGL 专栏收录该内容

21 篇文章

订阅专栏

理论基础：

效果：

逐顶点

逐片源

源码：

逐顶点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Sphere with Lighting</title>
    <!-- 引入gl-matrix.js库，用于矩阵运算 -->
    <script src="gl-matrix.js"></script>
    <script>
        // 顶点着色器程序
        let vertexstring = `
            attribute vec4 a_position; // 顶点位置属性
            uniform mat4 u_formMatrix; // 用于变换的矩阵
            attribute vec4 a_Normal; // 顶点法线属性
            uniform vec3 u_PointLightPosition; // 点光源位置
            uniform vec3 u_DiffuseLight; // 散射光颜色
            uniform vec3 u_AmbientLight; // 环境光颜色
            varying vec4 v_Color; // 用于传递给片段着色器的颜色
            void main(void){
                gl_Position = u_formMatrix * a_position; // 应用变换矩阵到顶点位置
                vec3 normal = normalize(a_Normal.xyz); // 归一化法线
                vec3 lightDirection = normalize(u_PointLightPosition - vec3(gl_Position.xyz)); // 计算光源方向
                float nDotL = max(dot(lightDirection, normal), 0.0); // 计算法线和光源方向的点积
                vec3 diffuse = u_DiffuseLight * vec3(1.0,0,1.0) * nDotL; // 计算散射光
                vec3 ambient = u_AmbientLight * vec3(1.0,0,1.0); // 环境光
                v_Color = vec4(diffuse + ambient, 1); // 将散射光和环境光相加，设置透明度为1
            }
        `;
        // 片段着色器程序
        let fragmentstring = `
            precision mediump float; // 设置精度为中等
            varying vec4 v_Color; // 从顶点着色器接收的颜色
            void main(void){
              gl_FragColor = v_Color; // 设置片段颜色
            }
        `;

        // 初始化WebGL上下文和着色器
        var webgl;
        var angle = 45; // 透视投影的角度
        var webglDiv; // 用于存储canvas元素的变量
        function init() {
            initWebgl(); // 初始化WebGL上下文
            initShader(); // 初始化着色器
            initBuffer(); // 初始化缓冲区
            draw(); // 绘制场景
        }

        // 初始化WebGL上下文
        function initWebgl() {
            webglDiv = document.getElementById('myCanvas'); // 获取canvas元素
            webgl = webglDiv.getContext("webgl"); // 获取WebGL上下文
            webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight); // 设置视口大小
        }

        // 初始化着色器
        function initShader() {
            // 创建顶点着色器和片段着色器
            let vsshader = webgl.createShader(webgl.VERTEX_SHADER);
            let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);

            // 设置着色器源代码
            webgl.shaderSource(vsshader, vertexstring);
            webgl.shaderSource(fsshader, fragmentstring);

            // 编译着色器
            webgl.compileShader(vsshader);
            webgl.compileShader(fsshader);
            // 检查着色器编译状态
            if (!webgl.getShaderParameter(vsshader, webgl.COMPILE_STATUS)) {
                var err = webgl.getShaderInfoLog(vsshader);
                alert(err);
                return;
            }
            if (!webgl.getShaderParameter(fsshader, webgl.COMPILE_STATUS)) {
                var err = webgl.getShaderInfoLog(fsshader);
                alert(err);
                return;
            }
            // 创建程序并附加着色器
            let program = webgl.createProgram();
            webgl.attachShader(program, vsshader);
            webgl.attachShader(program, fsshader);
            webgl.linkProgram(program);
            webgl.useProgram(program); // 使用程序
            webgl.program = program; // 存储程序对象
        }

        // 初始化缓冲区
        var positions = [];
        var indices = [];
        function initBuffer() {
            var SPHERE_DIV = 15; // 球体的分割数

            // 生成球体的坐标
            for (j = 0; j <= SPHERE_DIV; j++) {
                aj = j * Math.PI / SPHERE_DIV;
                sj = Math.sin(aj);
                cj = Math.cos(aj);
                for (i = 0; i <= SPHERE_DIV; i++) {
                    ai = i * 2 * Math.PI / SPHERE_DIV;
                    si = Math.sin(ai);
                    ci = Math.cos(ai);

                    positions.push(ci * sj);  // X
                    positions.push(cj);       // Y
                    positions.push(si * sj);  // Z
                }
            }

            // 生成球体的索引
            for (j = 0; j < SPHERE_DIV; j++) {
                 for (i = 0; i < SPHERE_DIV; i++) {
                    p1 = j * (SPHERE_DIV + 1) + i;
                    p2 = p1 + (SPHERE_DIV + 1);

                    indices.push(p1);
                    indices.push(p2);
                    indices.push(p1 + 1);

                    indices.push(p1 + 1);
                    indices.push(p2);
                    indices.push(p2 + 1);
                }
            }

            // 创建顶点位置属性的缓冲区
            let pointPosition = new Float32Array(positions);
            let aPosition = webgl.getAttribLocation(webgl.program, "a_position");
            let triangleBuffer = webgl.createBuffer();
            webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
            webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW);
            webgl.enableVertexAttribArray(aPosition);
            webgl.vertexAttribPointer(aPosition, 3, webgl.FLOAT, false, 0, 0);

            // 创建法线属性的缓冲区
            let aNormal = webgl.getAttribLocation(webgl.program, "a_Normal");
            let normalsBuffer = webgl.createBuffer();
            let normalsArr = new Float32Array(positions);
            webgl.bindBuffer(webgl.ARRAY_BUFFER, normalsBuffer);
            webgl.bufferData(webgl.ARRAY_BUFFER, normalsArr, webgl.STATIC_DRAW);
            webgl.enableVertexAttribArray(aNormal);
            webgl.vertexAttribPointer(aNormal, 3, webgl.FLOAT, false, 0, 0);

            // 设置光照参数
            let u_DiffuseLight = webgl.getUniformLocation(webgl.program, 'u_DiffuseLight');
            webgl.uniform3f(u_DiffuseLight, 1.0, 1.0, 1.0);
            let u_LightDirection = webgl.getUniformLocation(webgl.program, 'u_PointLightPosition');
            webgl.uniform3fv(u_LightDirection, [3.0, 3.0, 4.0]);
            let u_AmbientLight = webgl.getUniformLocation(webgl.program, 'u_AmbientLight');
            webgl.uniform3f(u_AmbientLight, 0.2, 0., 0.2);

            // 创建索引缓冲区
            let indexBuffer = webgl.createBuffer();
            let indices1 = new Uint8Array(indices);
            webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, indexBuffer);
            webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, indices1, webgl.STATIC_DRAW);

            // 矩阵变换
            let ProjMatrix = glMatrix.mat4.create();
            glMatrix.mat4.identity(ProjMatrix);
            glMatrix.mat4.perspective(ProjMatrix, angle * Math.PI / 180, webglDiv.clientWidth / webglDiv.clientHeight, 1, 1000);

            let uniformMatrix1 = webgl.getUniformLocation(webgl.program, "u_formMatrix");

            let ModelMatrix = glMatrix.mat4.create();
            glMatrix.mat4.identity(ModelMatrix);
            glMatrix.mat4.translate(ModelMatrix, ModelMatrix, [0, 0, 0]);

            let ViewMatrix = glMatrix.mat4.create();
            glMatrix.mat4.identity(ViewMatrix);
            glMatrix.mat4.lookAt(ViewMatrix, [3, 3, 7], [0, 0, 0], [0, 1, 0]);

            let mvMatrix = glMatrix.mat4.create();
            glMatrix.mat4.identity(mvMatrix);
            glMatrix.mat4.multiply(mvMatrix, ViewMatrix, ModelMatrix);

            let mvpMatrix = glMatrix.mat4.create();
            glMatrix.mat4.identity(mvpMatrix);
            glMatrix.mat4.multiply(mvpMatrix, ProjMatrix, mvMatrix);
            webgl.uniformMatrix4fv(uniformMatrix1, false, mvpMatrix);
        }

        // 绘制场景
        function draw() {
            webgl.clearColor(0, 0, 0, 1); // 设置清除颜色为黑色
            webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT); // 清除颜色缓冲区和深度缓冲区
            webgl.enable(webgl.DEPTH_TEST); // 启用深度测试

            webgl.drawElements(webgl.TRIANGLES, indices.length, webgl.UNSIGNED_BYTE, 0); // 绘制三角形
        }
    </script>
</head>

<body onload="init()">
    <canvas id='myCanvas' width="1024" height='768'></canvas>
    <div id="text"></div>
</body>

</html>

逐片源

    let vertexstring = `
        attribute vec4 a_position;
        uniform mat4 u_formMatrix;
        attribute vec4 a_Normal;
        varying vec4 v_Normal;
        varying vec4 v_position;
        void main(void){
        gl_Position = u_formMatrix * a_position;
        v_position = gl_Position;
        v_Normal= a_Normal;
        }
        `;
        let fragmentstring = `
        precision mediump float;
   
        varying vec4 v_Normal;
        varying vec4 v_position;
        uniform vec3 u_PointLightPosition;
        uniform vec3 u_DiffuseLight;
        uniform vec3 u_AmbientLight;
        void main(void){
        vec3 normal = normalize(v_Normal.xyz);
        vec3 lightDirection = normalize(u_PointLightPosition - vec3(v_position.xyz));
        float nDotL = max(dot(lightDirection, normal), 0.0);
        vec3 diffuse = u_DiffuseLight * vec3(1.0,0,1.0)* nDotL;
        vec3 ambient = u_AmbientLight * vec3(1.0,0,1.0);
   
          gl_FragColor =vec4(diffuse + ambient, 1);
        }
        `;