17.光照（点光源）

最新推荐文章于 2025-01-02 14:43:21 发布
原创 最新推荐文章于 2025-01-02 14:43:21 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webgl #canvas #3d

1.点光源产生的漫反射光

    <漫反射光颜色>=<入射光颜色>x<表面基底色>x cosB

    <漫反射光颜色>=<入射光颜色>x<表面基底色>x(<光线方向>x<法线方向>)

    由于点光源产生的光线在物体表面任意一点的入射角度都不相同，需要先计算入射方向矢量（由点光源指向顶点），根据矢量做减法在几何中的意义：

        <光线方向>=<光源位置矢量>-<顶点矢量>

'vec3 lightDirection = normalize(u_LightPosition - vec3(vertexPosition));\n'

注意：光源位置在设定时使用的是世界坐标系，而顶点位置使用的是canvas坐标系，需要先将顶点位置坐标转变成世界坐标系

'vec4 vertexPosition = u_ModelMatrix * a_Position;\n'

WebGL坐标系之间的转换：

var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
'attribute vec4 a_Color;\n' +
'attribute vec4 a_Normal;\n' +
'uniform mat4 u_NormalMatrix;\n' +
'uniform mat4 u_ModelMatrix;\n' +
'uniform vec3 u_LightPosition;\n' +
'uniform vec3 u_LightColor;\n' +
'uniform mat4 u_MvpMatrix;\n' +
'uniform vec3 u_AmbientLight;\n' +
'varying vec4 v_Color;\n' +
'void main(){\n' +
'gl_Position = u_MvpMatrix * a_Position;\n' +
//对法向量进行归一化
'vec3 normal = normalize(vec3(u_NormalMatrix * a_Normal));\n' +
//计算顶点世界坐标
'vec4 vertexPosition = u_ModelMatrix * a_Position;\n' +
//计算光线方向并归一化
'vec3 lightDirection = normalize(u_LightPosition - vec3(vertexPosition));\n' +
//计算光线方向和法向量乘积，已经完成归一化，u_LightDirection在js代码中已经完成归一化
'float nDotL = max(dot(lightDirection,normal),0.0);\n' +
//计算漫反射光的颜色
'vec3 diffuse = u_LightColor * vec3(a_Color) * nDotL;\n'+
//计算环境光产生的反射光颜色
'vec3 ambient = u_AmbientLight * a_Color.rgb;\n'+
//a_Color.a是GLSL ES中对矢量的访问符，r,g,b,a
'v_Color = vec4(diffuse + ambient,a_Color.a);\n' +
'}\n';

var FSHADER_SOURCE =
'precision mediump float;\n'+
'varying vec4 v_Color;\n' +
'void main(){\n' +
'gl_FragColor = v_Color;\n' +
'}\n';

function main(){
var canvas =document.getElementById('webgl');
var gl = canvas.getContext('webgl');
initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE);
var n = initVertexBuffers(gl);
//开启深度检测
gl.enable(gl.DEPTH_TEST);
gl.clearColor(1.0,0.0,0.0,1.0);

//获取顶点着色器中变量
var u_MvpMatrix = gl.getUniformLocation(gl.program,'u_MvpMatrix');
var u_ModelMatrix = gl.getUniformLocation(gl.program,'u_ModelMatrix');
var u_LightPosition = gl.getUniformLocation(gl.program,'u_LightPosition');
var u_LightColor = gl.getUniformLocation(gl.program,'u_LightColor');
var u_NormalMatrix = gl.getUniformLocation(gl.program,'u_NormalMatrix');
//设置光线颜色
gl.uniform3f(u_LightColor,1.0,1.0,1.0);
//设置光源位置
gl.uniform3f(u_LightPosition,0.0,3.0,4.0);
//设置模型矩阵
var modelMatrix = new Matrix4();
modelMatrix.setRotate(90,0,1,0);
gl.uniformMatrix4fv(u_ModelMatrix,false,modelMatrix.elements);

