webgl物体进行模型矩阵变化之后，计算变化之后的法向量

最新推荐文章于 2024-05-20 22:31:41 发布
最新推荐文章于 2024-05-20 22:31:41 发布
阅读量655 收藏 3
点赞数
分类专栏： webgl 文章标签： 矩阵 线性代数 3d
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/webMinStudent/article/details/122417277
版权

1.webgl物体进行模型矩阵变化之后，计算变化之后的法向量

我们知道，webgl中我们使用模型矩阵，就可以对物体进行旋转，平移，缩放等变化操作。
但是变化之后的物体的法线向量是发生变化的，物体的光照效果没有对应的发生改变。
所以我们需要计算出变化之后的法线向量

2.如何计算出变化之后的法线向量

规则：用法向量乘以模型矩阵的逆转置矩阵，就是求得变化后的法向量。

求逆转置矩阵的两个步骤：

  1. 求原矩阵的逆矩阵
  2. 将上一步的逆矩阵进行转置
2.1Matrix4对象的方法
Matrix4.setInverseOf(m)  使自身成为m的逆矩阵
Matrix4.transpose() 对自身进行转置操作。

顶点着色器中,声明两个法向量变量
一个是变化前的法向量
一个是变化之后的法向量

'attribute vec4 a_Normal;\n' + // 顶点法向量
'uniform mat4 u_NormalMatrix;\n' + // 变化之后的法线
'   vec3 normal = normalize(vec3(u_NormalMatrix * a_Normal));\n' + // 进行归一化处理
'   float nDotl =  max(dot(u_LightDirection, normal), 0.0);\n' + // 计算夹角

示例代码

<!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>
</head>

