webgl的平行光漫反射示例

最新推荐文章于 2022-02-09 19:53:33 发布
最新推荐文章于 2022-02-09 19:53:33 发布
阅读量1.9k 收藏
点赞数
分类专栏： webgl three.js 文章标签： 几何学 线性代数 计算机视觉
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/webMinStudent/article/details/122402843
版权

1.webgl的平行光漫反射示例

在现实生活中，我们看到物体是什么颜色，都是要通过光的反射进入我们眼睛我们才能看到物体是什么颜色。

所以在webgl中我们要感受到光照明暗差异的效果，最终我们是通过改变每个顶点的颜色来实现的。

2.反射光的颜色

物体朝哪个方向反射光，反射光的颜色是什么？取决与:入射光的颜色, 入射光的方向， 物体的本身的颜色，物体反射特性,共四个参数来决定。

而反射类型又分为: 漫反射，环境反射。

漫反射光的颜色 = 物体表面基底色 * 入射光的颜色 * cosθ

好了现在我们知道漫反射光的颜色公式，所以我们要知道 cosθ是多少，因为物体表面基底色 ，入射光的颜色都是已知的。

2.1根据光线和表面的方向计算入射角

这里我们需要知道向量点积
向量点乘积有两种计算方式

第一种:根据两个向量的摸(长度),两个向量的夹角
在这里插入图片描述
第二种:是根据两个向量的坐标来计算
在这里插入图片描述
所以根据上面两个公式计算最终cosθ

cosθ = 入射光向量 * 法线向量

前提是入射光向量，法线向量的摸一定要是1就是一定要做归一化处理。要不然分母就不再是1了，公式就不成立了。

2.2法向量

简单理解就是垂直于物体表面的向量
在这里插入图片描述

3.详细示例代码

const VSHADER_SOURCE =
            'attribute vec4 a_Position;\n' +   // 顶点坐标
            'attribute vec4 a_Color;\n' + // 颜色值 物体表面基底色
            'varying vec4 c_Color;\n' +  // 这个是用来传递给片源着色器的变量
            'uniform mat4 u_ViewProjMatrix;\n' + // 视图透视投影矩阵
            'uniform vec3 u_LightColor;\n' + // 光线的颜色
            'uniform vec3 u_LightDirection;\n' + // 光线的向量
            'attribute vec4 a_Normal;\n' + // 顶点法向量
            ' void main(){\n' +
            '   gl_Position = u_ViewProjMatrix * a_Position;\n' +
            '   vec3 normal = normalize(a_Normal.xyz);\n' +
            '   float nDotl =  max(dot(u_LightDirection, normal), 0.0);\n' +
            '   vec3 diffuse = u_LightColor * a_Color.rgb* nDotl;\n' +
            '   c_Color = vec4(diffuse, 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';

从上面的着色器代码，我们可以看出它对顶点的操作很简单，只有
透视视图投影矩阵

'uniform mat4 u_ViewProjMatrix;\n' + // 视图透视投影矩阵

接受js传递的顶点数据

'attribute vec4 a_Position;\n' +   // 顶点坐标

赋值操作

gl_Position = u_ViewProjMatrix * a_Position;

剩下的操作都是来计算漫反射光的颜色

1.先对顶点坐标的法向量进行归一化处理一定要进行归一化要不公式不成立

'   vec3 normal = normalize(a_Normal.xyz);\n' +

计算入射角 与 法向量的夹角

'float nDotl =  max(dot(u_LightDirection, normal), 0.0);\n' +

dot()就是两个向量点积 (u_LightDirection * normal)
赋值给c_Color变量

v_Color = vec4(diffuse, a_Color)

然后在片源着色器中，就是v_Color变量，并且赋值给gl_FragColor（内置变量）

gl_FragColor = v_Color

详细代码

<!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_ViewProjMatrix;\n' + // 视图透视投影矩阵
            'uniform vec3 u_LightColor;\n' + // 光线的颜色
            'uniform vec3 u_LightDirection;\n' + // 光线的向量
            'attribute vec4 a_Normal;\n' + // 顶点法向量
            ' void main(){\n' +
            '   gl_Position = u_ViewProjMatrix * a_Position;\n' +
            '   vec3 normal = normalize(a_Normal.xyz);\n' +
            '   float nDotl =  max(dot(u_LightDirection, normal), 0.0);\n' +
            '   vec3 diffuse = u_LightColor * a_Color.rgb* nDotl;\n' +
            '   c_Color = vec4(diffuse, 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);
        }
        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 mvpMatrix = new Matrix4();
        // 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);
        // 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>