//对环境光进行赋值
var u_AmbientLight = gl.getUniformLocation(gl.program,'u_AmbientLight');
gl.uniform3f(u_AmbientLight,0.2,0.2,0.2);

//对法向量矩阵赋值
var normalMatrix = new Matrix4();
normalMatrix.setInverseOf(modelMatrix);
normalMatrix.transpose();
gl.uniformMatrix4fv(u_NormalMatrix,false,normalMatrix.elements);

//计算模型视图投影矩阵
var mvpMatrix = new Matrix4();
mvpMatrix.setPerspective(30,canvas.width/canvas.height,1,100);
mvpMatrix.lookAt(3,3,7,0,0,0,0,1,0);
mvpMatrix.multiply(modelMatrix);
gl.uniformMatrix4fv(u_MvpMatrix,false,mvpMatrix.elements);



gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
gl.drawElements(gl.TRIANGLES,n,gl.UNSIGNED_BYTE,0);
}

function initVertexBuffers(gl){
var verteices = 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, //前面顶点
1.0,-1.0,-1.0,1.0,1.0,-1.0, 1.0,1.0,1.0, 1.0,-1.0,1.0, //右面顶点
1.0,-1.0,-1.0, 1.0,1.0,-1.0,-1.0,1.0,-1.0, -1.0,-1.0,-1.0,//后面顶点
-1.0,-1.0,-1.0,-1.0,1.0,-1.0,-1.0,1.0,1.0, -1.0,-1.0,1.0, //左面顶点
1.0,1.0,1.0, 1.0,1.0,-1.0, -1.0,1.0,-1.0, -1.0,1.0,1.0, //顶面顶点
1.0,-1.0,1.0, 1.0,-1.0,-1.0, -1.0,-1.0,-1.0, -1.0,-1.0,1.0
]);
var 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,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,//顶面顶点法向量
0.0,-1.0,0.0, 0.0,-1.0,0.0, 0.0,-1.0,0.0, 0.0,-1.0,0.0//底面顶点法向量
]);
var colors = new Float32Array([
0.4,1.0,0.4, 0.4,1.0,0.4, 0.4,1.0,0.4, 0.4,1.0,0.4, //前面的顶点颜色
0.4,1.0,0.4, 0.4,1.0,0.4, 0.4,1.0,0.4, 0.4,1.0,0.4, //右面顶点颜色
0.4,1.0,0.4, 0.4,1.0,0.4, 0.4,1.0,0.4, 0.4,1.0,0.4, //后面顶点颜色
0.4,1.0,0.4, 0.4,1.0,0.4, 0.4,1.0,0.4, 0.4,1.0,0.4, //左面顶点颜色
0.4,1.0,0.4, 0.4,1.0,0.4, 0.4,1.0,0.4, 0.4,1.0,0.4, //顶面顶点颜色
0.4,1.0,0.4, 0.4,1.0,0.4, 0.4,1.0,0.4, 0.4,1.0,0.4, //底面顶点颜色
]);
var 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 indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,indices,gl.STATIC_DRAW);

initArrayBuffer(gl,verteices,3,gl.FLOAT,'a_Position');
initArrayBuffer(gl,colors,3,gl.FLOAT,'a_Color');
initArrayBuffer(gl,normals,3,gl.FLOAT,'a_Normal');
return indices.length;
}
function initArrayBuffer(gl,data,num,type,attribute){
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferData(gl.ARRAY_BUFFER,data,gl.STATIC_DRAW);
var a_attribute = gl.getAttribLocation(gl.program,attribute);
gl.vertexAttribPointer(a_attribute,num,type,false,0,0);
gl.enableVertexAttribArray(a_attribute);
return true;
}

  2.逐片元计算反射光的颜色，当场景中有多个点光源，就需要通过逐片元计算每个点光源的反射光颜色，进行相加

    思路：（1）使用varying将变换后的顶点的世界坐标传入片元着色器，则片元着色器中接受到了每个片元坐标，即顶点矢量

'varying vec3 v_Position;\n' +

'v_Position = vec3(u_ModelMatrix * a_Position);\n' +

              （2）在顶点着色器中进行计算光线方向矢量，并进行归一化，光线方向矢量 = 光源位置矢量 - 顶点矢量。

