WebGL进阶（十一）层次模型

Ian10252024-11-24 16:55

理论基础：

效果：

源码：

html 复制代码 
<!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>Document</title>
    <!-- 引入gl-matrix.js库，用于 WebGL 中的矩阵运算 -->
    <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); // 结合散射光和环境光
        }
        `;
        // 片段着色器程序
        let fragmentstring = `
        precision mediump float; // 精度声明
        varying vec4 v_Color; // 从顶点着色器接收的颜色
        void main(void){
          gl_FragColor =v_Color; // 设置片断颜色
        }
        `;

        // WebGL上下文和一些变量的声明
        var webgl;
        var angle = 45;
        var webglDiv;
        var indices;
        var g_joint1Angle = 0.0;
        var ANGLE_STEP = 3.0;
        var g_arm1Angle = -90.0;

        // 初始化函数，设置WebGL环境
        function init() {
            // 初始化WebGL
            initWebgl();
            // 初始化着色器
            initShader();
            // 初始化数据
            initBuffer();
            // 初始化事件
            initEvent();
            // 清空画板
            clearn();
            // 创建光源
            initLight();
            // 绘制图形
            draw();
        }

        // 初始化WebGL上下文
        function initWebgl() {
            webglDiv = document.getElementById('myCanvas');
            webgl = webglDiv.getContext("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;
        }

        // 清空画板并设置背景色和深度测试
        function clearn() {
            webgl.clearColor(0, 0, 0, 1);
            webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);
            webgl.enable(webgl.DEPTH_TEST);
        }

        // 初始化变换矩阵
        function initTransformation(angele, rotateArr, ModelMatrix = glMatrix.mat4.create()) {
            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");

            glMatrix.mat4.rotate(ModelMatrix, ModelMatrix, degreesToRads(angele), rotateArr); // 旋转模型矩阵
            let ViewMatrix = glMatrix.mat4.create();
            glMatrix.mat4.identity(ViewMatrix);
            glMatrix.mat4.lookAt(ViewMatrix, [50, 50, 50], [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);
            return ModelMatrix;
        }

        // 初始化事件监听
        function initEvent() {
            document.onkeydown = keydown;
        }

        // 初始化光源
        function initLight() {
            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.8, 0.8, 0.8); // 设置环境光颜色
        }

        // 初始化缓冲区
        function initBuffer() {
            // 顶点数据
            var vertices = new Float32Array([
                // 顶点坐标
            ]);

            // 法线数据
            var normals = new Float32Array([
                // 法线坐标
            ]);

            // 顶点索引
            indices = new Uint8Array([
                // 顶点索引
            ]);

            // 创建顶点位置缓冲区
            let pointPosition = new Float32Array(vertices);
            let aPsotion = 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(aPsotion);
            webgl.vertexAttribPointer(aPsotion, 3, webgl.FLOAT, false, 0, 0);

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

            // 创建索引缓冲区
            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);
        }

        // 按键事件处理函数
        function keydown(ev) {
            switch (ev.keyCode) {
                // 按键事件，控制关节角度
            }
            clearn()
            draw();
        }
html 复制代码 
<!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>Document</title>
    <!-- 引入gl-matrix.js库，用于 WebGL 中的矩阵运算 -->
    <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); // 结合散射光和环境光
        }
        `;
        // 片段着色器程序
        let fragmentstring = `
        precision mediump float; // 精度声明
        varying vec4 v_Color; // 从顶点着色器接收的颜色
        void main(void){
            gl_FragColor = v_Color; // 设置片断颜色
        }
        `;

        // WebGL上下文和一些变量的声明
        var webgl;
        var angle = 45;
        var webglDiv;
        var indices;
        // 各个关节的角度变量
        var g_joint1Angle = 86.0;
        var ANGLE_STEP = 3.0;
        var g_arm1Angle = 160.0;
        var g_palm1Angle = 0.0;
        var g_finger1Angle = 0.0;
        var g_chest1Angle = 0;

        // 初始化函数，设置WebGL环境
        function init() {
            // 初始化WebGL
            initWebgl();
            // 初始化着色器
            initShader();
            // 清空画板
            clearn();
            // 创建光源
            initLight();
            // 绘制头部
            drawHead()
            // 初始化数据
            initBuffer();
            // 初始化事件
            initEvent();
            // 绘制图形
            let drawMatrix = chestDraw();
            let drawMatrixCopy = drawMatrix.slice(0);
            drawLeft(drawMatrix);
            drawRight(drawMatrixCopy);
        }

        // 初始化WebGL上下文
        function initWebgl() {
            webglDiv = document.getElementById('myCanvas');
            webgl = webglDiv.getContext("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;
        }

        // 清空画板并设置背景色和深度测试
        function clearn() {
            webgl.clearColor(0, 0, 0, 1);
            webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);
            webgl.enable(webgl.DEPTH_TEST);
        }

        // 初始化变换矩阵
        function initTransformation(angle, rotateArr, ModelMatrix = glMatrix.mat4.create()) {
            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");

            glMatrix.mat4.rotate(ModelMatrix, ModelMatrix, degreesToRads(angle), rotateArr);
            let ViewMatrix = glMatrix.mat4.create();
            glMatrix.mat4.identity(ViewMatrix);
            glMatrix.mat4.lookAt(ViewMatrix, [0, 0, 100], [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);
            return ModelMatrix;
        }

        // 初始化事件监听
        function initEvent() {
            document.onkeydown = keydown;
        }

        // 初始化光源
        function initLight() {
            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.8, 0.8, 0.8); // 设置环境光颜色
        }

        // 初始化缓冲区
        function initBuffer() {
            // 顶点数据
            var vertices = new Float32Array([
                // 顶点坐标
            ]);

            // 法线数据
            var normals = new Float32Array([
                // 法线坐标
            ]);

            // 顶点索引
            indices = new Uint8Array([
                // 顶点索引
            ]);

            // 创建顶点位置缓冲区
            let pointPosition = new Float32Array(vertices);
            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(normals);
            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 indexBuffer = webgl.createBuffer();
            let indices1 = new Uint8Array(indices);
            webgl.bindBuffer(web
复制代码 
void gl.drawElements(mode, count, type, offset);

复盘：

相关推荐
mirrornan1 天前
什么是Web3D？有何优势？有哪些应用场景？
3d·web3·webgl·3d模型
小彭努力中3 天前
138. CSS3DRenderer渲染HTML标签
前端·深度学习·3d·webgl·three.js
优雅永不过时·3 天前
three.js实现地球 外部扫描的着色器
前端·javascript·webgl·three.js·着色器
汪洪墩3 天前
【Mars3d】实现这个地图能靠左，不居中的样式效果
前端·javascript·vue.js·3d·webgl·cesium
allenjiao4 天前
webgl threejs 云渲染(服务器渲染、后端渲染)解决方案
webgl·云渲染·threejs·服务器渲染·后端渲染·云流化·三维云渲染
踏实探索4 天前
OpenLayers教程12_WebGL自定义着色器：实现高级渲染效果
前端·arcgis·vue·webgl·着色器
EasyNTS5 天前
H.265流媒体播放器EasyPlayer.js网页直播/点播播放器WebGL: CONTEXT_LOST_WEBGL错误引发的原因
javascript·webgl·h.265
那年那棵树6 天前
【Cesium】自定义材质，添加带有方向的滚动路线
vue·webgl·材质
优雅永不过时·9 天前
Three.js 原生 实现 react-three-fiber drei 的 磨砂反射的效果
前端·javascript·react.js·webgl·threejs·three
热门推荐
01抖音的互联网架构02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04国内外大模型汇总：Open AI大模型、Google大模型、Microsoft大模型、文心一言大模型、通义千问大模型、字节豆包大模型、智普清言大模型05Coze扣子平台完整体验和实践（附国内和国际版对比）06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07单片机与数电模电：探索电子世界的核心领域08玄机平台应急响应—webshell查杀09RAG 实践- Ollama+RagFlow 部署本地知识库10非小米电脑下载小米电脑管家