效果图
在这里插入图片描述
是不是有种明暗的效果。

小秧@
关注
专栏目录
光线反射研究 in WebGL
03-31
NULL 博文链接：https://rainsilence.iteye.com/blog/1347754
webgl点光源的漫反射
webMinStudent的博客
01-11 4193
1.webgl点光源的漫反射 点光源的特点: 点光源照射到物体上的每个顶点的入射光方向是各不相同的。 需要一个点光源的位置。 需要一个点光源的光颜色。 需要计算的是 我们需要计算出每个顶点的入射光线的方向。 点光源向四周放射光线，所以顶点处的光线方向是由点光源坐标 - 顶点坐标而得到得矢量 入射光线的方向 = 点光源的坐标 - 顶点坐标 顶点着色器中 声明点光源的位置 'uniform vec3 u_LightPosition;\n' + // 点光源的位置 获取地址，并且赋值 const u_Li
WebGL之旅（十三）平行光和漫反射
寒风的技术博客
07-28 2010
一 相关概念 光：方向 + 颜色(包含了强度) 光源平行光：同方向 + 颜色 点光源：方向（光源位置到照射位置） + 颜色 环境光：颜色 入射角：入射光反方向与平面法线的夹角 反射：漫反射： 反射的光在各个方向上均匀，反射光颜色=入射光颜色 X 基底色 X cos(a)，a为入射角 环境反射： 反射光颜色=环境光颜色 X 基底色 漫反射 + 环境反射: 反射光颜色= 漫反射光颜色+ 环境光颜色 二
三维模型平行光照射实现（WebGL进阶02）
点燃火柴的博客
07-11 629
三维模型平行光照射实现1. demo效果2. 知识要点2.1 平行光照射2.2 物体变换时表面法线处理3. 实现要点3.1 顶点着色器3.2 相关矩阵计算4. demo代码 1. demo效果 上图是平行光照射下效果 上图是无光照时的效果 2. 知识要点 2.1 平行光照射 平行光的光线相互平行，没有位置信息，只有方向，可以看做是无限远处的光源发出的光，例如太阳照射在地球上的光。 平行光照射在物体上会反射，不同方向的面反射光的方向也不同，平行光如何反射，取决于物体的表面法向量，如下图光线从左上方入射进来
玩转WebGL(六)漫反射光照
q641187432的专栏
02-09 633
现实世界的光照是极其复杂的，因此WebGL的光照仅仅使用了简化的模型并基于对现实的估计来进行模拟，光照模型都是基于我们对光的物理特性的理解。 颜色 根据物理知识，不透明物体的颜色是根据其反射的色光决定的。比如树叶反射绿光，就显示绿色。如果物体反射所有的色光，就显示白色。所以光源色和物体颜色的反射运算： vec3 lightColor = vec3(0.3, 0.4, 0.5); vec3 thingColor = vec3(0.5, 0.4, 0.5); vec3 resultColor = lightCo
WebGL编程指南
04-09
平行光下的漫反射 286 根据光线和表面的方向计算入射角 287 法线：表面的朝向 288 示例程序（LightedCube.js） 291 环境光下的漫反射 296 示例程序（LightedCube_ambient.js） 298 运动物体的光照效果 299 ...
WebGL编程指南压缩包
05-15
平行光下的漫反射 286 根据光线和表面的方向计算入射角 287 法线：表面的朝向 288 示例程序（LightedCube.js） 291 环境光下的漫反射 296 示例程序（LightedCube_ambient.js） 298 运动物体的光照效果 299 ...
webgl编程指南及源码2/2
05-08
平行光下的漫反射 286 根据光线和表面的方向计算入射角 287 法线：表面的朝向 288 示例程序（LightedCube.js） 291 环境光下的漫反射 296 示例程序（LightedCube_ambient.js） 298 运动物体的光照效果 299 ...
webgl编程指南及源码1/2
05-08
平行光下的漫反射 286 根据光线和表面的方向计算入射角 287 法线：表面的朝向 288 示例程序（LightedCube.js） 291 环境光下的漫反射 296 示例程序（LightedCube_ambient.js） 298 运动物体的光照效果 299 ...
WebGL 平行光和环境光
nothing Is everything
07-12 2867
冯氏反射模型引申了这个四步走的光照系统，首先所有的光线都有以下两个属性： 发生漫反射光的RGB值。发生镜面反射光的RGB值。 其次所有材质都有以下四个属性 反射的环境光RGB值反射的漫反射光RGB值反射的镜面反射光RGB值物体的反光度，它决定了镜面反射的细节 对于场景中的每一点，它的颜色都是由照射光的颜色、材质本身的颜色和光照效果混合起来的。所以，根据冯氏反射模型，为了解决场景中的
光照漫反射（平行光)
Fatestay_DC的专栏
04-15 910
Shader "Custom/test1" { SubShader { pass { Tags{"LightMode"="ForwardBase"} CGPROGRAM #pragma vertex vert #pragma fragment frag
WebGL入门(二十四)-光照原理、漫反射光计算、漫反射光照射下的立方体
点燃火柴的博客
04-03 1162
漫反射光照射下的立方体1.demo效果2.相关知识点2.1 光照原理2.2 光源类型2.3 反射类型2.4 漫反射计算模型3.demo代码 1.demo效果 如上，添加了漫反射光照射效果的立方体，最前面的面亮一些，顶上和右侧的面暗一些 2.相关知识点 2.1 光照原理 现实中，物体被光线照射，会有一部分光在物体表面反射，当反射光线进入你的眼睛时，你就看到了物体的形状与颜色，现实生活中你会发现，有光照照射物体时会在地面上投下影子，物体表面会出现明暗程度不一样的效果，正是因为存在 影子（阴影） 和 明暗差异
webgl漫反射公式物理原理猜测
wzwxwc1987的专栏
07-02 703
首先要声明： 下述内容并不严谨 物理学知识我也不是很深入，只是为了方便自己理解 平行光下的漫反射公式： <漫反射光颜色>=<入射光颜色>×<表面基底色>×cosθ cosθ如下图所示 漫反射光颜色、入射光颜色、表面基底色 在shader中都是vec4类型 一般会把vec4理解为空间向量，再加上上图的箭头，我第一次就犯迷糊了 把上面3种颜色都想象成空间向量，一直无法理解上述公式 其实，webgl引入这种“漫反射模型”，是为了更好的模拟现实
[WebGL入门]二十三，反射光的光照效果
weixin_33769125的博客
07-05 475
注：文章译自http://wgld.org/，原作者杉本雅広(doxas)。文章中假设有我的额外说明。我会加上［lufy：］，另外，鄙人webgl研究还不够深入。一些专业词语。假设翻译有误。欢迎大家指正。本次的demo的执行结果各种各样的光照上次，以及上上次，介绍了通过顶点着色器来实现光照效果。最開始介绍了从平行光源发出的光。上次介绍了平行光源的缺点。以及相应这个缺点的方法，就是环境光源。这次...
【Unity Shader】漫反射逐顶点光照（只有一盏平行光）
大大大老虎的博客
01-09 319
代码 //命名 Shader "Test"{ //聲明屬性 Properties{ _Diffuse("Diffuse",Color)=(1,1,1,1) } //根據平台選擇可以運行的subshader，一個shader代碼中可以有多個Subshader SubShader{ pass{//一次頂點和片元函數的處理即一次繪製 Tags{"LightMode"="For...
加入反射和折射的多目标实时环境映射(WebGL Engine 实现的 Demo)
vily_lei的专栏
01-01 520
请见Demo:http://www.artvily.com/renderCase?sample=cubemapMult
Webgl 光照的理解
资深三维GIS开发
04-09 956
一个物体最终呈现给人的是什么效果取决于一下几个方面： 1、入射光的方向及颜色，其中颜色包含了光照的强度信息 2、物体表面固有的颜色以及物体反射光的特性。 一、光照对物体的影响： 1、根据光源和光线的方向，物体表面的明暗程度是不一样的 2、物体会产生阴影 光源的类型：分为平行光、点光源光、环境光。图更直接。 其中： 平行光用一个统一方向和颜色来定义，物体不同位置，光线方向...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值