<body>
    <!-- <canvas id="canvas" width="400" height="400"></canvas> -->
    <canvas id="canvas" width="400" height="400"></canvas>
    <script src="../三维/lib/cuon-matrix.js"></script>
    <script>
        const gl = canvas.getContext('webgl');
        // 顶点着色器
        const VSHADER_SOURCE =
            'attribute vec4 a_Position;\n' +   // 顶点坐标
            'attribute vec4 a_Color;\n' + // 颜色值
            'varying vec4 c_Color;\n' +
            'uniform mat4 u_NormalMatrix;\n' +
            'uniform mat4 u_ViewProjMatrix;\n' + // 视图透视投影矩阵
            'uniform vec3 u_LightColor;\n' + // 光线的颜色
            'uniform vec3 u_LightDirection;\n' + // 光线的向量
            'uniform vec3 u_AmbientLight;\n' +  // 环境光
            'attribute vec4 a_Normal;\n' + // 顶点法向量
            ' void main(){\n' +
            '   gl_Position = u_ViewProjMatrix * a_Position;\n' +
            '   vec3 normal = normalize(vec3(u_NormalMatrix * a_Normal));\n' +
            '   float nDotl =  max(dot(u_LightDirection, normal), 0.0);\n' +
            '   vec3 diffuse = u_LightColor * a_Color.rgb* nDotl;\n' +
            '   vec3 ambient = u_AmbientLight * a_Color.rgb;\n'+
            '   c_Color = vec4(diffuse + ambient, a_Color);\n' +
            '}\n';
        const FSHADER_SOURCE =
            '#ifdef GL_ES\n' +
            'precision mediump float;\n' +
            '#endif\n' +
            'varying vec4 c_Color;\n' +
            'void main(){\n' +
            '   gl_FragColor = c_Color;\n' +
            '}\n';
        const createShader = (type, source) => {
            const shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);
            const compileState = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
            if (!compileState) {
                const info = gl.getShaderInfoLog(shader);
                console.log(`编译报错信息为:${info}`)
                gl.deleteShader(shader);
                return null
            }
            return shader
        }
        // createShader(gl.FRAGMENT_SHADER,FSHADER_SOURCE)
        const createProgram = (vshader, fshader) => {
            const vertexShader = createShader(gl.VERTEX_SHADER, vshader);
            const fragementShader = createShader(gl.FRAGMENT_SHADER, fshader);
            if (!fragementShader || !vertexShader) {
                console.log('初始着色器失败')
                return false
            }
            const program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragementShader);
            gl.linkProgram(program);
            const linkState = gl.getProgramParameter(program, gl.LINK_STATUS);
            if (!linkState) {
                const err = gl.getProgramInfoLog(program);
                console.log(`链接报错信息为:${err}`);
                gl.deleteShader(vertexShader);
                gl.deleteShader(fragementShader);
                gl.deleteProgram(program);
                return null
            }
            return program;
        }
        const program = createProgram(VSHADER_SOURCE, FSHADER_SOURCE);
        // gl.useProgram(program);
        gl.program = program;

        // console.log(program, 'programprogram')
        gl.useProgram(program);
        const createBuffers = () => {
            // const 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 前面
            //     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 右边
            //     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 上
            //     -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 左边
            //     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 下面
            //     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 后面
            // ])
            var vertices = new Float32Array([   // Coordinates
                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
            ]); // 顶点坐标
            // 顶点颜色
            // const colors = new Float32Array([
            //     1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,
            //     1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,
            //     1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,
            //     1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,
            //     1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,
            //     1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,
            // ])
            var colors = new Float32Array([    // Colors
                1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v0-v1-v2-v3 front
                1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v0-v3-v4-v5 right
                1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v0-v5-v6-v1 up
                1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v1-v6-v7-v2 left
                1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v7-v4-v3-v2 down
                1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0　    // v4-v7-v6-v5 back
            ]); // 顶点颜色

            // const 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 normals = new Float32Array([    // Normal
                0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0,  // v0-v1-v2-v3 front
                1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0,  // v0-v3-v4-v5 right
                0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0,  // v0-v5-v6-v1 up
                -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0,  // v1-v6-v7-v2 left
                0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0,  // v7-v4-v3-v2 down
                0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0   // v4-v7-v6-v5 back
            ]); // 顶点法向量

            initArrayBuffer('a_Position', vertices, 3, gl.FLOAT);
            initArrayBuffer('a_Color', colors, 3, gl.FLOAT);
            initArrayBuffer('a_Normal', normals, 3, gl.FLOAT);
            // const indices = new Uint8Array([
            //     0, 1, 2, 0, 2, 3, // 前面
            //     4, 5, 6, 4, 6, 7, // 右面
            //     8, 9, 10, 8, 10, 11, // 上面
            //     12, 13, 14, 12, 14, 15,  // 左面
            //     16, 17, 18, 16, 18, 19, // 下面
            //     20, 21, 22, 20, 22, 23, // 后面  
            // ])
            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
            ]); // 顶点索引
            const bufferIndex = gl.createBuffer();
            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, bufferIndex)
            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
            return indices.length;
        }
        const initArrayBuffer = (attribute, data, num, type) => {
            // console.log(attribute, 'attribute')
            const buffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
            gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
            // const a_attribute = gl.getAttribLocation(gl.program, attribute);
            var a_attribute = gl.getAttribLocation(gl.program, attribute);
            if (a_attribute < 0) {
                console.log('Failed to get the storage location of ' + attribute);
                return false;
            }
            gl.vertexAttribPointer(a_attribute, num, type, false, 0, 0);
            gl.enableVertexAttribArray(a_attribute);
            gl.bindBuffer(gl.ARRAY_BUFFER, null);
        }
        var u_NormalMatrix = gl.getUniformLocation(gl.program, 'u_NormalMatrix');
        var u_AmbientLight = gl.getUniformLocation(gl.program, 'u_AmbientLight');
        gl.uniform3f(u_AmbientLight, 0.2, 0.2, 0.2);
        const n = createBuffers();
        var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_ViewProjMatrix');
        console.log(u_MvpMatrix, 'u_MvpMatrix')
        var u_LightColor = gl.getUniformLocation(gl.program, 'u_LightColor');
        var u_LightDirection = gl.getUniformLocation(gl.program, 'u_LightDirection');
        gl.uniform3f(u_LightColor, 5.0, 5.0, 5.0);
        // console.log(Matrix4, 'Matrix4')
        const modemoMatrix = new Matrix4();
        const normalMatrix = new Matrix4();
        const mvpMatrix = new Matrix4();
        modemoMatrix.setTranslate(0,0.5,0);
        modemoMatrix.rotate(10, 0, 1, 0)
        // mvpMatrix.setPerspective(30, canvas.with / canvas.height, 0.0, 100);
        mvpMatrix.setPerspective(30, canvas.width / canvas.height, 1, 100);
        mvpMatrix.lookAt(3, 3, 7, 0, 0, 0, 0, 1, 0);
        mvpMatrix.multiply(modemoMatrix);
        normalMatrix.setInverseOf(modemoMatrix); // 计算模型矩阵的逆矩阵
        normalMatrix.transpose(); // 转置运算
        gl.uniformMatrix4fv(u_NormalMatrix, false, normalMatrix.elements);
        // gl.uniform3f(u_MvpMatrix, false, mvpMatrix.elements);
        gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
        var lightDirection = new Vector3([0.5, 3.0, 4.0]);
        lightDirection.normalize();
        gl.uniform3fv(u_LightDirection, lightDirection.elements);
        gl.clearColor(0, 0, 0, 1);
        gl.enable(gl.DEPTH_TEST);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        console.log(n, 'n')
        gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
    </script>
