深入探究 Babylon.js 中 GLSL Shader 的默认 Uniform 变量

在使用 Babylon.js 进行 GLSL Shader 编程时，默认提供的uniform变量是开发者实现各种复杂图形效果的有力工具。这些变量就像是构建精美图形大厦的基石，了解它们能帮助我们更高效地完成渲染任务。本文将详细介绍 Babylon.js 中常用以及其他常见的默认uniform变量，同时结合示例代码帮助大家更好地理解和运用。

常用 Uniform 变量回顾

变换矩阵类

变换矩阵类的uniform变量在顶点空间转换中起着关键作用。

world：它代表模型的世界矩阵，负责将顶点从模型空间转换到世界空间。通过这个矩阵，我们可以对模型进行平移、旋转和缩放等操作，让模型在虚拟世界中找到自己的位置。
worldView：是世界矩阵和视图矩阵的组合，能将顶点从模型空间直接转换到视图空间。视图空间是以相机为原点的坐标系，这个矩阵考虑了相机的位置和方向，让我们从相机的视角来看待模型。
worldViewProjection：这个强大的矩阵将顶点从模型空间直接带到裁剪空间。裁剪空间是经过投影变换后的空间，后续的裁剪和光栅化操作都在此基础上进行。它是世界、视图和投影矩阵的乘积，一步到位完成复杂的空间转换。
view：视图矩阵描述了相机的位置和方向，它的作用是将顶点从世界空间转换到视图空间。有了它，我们就能模拟出相机在场景中的不同视角。
projection：投影矩阵负责将顶点从视图空间转换到裁剪空间。常见的投影方式有透视投影和正交投影，投影矩阵决定了场景的投影效果，比如透视投影能让远处的物体看起来更小，营造出逼真的空间感。

光照相关

光照效果能让物体看起来更加真实和立体，以下两个uniform变量在光照计算中不可或缺。

lightDirection：它表示光照的方向向量，在进行光照计算时，我们需要知道光线的方向来确定物体表面的光照强度。不同的光照方向会产生不同的光影效果。
lightColor：光照的颜色通常用一个 RGB 颜色向量表示。不同颜色的光照会影响物体表面的颜色呈现，比如红色光照会让物体表面偏红。

相机相关

相机在场景中就像是我们的眼睛，cameraPosition这个uniform变量表示相机在世界空间中的位置。在计算一些与相机位置相关的效果时，如反射、折射等，就需要用到相机的位置信息。

其他常见的 Uniform 变量

材质相关

材质决定了物体的外观和质感，以下几个uniform变量能帮助我们实现丰富的材质效果。

diffuseColor：材质的漫反射颜色，它影响物体在光照下的基础颜色表现。漫反射让物体表面看起来柔和，就像普通的物体在自然光下的颜色。
specularColor：材质的镜面反射颜色，决定了物体表面高光的颜色。镜面反射会产生明亮的高光，让物体看起来更有光泽。
specularPower：材质的镜面反射指数，它控制高光的大小和锐利程度。值越大，高光越集中，物体表面看起来越光滑；值越小，高光越分散，物体表面看起来越粗糙。
emissiveColor：材质的自发光颜色，即使没有光照，物体也会显示该颜色。自发光效果可以用来模拟发光的物体，如灯光、萤火虫等。

纹理相关

纹理能为物体添加更多细节和真实感，textureMatrix就是用于纹理变换的矩阵。它可以对纹理进行平移、旋转和缩放操作，当我们需要对纹理进行动画效果或者局部裁剪时就会用到它。

时间相关

time这个uniform变量表示当前的时间，它常用于实现动态效果，如动画、闪烁、波纹等。我们可以根据时间的变化来改变颜色、位置等属性，让场景动起来。

骨骼动画相关（如果使用骨骼动画）

对于需要实现骨骼动画的模型，boneMatrices是一个重要的uniform变量。它是骨骼变换矩阵数组，每个矩阵对应一个骨骼的变换。通过这些矩阵，我们可以对顶点进行骨骼蒙皮操作，使模型产生自然的动画效果。

示例代码体现更多 Uniform 变量

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Babylon.js Shader Example</title>
    <style>
        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>

<body>
    <canvas id="renderCanvas"></canvas>
    <script>
        const canvas = document.getElementById('renderCanvas');
        const engine = new BABYLON.Engine(canvas, true);
        const scene = new BABYLON.Scene(engine);

        const camera = new BABYLON.ArcRotateCamera("camera", Math.PI / 2, Math.PI / 2, 5, BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas, true);

        const vertexShader = `
            precision highp float;
            attribute vec3 position;
            uniform mat4 worldViewProjection;

            void main() {
                gl_Position = worldViewProjection * vec4(position, 1.0);
            }
        `;

        const fragmentShader = `
            precision highp float;
            uniform vec3 diffuseColor;
            uniform vec3 specularColor;
            uniform float specularPower;
            uniform vec3 emissiveColor;

            void main() {
                // 简单的光照计算示例
                vec3 lightDir = normalize(vec3(1.0, 1.0, 1.0));
                vec3 normal = normalize(vec3(0.0, 1.0, 0.0));
                float diffuse = max(dot(normal, lightDir), 0.0);

                vec3 viewDir = normalize(-vec3(0.0, 0.0, 1.0));
                vec3 reflectDir = reflect(-lightDir, normal);
                float specular = pow(max(dot(viewDir, reflectDir), 0.0), specularPower);

                vec3 finalColor = diffuseColor * diffuse + specularColor * specular + emissiveColor;
                gl_FragColor = vec4(finalColor, 1.0);
            }
        `;

        const shaderMaterial = new BABYLON.ShaderMaterial("shaderMaterial", scene, {
            vertexSource: vertexShader,
            fragmentSource: fragmentShader
        }, {
            attributes: ["position"],
            uniforms: ["worldViewProjection", "diffuseColor", "specularColor", "specularPower", "emissiveColor"]
        });

        const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 2 }, scene);
        sphere.material = shaderMaterial;

        shaderMaterial.setVector3("diffuseColor", new BABYLON.Vector3(0.5, 0.5, 0.5));
        shaderMaterial.setVector3("specularColor", new BABYLON.Vector3(1.0, 1.0, 1.0));
        shaderMaterial.setFloat("specularPower", 32.0);
        shaderMaterial.setVector3("emissiveColor", new BABYLON.Vector3(0.1, 0.1, 0.1));

        engine.runRenderLoop(() => {
            scene.render();
        });

        window.addEventListener("resize", () => {
            engine.resize();
        });
    </script>
</body>

</html>

在上述代码的片段着色器中，我们使用了diffuseColor、specularColor、specularPower和emissiveColor这些材质相关的uniform变量。通过简单的光照计算，实现了更丰富的材质表现。比如漫反射颜色和镜面反射颜色的结合，再加上自发光颜色的点缀，让球体看起来更具质感。

总之，Babylon.js 提供的默认uniform变量丰富多样，具体使用哪些变量取决于我们的渲染需求和想要实现的效果。在实际开发中，建议大家查阅官方文档以获取完整和准确的信息，这样才能充分发挥这些uniform变量的强大功能，创造出令人惊叹的图形效果。