'vec3 lightDirection = normalize(u_LightPosition - v_Position);\n' +

              （3）使用varying变量将经过（平移、旋转、缩放）后的法向量归一化后传入片元着色器，

'varying vec3 v_Normal;\n' +

v_Normal = normalize(vec3(u_NormalMatrix * a_Normal));\n' +

              （4）使用varying将内插后的原片元颜色传入顶点着色器，

'varying vec4 v_Color;\n' +

'v_Color = a_Color;\n'+

              （5）在片元着色器中计算<光源颜色>x<片元颜色>x(<光线向量>.<法向量>)

    //计算光线方向和法向量的点积

    'float nDotL = max(dot(lightDirection,normal),0.0);\n' +

    //计算漫反射光颜色

    'vec3 diffuse = u_LightColor * vec3(v_Color) * nDotL;' +

             （6）在片元着色器中计算环境光的反射光

'uniform vec3 u_AmbientLight;\n' +

'vec3 ambient = u_AmbientLight * v_Color.rgb;\n'+

             （7）在片元着色器中计算反射光颜色

'gl_FragColor = vec4(diffuse + ambient,v_Color.a);\n' +

    总的来说：顶点着色器和片元着色器分工如下：

        顶点着色器：

            （1）计算模型、视图、投影变换后的顶点坐标，赋值给gl_Position

            （2）计算顶点的世界坐标，使用varying变量，将内插后片元的坐标传递给片元着色器

            （3）计算经过模型变换后的法向量并进行归一化，将内插后的每一片元的法向量传递给顶点着色器

            （4）将顶点颜色通过varying修饰符，将内插后每一片元的原本颜色传递给片元着色器

        片元着色器：

            （1）将片元法向量进行归一化

            （2）计算光线方向向量并进行归一化

            （3）计算点光源的漫反射光颜色

            （4）计算环境光的反射颜色

            （5）计算总反射光的颜色

4.逐片元计算反射光颜色程序实现：

var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
'attribute vec4 a_Normal;\n' +
'attribute vec4 a_Color;\n' +
'uniform mat4 u_NormalMatrix;\n' +
'uniform mat4 u_ModelMatrix;\n' +
'uniform mat4 u_MvpMatrix;\n' +
'varying vec4 v_Color;\n' +
'varying vec3 v_Normal;\n' +
'varying vec3 v_Position;\n' +
'void main(){\n' +
'gl_Position = u_MvpMatrix * a_Position;\n' +
//计算顶点世界坐标
'v_Position = vec3(u_ModelMatrix * a_Position);\n' +
//对法向量进行归一化
'v_Normal = normalize(vec3(u_NormalMatrix * a_Normal));\n' +
'v_Color = a_Color;\n'+
'}\n';

var FSHADER_SOURCE =
'precision mediump float;\n' +
'uniform vec3 u_LightColor;\n' +
'uniform vec3 u_LightPosition;\n' +
'uniform vec3 u_AmbientLight;\n' +
'varying vec3 v_Normal;\n' +
'varying vec3 v_Position;\n'+
'varying vec4 v_Color;\n' +
'void main(){\n' +
//计算法向量并归一化
'vec3 normal = normalize(v_Normal);\n' +
//计算光线方向并归一化
'vec3 lightDirection = normalize(u_LightPosition - v_Position);\n' +
//计算光线方向和法向量的点积
'float nDotL = max(dot(lightDirection,normal),0.0);\n' +
//计算漫反射光颜色
'vec3 diffuse = u_LightColor * vec3(v_Color) * nDotL;' +
'vec3 ambient = u_AmbientLight * v_Color.rgb;\n'+
'gl_FragColor = vec4(diffuse + ambient,v_Color.a);\n' +
'}\n';

function main(){
var canvas =document.getElementById('webgl');
var gl = canvas.getContext('webgl');
initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE);
var n = initVertexBuffers(gl);
//开启深度检测
gl.enable(gl.DEPTH_TEST);
gl.clearColor(1.0,0.0,0.0,1.0);