</body>

</html>
小秧@
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生webgl学习（三） WebGL中的矩阵运算：平移、旋转和缩放
Bruce_wjh的博客
10-13 3678
本专栏所有文章示例代码均可在我的git码云上获取，读者可自行下载：https://gitee.com/babyogl/learnWebGL,本文示例代码在chapter-02的color-triangle-01,引用文件都在libs文件夹下；在上一节中，笔者介绍了如何用WebGL绘制一个三角形：原生webgl学习（二） 用WebGL绘制一个三角形，那我们会想，画一个三角形有什么了不起的？的确，画一...
WebGL-2D-矩阵
06-05
在二维空间中，平移可以通过添加一个向量来实现，该向量表示物体沿x轴和y轴移动的距离。在WebGL中，平移变换通常通过构建一个特定的3×3矩阵来实现： \[ \begin{bmatrix} 1 & 0 & tx \\ 0 & 1 & ty \\ 0 & 0 & 1 \...
WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
nsytsqdtn的博客
04-21 828
WebGL学习----Three.js学习笔记（5） 点击查看demo演示 Demo地址：https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNormalMaterial MeshNormalMaterial是一种不受渲染时使用的颜色影响的材质，它只与自己每一个面从内到外的法向量有关。法向量在webgl中用处十分广泛，光的反射，以及三维图形的纹理...
【WebGL】GPU计算法线和世界坐标系下精度问题的解决思路 1
最新发布
m0_63331248的博客
05-20 145
请注意，以上建议可能需要根据你的具体需求和限制进行调整。在解决WebGL中的精度问题时，通常需要综合考虑多个因素，包括数据类型、算法、数据结构、库和框架的使用等。在WebGL中使用GPU进行计算时，特别是涉及法线和世界坐标系下的计算时，精度问题是一个需要关注的重要方面。
WebGL着色器向量/矢量
u014291990的博客
11-16 1251
WebGL着色器向量/矢量 本文是WebGL教程(电子书)的2.4节内容 矢量或者说向量，可以通过2~4个分量表示一个向量，比如通过vec3(1,0,0)表示三维空间中一个沿着x轴正方向的三维方向向量，如果你有高中数学的基础，应该对向量有一定的了解，对于三维坐标的相关几何运算也有一定的概念。 关键字 数据类型 vec2 二维向量，具有xy两个分量，分量是浮点数 vec3 三维向...
如何玩转 WebGL 并行计算
阿里云云栖号
08-19 1021
简介：如今在 Web 端使用 WebGL 进行高性能计算已有不少实践，例如在端智能领域中的 tensorflow.js，再比如可视化领域中的 Stardust.js。 作者 | 沧东 来源 | 阿里技术公众号 如今在 Web 端使用 WebGL 进行高性能计算已有不少实践，例如在端智能领域中的 tensorflow.js，再比如可视化领域中的 Stardust.js。在本文中，我们将介绍以下内容： 使用 GPU 进行通用计算（GPGPU）的历史 当前在 Web 端使用图形 API 实现 GPG.
WebGL学习之法线贴图
weixin_34380296的博客
05-01 432
原文地址：WebGL学习之法线贴图 实际效果请看demo：纹理贴图 为了增加额外细节，提升真实感，我们使用了漫反射贴图和高光贴图，它们都是向三角形进行附加纹理。但是从光的视角来看是表面法线向量使表面被视为平坦光滑的表面。以光照算法的视角考虑的话，只有一件事决定物体的形状，那就是垂直于它的法线向量。砖块表面只有一个法向量，表面完全根据这个法向量被以一致的方式照亮。如果每个片元都用不同的法线会怎样？...
效果超棒的Webgl模型-人体肺
04-11
WebGL模型的性能优化也非常重要，因为复杂的3D模型可能会消耗大量计算资源。开发者可能通过降低多边形数量、使用LOD（级别细节）技术或进行模型烘焙来减少性能负担。同时，使用Web Workers进行离主线程的计算也是...
效果超棒的Webgl模型-人物铜像
04-11
总的来说，"效果超棒的Webgl模型-人物铜像"是一个结合了3D建模、纹理映射、光照计算、WebGL编程等多个领域的综合性项目，展示了WebGL在网页上呈现高质量3D内容的强大能力。开发者通过精心设计和优化，使得用户能够在...
效果超棒的Webgl模型-人体头部模型
04-11
这个"效果超棒的WebGL模型-人体头部模型"是利用WebGL技术创建的一个三维人体头部展示，它能够在网页上实现逼真的、动态的三维渲染。下面将详细介绍这个模型所涉及的关键知识点： 1. **WebGL基础**：WebGL是Web图形...
效果超棒的Webgl模型-一堆石头
04-11
这个“效果超棒的Webgl模型-一堆石头”很可能包含了一组精心设计的3D模型，这些模型可能用于创建虚拟现实场景、游戏或者网页中的装饰元素。现在，让我们深入探讨WebGL和3D建模的相关知识点。 首先，WebGL是Web图形...
WebGL入门(十)-通过矩阵相乘实现图形(三角形)的组合变换
点燃火柴的博客
03-11 1039
通过矩阵相乘实现图形的组合变换1.组合变换效果展示2.知识点梳理2.1组合变换原理2.2组合变换实现要点2.2.1顶点着色器声明uniform变量u_ModelMatrix2.2.2声明模型矩阵Matrix4对象及其属性方法介绍2.2.3模型矩阵组合变换及传值给着色器3.demo代码 1.组合变换效果展示 如上，图一是变换前，图二是Y轴放大1.5倍，绕Z轴旋转45度，沿X轴平移0.2组合变换后的效果 2.知识点梳理 2.1组合变换原理 我们已经了解了通过矩阵可以实现图形的平移、旋转和缩放的变换，今天我们
webgl天空盒边界缝隙_WebGL three.js进修笔记 法向量网格材质MeshNormalMaterial的引见和建立360度全景天空盒的要领...
weixin_31467557的博客
12-24 186
WebGL进修—-Three.js进修笔记(5)简朴网格材质 MeshNormalMaterialMeshNormalMaterial是一种不受衬着时运用的色彩影响的材质，它只与本身每一个面从内到外的法向量有关。法向量在webgl中用途非常普遍，光的反射，以及三维图形的纹理映照都与这个有关。从图中可以看到，网格的每一面衬着的色彩都是不一样的，假如我们想要在物体外表增加法向量，我们可以运用的THRE...
【WebGL学习日报】22/09/06 : 线性代数：向量与矩阵
luyu3283的博客
09-06 253
webgl必要知识：线代
WebGL写入光照
me_badman的博客
02-24 599
1.Buffer中每个顶点的法向量数据cubeNormalVertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER,cubeNormalVertexBuffer); var normalVertices = [ // Front face 0.0,
webGL法线贴图原理
qq_30621091的博客
02-17 1504
法线贴图 1、一般的法线贴图颜色都为下面这种 2、对应的普通的贴图为 法线贴图使用使用颜色来记录当前点的法向量，法线贴图的默认坐标是平行于XY平面的，其对应的被贴图的平面也是平行于XY平面的，因此，在进行渲染时，如果该点的法向量是平行于Z轴，即法向量为（0，0，1），此时对应的颜色为蓝色 当然，若被贴图的物体不是平行于XY平面时，例如当向一个模型进行贴图时，模型有很多三角面，
WebGL实践篇（八）—— 光照：方向光源（均匀的光）
weixin_44207506的博客
04-26 872
1.物体如何加入光照参数 光照均匀的光线，日照光相当于是平行于照在地面上的方向光，将方向光的向量与物体面的法向量点成即能得到两个方向的余弦值，结果为-1则方向相反，反之则方向相同。那么我们就可以知道，方向相同时（打光打在物体上，物体朝向正好在打光方向）那么物体就能被看见（明面），方向相反时（打光打在物体上，物体背对打光方向）这样物体就呈现出它的暗面。想想一幅素描画中物体的明暗面跟阴影投射就大概能理解了。 2.物体面的法向量： 正方体的每个顶点有三个法向量，正x方向向右，正y方向向上，正z方向向里。以F
【笔记】《WebGL编程指南》学习笔记（7）
饮冰室
03-30 401
WebGL编程指南学习（7） 7. 层次模型 由多个简单的部件组成的复杂模型 为复杂物体（机器人手臂）建立具有层次化结构的三维模型 7.1 多个简单模型组成的复杂模型 层次结构模型 当情况较为简单时，实现“部件A转动带动部件B转动”可以很直接，只要对部件B也施以部件A的旋转矩阵即可 情况复杂一些时，需要考虑多个旋转矩阵。按照模型中各个部件的层次顺序，从高到低逐一绘制，并在每个关节上应用模型矩阵 例程：单关节模型 两个立方体部件组成的机器人手臂：arm1（上臂）和arm2（前臂）。使用左右方向键控制a
Shader 学习笔记：纹理
MEIGAZAMU
11-25 903
马不停蹄写第二篇，我觉得第二篇总体应该会比第一篇简单一丢丢，因为第一篇讲了太多的光照的规则了，这些规则上的小坑比较恼人，但是大坑比如光照纹理的采样计算衰减什么的Unity都通过宏定义自动完成了，但是纹理这一篇我感觉重点是几个大坑，比如说切线空间与矩阵空间的转换，还有镜面折射的一些规则和语法。 基础纹理 基础纹理算是比较简单，我们只需要注意以下几点： 1.从顶点着色器VertexData中定义...
WebGL模型数据的SQL查询与三维服务
"WebGL模型数据的查询方法主要包括SQL查询、几何查询和ID查询，用于在三维场景中检索满足特定条件的对象。实现这些查询需要依托于三维服务和数据服务。查询流程涉及数据服务的发布、Web程序的代码开发，以及查询结果...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值