//获取顶点着色器中变量
var u_MvpMatrix = gl.getUniformLocation(gl.program,'u_MvpMatrix');
var u_ModelMatrix = gl.getUniformLocation(gl.program,'u_ModelMatrix');
var u_LightPosition = gl.getUniformLocation(gl.program,'u_LightPosition');
var u_LightColor = gl.getUniformLocation(gl.program,'u_LightColor');
var u_NormalMatrix = gl.getUniformLocation(gl.program,'u_NormalMatrix');
//设置光线颜色
gl.uniform3f(u_LightColor,1.0,1.0,1.0);
//设置光源位置
gl.uniform3f(u_LightPosition,0.0,3.0,4.0);
//设置模型矩阵
var modelMatrix = new Matrix4();
modelMatrix.setRotate(90,0,1,0);
gl.uniformMatrix4fv(u_ModelMatrix,false,modelMatrix.elements);

//对环境光进行赋值
var u_AmbientLight = gl.getUniformLocation(gl.program,'u_AmbientLight');
gl.uniform3f(u_AmbientLight,0.2,0.2,0.2);

//对法向量矩阵赋值
var normalMatrix = new Matrix4();
normalMatrix.setInverseOf(modelMatrix);
normalMatrix.transpose();
gl.uniformMatrix4fv(u_NormalMatrix,false,normalMatrix.elements);

//计算模型视图投影矩阵
var mvpMatrix = new Matrix4();
mvpMatrix.setPerspective(30,canvas.width/canvas.height,1,100);
mvpMatrix.lookAt(3,3,7,0,0,0,0,1,0);
mvpMatrix.multiply(modelMatrix);
gl.uniformMatrix4fv(u_MvpMatrix,false,mvpMatrix.elements);

gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
gl.drawElements(gl.TRIANGLES,n,gl.UNSIGNED_BYTE,0);
}

function initVertexBuffers(gl){
var verteices = 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, //前面顶点
1.0,-1.0,-1.0,1.0,1.0,-1.0, 1.0,1.0,1.0, 1.0,-1.0,1.0, //右面顶点
1.0,-1.0,-1.0, 1.0,1.0,-1.0,-1.0,1.0,-1.0, -1.0,-1.0,-1.0,//后面顶点
-1.0,-1.0,-1.0,-1.0,1.0,-1.0,-1.0,1.0,1.0, -1.0,-1.0,1.0, //左面顶点
1.0,1.0,1.0, 1.0,1.0,-1.0, -1.0,1.0,-1.0, -1.0,1.0,1.0, //顶面顶点
1.0,-1.0,1.0, 1.0,-1.0,-1.0, -1.0,-1.0,-1.0, -1.0,-1.0,1.0
]);
var 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,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,//顶面顶点法向量
0.0,-1.0,0.0, 0.0,-1.0,0.0, 0.0,-1.0,0.0, 0.0,-1.0,0.0//底面顶点法向量
]);
var colors = new Float32Array([
0.4,1.0,0.4, 0.4,1.0,0.4, 0.4,1.0,0.4, 0.4,1.0,0.4, //前面的顶点颜色
0.4,1.0,0.4, 0.4,1.0,0.4, 0.4,1.0,0.4, 0.4,1.0,0.4, //右面顶点颜色
0.4,1.0,0.4, 0.4,1.0,0.4, 0.4,1.0,0.4, 0.4,1.0,0.4, //后面顶点颜色
0.4,1.0,0.4, 0.4,1.0,0.4, 0.4,1.0,0.4, 0.4,1.0,0.4, //左面顶点颜色
0.4,1.0,0.4, 0.4,1.0,0.4, 0.4,1.0,0.4, 0.4,1.0,0.4, //顶面顶点颜色
0.4,1.0,0.4, 0.4,1.0,0.4, 0.4,1.0,0.4, 0.4,1.0,0.4, //底面顶点颜色
]);
var 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 indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,indices,gl.STATIC_DRAW);

initArrayBuffer(gl,verteices,3,gl.FLOAT,'a_Position');
initArrayBuffer(gl,colors,3,gl.FLOAT,'a_Color');
initArrayBuffer(gl,normals,3,gl.FLOAT,'a_Normal');
return indices.length;
}
function initArrayBuffer(gl,data,num,type,attribute){
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferData(gl.ARRAY_BUFFER,data,gl.STATIC_DRAW);
var a_attribute = gl.getAttribLocation(gl.program,attribute);
gl.vertexAttribPointer(a_attribute,num,type,false,0,0);
gl.enableVertexAttribArray(a_attribute);
return true;
}

 

【一步步学OpenGL 20】 -《点光源》
Mr_厚厚的博客
11-09 5824
教程 20点光源原文： http://ogldev.atspace.co.uk/www/tutorial20/tutorial20.html优快云完整版专栏： http://blog.csdn.net/column/details/13062.html背景之前已经学习了三个基本的光照模型（环境光，漫射光和镜面反射光），这三种模型都是基于平行光的。平行光只是通过一个向量来表示，没有光源起点，因此它不
Unreal Engine开发：高级渲染技术_17.光照模型与阴影技术
最新发布
chenlz2007的博客
03-24 676
Unreal Engine 还支持自定义光照模型，通过编写 HLSL 代码来实现复杂的光照效果。自定义光照模型可以满足特定的视觉需求，但需要较高的图形编程知识。在材质编辑器中，可以通过以下步骤创建自定义光照模型：打开材质编辑器，创建一个新的材质。选择“自定义节点”（Custom Node）。编写 HLSL 代码来实现光照计算。// 示例：自定义光照模型的 HLSL 代码 static const TCHAR * CustomLightingHLSL = R"(// 计算漫反射。
[WebGL入门]二十五，点光源的光照
weixin_33905756的博客
04-30 255
注：文章译自http://wgld.org/，原作者杉本雅広(doxas)，文章中假设有我的额外说明。我会加上［lufy：］。另外，鄙人webgl研究还不够深入，一些专业词语。假设翻译有误，欢迎大家指正。本次的demo的执行结果点光源上次介绍了高氏着色和补色着色。使用补色着色的手法。能够渲染更加自然的阴影。3D效果更加真实。可是会有计算量比較大的缺点。这个仅仅能case by case，依据不...
OpenGL学习之路18---- 点光源
Zach_z的博客
05-12 5229
代码放在github上 根据教程：ogldev一步步开始，记录学习历程 之前学习了三个基于平行光的光照模型，相关博文如下： OpenGL学习之路15—-环境光 OpenGL学习之路16—- 漫射光 OpenGL学习之路17—- 镜面反射光 平行光没有起点，通过方向向量来表示，不会随着距离增大而衰减 点光源 点光源即为有起点的光源，有衰减现象(即离光源越远光线越弱)。生活中常见的点光...
（135）点光源
革命队伍的螺丝钉
05-27 1230
概述 点光源 和现实世界中灯泡的工作原理类似，灯泡从灯泡的钨丝向各个方向发光。然而，为了获得更好的性能，点光源简化为仅从空间中的一个点向各个方向均匀地发光。   没有显示半径的点光源，和启用了光源半径的同一光源，后者很好地展示了光源所影响的世界的范围。 尽管点光源从空间中的那个点发光，没有形状，但是虚幻引擎4为点光源提供了半径和长度，以便
DirectX 9.0 (5) 点光源
i_dovelemon的专栏
05-26 2695
引言               在前面几个系列中，我们陆续
【three.js】光源和投影
m0_64455070的博客
01-02 1162
本文概述了Three.js中的不同类型光源及其特点和应用。环境光均匀照亮整个场景，提供基本照明。点光源模拟灯泡等效果，可控制颜色、强度和照射距离。聚光灯产生阴影，用于模拟手电筒等光源，具有光锥角度和边缘模糊等属性。方向光模拟太阳光，光线平行且不衰减。半球光模拟天空和地面反射光，创建自然光照效果。平面光从矩形平面发射光线，模拟窗户或条状灯光，可能需优化性能。文章通过示例代码展示了如何创建和添加这些光源到Three.js场景中，以实现不同的光照效果。
Pygame点光源光照函数
03-04
Pygame点光源光照函数，里面包含了用Pygame实现的的点光源光照函数 可以通过简单的函数快速实现点光源的光照 并且可以调整点光源的大小，范围，位置，以及最小像素和最小强度 当你需要一个点光源的光照时，可以使用...
Unity引擎开发：阴影与光照效果-（10）.Unity中的点光源阴影.docxUnity引擎开发：阴影与光照效果-（11）.Unity中的自定义光照着色器.docxUnity引擎开发：阴影与光照
09-01
Unity引擎开发：阴影与光照效果_（10）.Unity中的点光源阴影.docx Unity引擎开发：阴影与光照效果_（11）.Unity中的自定义光照着色器.docx Unity引擎开发：阴影与光照效果_（12）.Unity中的HDR光照与色调映射.docx ...
学习threejs，添加户外光照光源
我哎GIS博客
09-30 1589
👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：threejs gis工程师 文章目录一、🍀前言二、🍀绘制任意字体模型1. ☘️实现思路2. ☘️代码样例 一、🍀前言 本文详细介绍如何基于threejs在三维场景中添加户外光照光源，亲测可用。希望能帮助到您。一起学习，加油！加油！ 二、🍀绘制任意字体模型 1. ☘️实现思路 1、初始化renderer渲染器 2、初始化Scene三维场景 3、初始化camera相机，定义相机位置 came
WebGL实践篇（九）—— 光照：点光源
weixin_44207506的博客
04-27 1118
1.点光源的光照值 光照来源于点，太阳也算是一个点光源，光照射到物体的同一面上有明有暗（即光照值不同），将面上的每个点到光源的矢量与法向量点乘得到的值就是光照值。 顶点着色器： 主要添加了光照位置的参数，并将顶点着色器中求出来的光照向量传值给着色器进行渲染。 <script id="vertex-shader-3D" type="x-shader/x-vertex"> attribute vec4 a_position; attribute vec3 a_norma
点光源shadowmap，算法Dual Paraboloid Shadow Maps(DPSM)
zengjunjie59的博客
03-06 985
https://zhuanlan.zhihu.com/p/55218272
OpenGLES入门笔记 ：OpenGLES光照基础总结3 点光源的实现
lidec的专栏
07-15 1937
背景前两篇文章谈了光照的原理，本文记录了在了解了原理后调试代码的过程及遇到的一些问题和想法，实现主要参考了红宝书上点光源着色器的代码。需求是这样的，我们现在要实现一个点光源，让这个点光源照亮天空盒的表面。实现效果如下图。图中红色的小灯笼代表光源的位置，它可以照亮近处的天空盒，由于天空盒的是中间凸起的，所以近处天空盒的边缘是无法被照亮的。而远处天空盒的其他面也被照亮了。我们可以在天空盒空间中任意移动红
opengl光照效果之点光源
hb707934728的博客
08-10 3650
点光源和平行光光源的区别 平行光光源:平行光光源的所有入射光线是平行的，且不会发生衰减。 点光源:点光源的入射方向是被照射模型上的点的坐标减去点光源所在位置坐标的向量,且会随着距离的增加发生衰减。 效果图: 点光源片元shader uniform vec4 U_LightPos;//点光源坐标 uniform vec3 U_EyePos;//眼睛的坐标 uniform vec4
【DirectX11】【学习笔记（14）】点光源
qq_40947718的博客
12-30 576
好久没有更新博客了。。。  最近一直在忙一些其他的事情= =。。  DX都快忘了 今天继续更新！   上次说到简单光照，今天我们就学习一个点光源 影响点光源的因素主要有： 范围，位置，衰减 其中衰减用一个二次方程来表达 Attenuation = att0 + (att1 * d) + (att2 * d²)   att0  - 常量修饰符 由于此值未乘以任何值，因此称为“常量...
lwrp下的点光源实现方式
llsansun的博客
11-23 924
浏览了unity2018.4.0f的lwrp，发现没有关于点光源的实现方式。 点光源就是从光源点出发延指定圆的半径开始不断进行光照衰减，超出光源的半径就没有光照的效果。（就像灯球一样） 那么我们要做自己的点光源，就需要自己识别光照类型以及半径，然后自写光照衰减来达到效果。 先上图看看点光源和平行光源的区别 平行光是太阳光，不会有光照衰减（虽然真实世界是有的，但我们会忽略这种情况）。...
点光源
weixin_30292745的博客
08-29 191
点光源 点光源一般包含 位置 颜色 距离 在shader中 我们先计算光源方向 点光源顾名思义，就是一个点，照亮一个球形范围的物体 我们根据物体到表面的距离计算物体表现受到的光照量衰减(attenuation) 最终颜色 这里计算衰减一般距离越远越大 attenuation = 1.0 - (L /R)^2 很多东西用二次方计算 这个衰减系数...
浅谈机器视觉中面光源和点光源的区别
ZQ51camera的博客
09-12 1149
机器视觉中面光源和点光源的区别
three.js点光源
01-06
### Three.js 中点光源的使用方法 在 Three.js 中，通过 `THREE.PointLight` 对象可以创建一个点光源。此对象允许设置多个属性以控制光照的效果。 #### 创建点光源 要创建并配置一个简单的点光源，需指定其颜色、强度和其他参数： ```javascript // 定义点光源的颜色为白色 (0xffffff)，强度为 1，影响范围最大距离为 100 单位长度 var pointLight = new THREE.PointLight(0xffffff, 1, 100); pointLight.position.set(50, 50, 50); // 设置光源的位置坐标 scene.add(pointLight); // 将光源添加到场景中 ``` 上述代码片段展示了如何初始化一个新的点光源实例，并将其放置于三维空间内的特定位置[^1]。 #### 配置点光源属性 - **颜色 (`color`)**：定义发出光线的颜色，默认值为白色（即 RGB 的十六进制表示法 `#ffffff`）。可以通过修改该属性改变光源色彩。 - **可见性 (`visible`)**：布尔型变量用于决定光源是否被渲染显示出来。默认情况下是 true 表示可见；如果设为 false，则不会参与计算任何照明效果[^2]。 - **强度 (`intensity`)**：决定了光强的程度，默认值通常设定为 1. 较高的数值意味着更亮更强力的照射。 - **衰减距离 (`distance`)**：指定了光能传播的最大有效半径，在这个范围内亮度会逐渐减弱直到消失。当 distance 设定为 0 或者不提供时，理论上认为光具有无限远的作用范围。 - **位置 (`position`)**：用来调整光源所在的空间坐标系中的具体地点。这直接影响着受照物体表面接收到的不同角度和方向上的光照情况。 #### 实际应用案例展示 下面给出一段完整的 JavaScript 代码作为例子，演示了怎样在一个 web 页面上利用 Three.js 库实现带有简单几何体模型加上单一点光源照亮整个场景的功能： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Three.js Point Light Example</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <style type="text/css">body { margin: 0; }</style> </head> <body> <script> const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.z = 5; const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 添加立方体网格材质的对象至场景内 const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshStandardMaterial({ color: '#ffcc00', }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); // 构建并加入点光源 const lightColor = 0xffeeff; const intensityValue = 2; const maxDistance = 30; let pointLightInstance = new THREE.PointLight(lightColor, intensityValue, maxDistance); pointLightInstance.position.set(-10, 10, 10); scene.add(pointLightInstance); function animate() { requestAnimationFrame(animate); // 让方块旋转起来 cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); window.addEventListener('resize', () => { const width = window.innerWidth; const height = window.innerHeight; renderer.setSize(width, height); camera.aspect = width / height; camera.updateProjectionMatrix(); }); </script> </body> </html> ``` 这段 HTML 和 JS 综合脚本不仅包含了前面提到的基础知识点，还实现了动态更新视窗大小后的响应式布局处理逻辑[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值