WebGL编程指南-23 光照原理、漫反射光计算、漫反射光照射下的立方体

于 2022-09-30 20:02:45 发布
阅读量657 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： WebGL编程指南 文章标签： webgl 人工智能
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46773434/article/details/127085043
本文介绍了WebGL中漫反射光照的实现过程，包括光照原理、光源类型、反射类型和漫反射计算模型。通过示例代码展示了如何在WebGL中创建带有漫反射光效果的立方体，并详细解释了代码中的关键步骤，如法向量归一化、入射角计算和颜色计算等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.demo效果

在这里插入图片描述
如上，添加了漫反射光照射效果的立方体，最前面的面亮一些，顶上和右侧的面暗一些

2.光照原理

现实中，物体被光线照射，会有一部分光在物体表面反射，当反射光线进入你的眼睛时，你就看到了物体的形状与颜色，现实生活中你会发现，有光照照射物体时会在地面上投下影子，物体表面会出现明暗程度不一样的效果，正是因为存在影子(阴影)和明暗差异使得我们看到物体具有立体感。

2.1光源类型

真实世界中存在两种类型的光：平行光和点光源光，平行光类似于太阳光，点光源类似于灯泡、手电筒的光；在WebGL中，光源主要分为三类：平行光、点光源、环境光
平行光的光线相互平行，具有方向，可以看做是无限远处的光源发出的光，列如太阳照射在地球上的光。
点光源是从一个点向周围的所有方向发出的光，例如灯泡和火焰发出的光
环境光也叫做间接光，指光源发出的光被墙壁或物体多次反射后照射的物体表面的光，比如夜间打开冰箱周围都会有微亮的光，环境光不用指定位置和方向，只需要指定颜色即可

2.2反射类型

物体表面反射光线的方式有两种：漫反射和环境反射，漫反射是针对平行光和点光源，环境反射是针对环境光的。

2.3漫反射计算模型

漫反射的决定因素有两个

  • 入射光 入射光的信息包括入射光的方向和颜色
  • 物体表面类型 物体表面信息包括固有颜色(也称基地色 也就是几何体本身的颜色)和反射特性
    <漫反射光颜色> = <入射光颜色> x <表面基底色> x cosθ
    θ表示入射角，即入射光与物体表面法线的夹角
    在创建三维模型的时候我们无法预先确定光线照射到物体表面的入射角，但是我们可以确定物体每个表面的法向量，同时可以指定光源的方向，有了物体表面的法向量和光源信息就可以计算出入射角了。
    我们可以通过计算两个向量的点积来计算这两个向量夹角的余弦值：
    cosθ = <入射光线方向> ● <法线方向>
    将该等式带入漫反射计算模型中得到
    <漫反射光颜色> = <入射光颜色> x <表面基底色> x ( <入射光线方向> ● <法线方向>)
    光线方向矢量和表面法线矢量长度必须为1，也就是使用前必须进行归一化处理，否则反射光的颜色会过暗或过亮

3.demo代码

const VSHADER_SOURCE = `
attribute vec4 a_Position;
attribute vec4 a_Color;
attribute vec4 a_Normal; //法向量
uniform vec3 u_LightColor; //光线颜色
uniform vec3 u_LightDirection; //光线方向(归一化)
uniform vec3 u_AmbientLight;

uniform mat4 u_MvpMatrix;
varying vec4 v_Color;

void main() {
    gl_Position = u_MvpMatrix*a_Position;
    
    //法线向量归一化
    vec3 normal = normalize(vec3(a_Normal));
    //求夹角  法向与入射光线夹角的余弦值
    float nDotL = max(dot(u_LightDirection,normal),0.0);

    //计算漫反射光的颜色
    vec3 diffuse = u_LightColor*vec3(a_Color)*nDotL;
    //计算环境光产生的反射光颜色
    vec3 ambient = u_AmbientLight*a_Color.rgb;
    v_Color=vec4(diffuse+ambient,1.0);
}
`;

const FSHADER_SOURCE = `
precision mediump float;
varying vec4 v_Color;
void main() {
    gl_FragColor = v_Color;
}
`;

const main = () => {
  const canvas = document.getElementById("webgl");
  const gl = canvas.getContext("webgl");

  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.error("failed to init shaders");
  }
  //视点，视线，上方向
  const viewMat = new Matrix4().setLookAt(
    3,
    3,
    7,
    0.0,
    0.0,
    0.0,
    0.0,
    1.0,
    0.0
  );

  const modelMat = new Matrix4().setRotate(0, 0, 0);

 
  const projMat = new Matrix4();

  projMat.setPerspective(30, canvas.width / canvas.clientHeight, 1.0, 100);

  const mvpMat = new Matrix4()
    .setIdentity()
    .multiply(projMat)
    .multiply(viewMat)
    .multiply(modelMat);
  const u_MvpMatrix = gl.getUniformLocation(gl.program, "u_MvpMatrix");

  const u_LightColor = gl.getUniformLocation(gl.program, "u_LightColor");
  const u_LightDirection = gl.getUniformLocation(
    gl.program,
    "u_LightDirection"
  );

  const u_AmbientLight= gl.getUniformLocation(gl.program,'u_AmbientLight');
  gl.uniform3f(u_AmbientLight,0.2,0.2,0.2);
  
  //设置光的颜色 白色
  gl.uniform3f(u_LightColor, 1.0, 1.0, 1.0);
  //设置光线方向(世界坐标系下的)
  const lightDirection = new Vector3([0.5, 3.0, 4.0]);
  lightDirection.normalize();
  gl.uniform3fv(u_LightDirection, lightDirection.elements);

  gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMat.elements);

  const vertexData = 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, //front面 v0-4
    1.0,
    1.0,
    1.0,
    1.0,
    -1.0,
    1.0,
    1.0,
    -1.0,
    -1.0,
    1.0,
    1.0,
    -1.0, //right v0345
    1.0,
    1.0,
    1.0,
    1.0,
    1.0,
    -1.0,
    -1.0,
    1.0,
    -1.0,
    -1.0,
    1.0,
    1.0, //up v0561
    -1.0,
    1.0,
    1.0,
    -1.0,
    -1.0,
    1.0,
    -1.0,
    -1.0,
    -1.0,
    -1.0,
    1.0,
    -1.0, //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, //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, //back
  ]);

  //   const colorData = new Float32Array([
  //     0.4,0.4,1.0,
  //     0.4,0.4,1.0,
  //     0.4,0.4,1.0,
  //     0.4,0.4,1.0, //front
  //     0.4,1.0,0.4,
  //     0.4,1.0,0.4,
  //     0.4,1.0,0.4,
  //     0.4,1.0,0.4, //right
  //     1.0,0.4,0.4,
  //     1.0,0.4,0.4,
  //     1.0,0.4,0.4,
  //     1.0,0.4,0.4, //up
  //     1.0,1.0,0.4,
  //     1.0,1.0,0.4,
  //     1.0,1.0,0.4,
  //     1.0,1.0,0.4, //left
  //     1.0,0.4,1.0,
  //     1.0,0.4,1.0,
  //     1.0,0.4,1.0,
  //     1.0,0.4,1.0, //btm
  //     0.4,1.0,1.0,
  //     0.4,1.0,1.0,
  //     0.4,1.0,1.0,
  //     0.4,1.0,1.0, //back
  //   ]);

  const colorData = 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, //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, //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, //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, //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, //btm
    1.0,
    1.0,
    1.0,
    1.0,
    1.0,
    1.0,
    1.0,
    1.0,
    1.0,
    1.0,
    1.0,
    1.0, //back
  ]);
  const indicesData = 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,
  ]);

  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,
  ]);

  const initArrayBuffer = (gl, data, name, num, type) => {
    //创建缓冲区
    const vertexBuffer = gl.createBuffer();
    //绑定tag
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    //像缓冲区传入数据
    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
    const vertexLocation = gl.getAttribLocation(gl.program, name);
    //分配缓冲区
    gl.vertexAttribPointer(vertexLocation, num, type, false, 0, 0);
    //启用缓冲区
    gl.enableVertexAttribArray(vertexLocation);
    return true;
  };

  const initIndexBuffer = (gl, indexData) => {
    const indicesBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexData, gl.STATIC_DRAW);
  };
  initArrayBuffer(gl, vertexData, "a_Position", 3, gl.FLOAT);
  initArrayBuffer(gl, colorData, "a_Color", 3, gl.FLOAT);
  initArrayBuffer(gl, normals, "a_Normal", 3, gl.FLOAT);

  initIndexBuffer(gl, indicesData);

  const n = indicesData.length;
  gl.enable(gl.DEPTH_TEST);
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);

  let CURRENT_TIMESTAMP = Date.now();
  const tick = (speed) => {
    const now = Date.now();
    const interval = now - CURRENT_TIMESTAMP;
    CURRENT_TIMESTAMP = now;
    const angle = (interval * speed) / 1000;
    modelMat.setRotate(angle, 0, -1, 0);

    const rotateMatrix = gl.getUniformLocation(gl.program,'u_RotateMatrix');
    gl.uniformMatrix4fv(rotateMatrix,false,modelMat.elements);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);  
    requestAnimationFrame(tick);
    console.log('执行了')

    return modelMat;
  };
//   tick()
};

main();
WebGL系列教程十一（光照原理及Blinn Phong着色模型）
AIGIS的博客
10-09 1502
什么是光照？光照就是模拟出物体被光照射时的效果，使得渲染场景看起来更真实。那么WebGL在干什么？WebGL其实就是在计算继而还原每个像素的颜色和亮度。这就是我们这一节所要讲的内容，对一个立方体进行光照的渲染。本文介绍了光照原理的基础，并在此基础上讲解了法线计算、入射光计算、反射光计算、逆转置矩阵等等，最后我们使用着色模型，通过组合高光、漫反射和环境光，实现了对一个立方体的动态光照效果渲染。本文在理解上有一定的难度，希望读者仔细体会，回见~
WebGL进阶：光照与阴影 —— 让数字世界充满真实之光
最新发布
妍思码匠的博客
09-25 1030
本文深入介绍了WebGL中的高级光照技术，包括直觉式讲解光照模拟的重要性及其实施方法，展示了如何通过顶点与片段着色器调整光照效果。特别聚焦于环境光遮蔽（AO）与法线贴图两项关键技术，前者增强了场景深度，后者提升了表面质感，无需过多增加几何复杂度即可展现细腻凹凸细节。通过代码示例与直观的生活类比，文章详述了AO计算与法线贴图的集成流程，引导读者轻松掌握这些核心技巧，进而打造出兼具真实感与美学价值的3D视觉效果。
lightr:使用法线贴图在 HTML5 Canvas 中烘焙光照
06-20
打火机 使用法线贴图在 HTML5 Canvas 中烘焙照明。 拿着它： 和这个： 并做到这一点： 用法 下载 Lightr.js，API 非常简单。 你也可以通过 npm 安装。 npm install lightr Lightr.lightHeight 默认0.5 这控制了光源的 Z 位置。 目前 Lightr 仅支持单个定向光进行烘焙。 正值意味着灯光将在您的精灵上方，因此平坦的表面将被照亮。 Lightr.ambientLight 默认[0.1, 0.1, 0.1] 这控制了环境光的颜色/强度。 该值直接添加到最终颜色中，因此 [1, 1, 1] 表示您的输出将是全白的！ Lightr.minLightIntensity Default 0.0 这控制了任何一个像素可以接收的最小光。 值为 0 表示如果表面背对光源，它将完全黑暗。 值为 1 表示所有像素始
WebGL光照模型渲染立方体
u014291990的博客
11-25 1877
WebGL光照渲染立方体 本文是WebGL电子书的1.9节内容 本节课对WebGL光照的介绍主要目的是让你对WebGL光照，以及如何在代码层面实现WebGL光照算法有个大致的轮廓认知，计算机图形学中关于光照相关算法的介绍更为详细和系统，如果有兴趣可以阅读计算机图形学的书籍。 光线照在物体上，物体反射光线就会构成一个光场，眼睛看到生活中的物体有立体感就是因为有光的存在。因此在学习物理光学在WebGL...
Unity Shader------漫反射(Diffuse)计算
傻子是小傲娇的博客（大钊）
12-29 2516
光照模型： 一个公式，用来计算在某个点的光照效果 标准光照模型下进入摄像机的光： 自发光 高光反射 漫反射（Diffuse）： 直射光颜色 * max（0，cos（光和法线的夹角）） Shader "Custom/Shader01"{ SubShader{ Pass{ //定义LightMode以得到unity的内置光照变量 Tags{"LightMode"="For...
PBR来龙去脉篇四：漫反射具体计算
yxriyin的专栏
01-03 1296
WebGL入门(二十四)-光照原理、漫反射光计算、漫反射光照射下的立方体
点燃火柴的博客
04-03 1399
漫反射光照射下的立方体1.demo效果2.相关知识点2.1 光照原理2.2 光源类型2.3 反射类型2.4 漫反射计算模型3.demo代码 1.demo效果 如上，添加了漫反射光照射效果的立方体，最前面的面亮一些，顶上和右侧的面暗一些 2.相关知识点 2.1 光照原理 现实中，物体被光线照射，会有一部分光在物体表面反射，当反射光线进入你的眼睛时，你就看到了物体的形状与颜色，现实生活中你会发现，有光照照射物体时会在地面上投下影子，物体表面会出现明暗程度不一样的效果，正是因为存在 影子（阴影） 和 明暗差异
WebGL编程指南
04-09
《WebGL编程指南》 第1 章 WebGL 概述 1 WebGL 的优势 3 使用文本编辑器开发三维应用 3 轻松发布三维图形程序 4 充分利用浏览器的功能 5 学习和使用WebGL 很简单 5 WebGL 的起源 5 WebGL 程序的结构 6 总结...
webgl编程指南及源码2/2
05-08
《WebGL编程指南》 第1 章 WebGL 概述 1 WebGL 的优势 3 使用文本编辑器开发三维应用 3 轻松发布三维图形程序 4 充分利用浏览器的功能 5 学习和使用WebGL 很简单 5 WebGL 的起源 5 WebGL 程序的结构 6 总结...
WebGL编程指南压缩包
05-15
《WebGL编程指南》 第1 章 WebGL 概述 1 WebGL 的优势 3 使用文本编辑器开发三维应用 3 轻松发布三维图形程序 4 充分利用浏览器的功能 5 学习和使用WebGL 很简单 5 WebGL 的起源 5 WebGL 程序的结构 6 总结...
【光线追踪系列五】漫反射(Diffuse)
qq_35312463的博客
08-31 4453
本次光线追踪系列从基础重新开始，主要参照 Ray Tracing in One Weekend ，具体实现代码框架见 https://github.com/RayTracing/raytracing.github.io/。本文只是主要精炼光追相关理论，具体实现可参照原文。 本部分，我们来实现光线在漫反射材质表面反射的效果。 一、漫反射原理 如果光线射向漫反射材质物体（表面不规则），则反射光线具有随机的方向。以刚刚的场景为例，一个大球上面有个小球，材质均为漫反射材质。下面的三条射线，具有不同的随机反射行为：
用java绘制一个光照球体_HTML5 Canvas一个基本光线行进的球体光照效果
weixin_29577845的博客
03-02 276
JavaScript语言：JaveScriptBabelCoffeeScript确定var TWO_PI = 2 * Math.PI;var canvas;var canvasWidth;var canvasHeight;var context;var globalTime;var imageData;function init() {canvas = document.getElementByI...
光照模型与面绘制算法---多边形绘制算法
weixin_33910385的博客
11-15 291
2019独角兽企业重金招聘Python工程师标准>>> ...
【图形学】17 光照模型（二、漫反射的Shader实现）
纸境止境的博客
08-04 346
1、环境光和自发光 2、基本的逐顶点光照代码实现 3、基本逐像素光照的实现 4、半兰伯特光照模型的实现 5、新手实现的注意事项
从0开始用javascript和HTML5的canvas编写光线追踪渲染器<二>
zakheav的专栏
06-09 1805
局部光照模型简介： 在上一节，介绍了光线追踪算法的基本框架，里面提到了两个新的概念，其中一个是局部光照模型（phong模型），另一个是光线投射算法。光线投射算法我会在下一节介绍，本节主要介绍什么是phong局部光照模型。 局部光照模型，顾名思义就是只考虑光线在该物体上的作用，而不用考虑物体之间光能的传递。 phong模型分为三大部分，漫反射分量diffuse， 镜面反射分量refle
从0开始用javascript和HTML5的canvas编写光线追踪渲染器<一>
zakheav的专栏
04-27 3238
序 题目写的比较吸引眼球，实际上这个光线追踪渲染器十分简陋，只能渲染最简单的几何体----球体，效果也很简陋。但是十分简单，核心代码只有200-300行。很适合初学者学习计算机图形学的一些基本概念。  以下我会通过介绍一些基本算法，逐步构建这个“光线追踪渲染器”。
【笔记】《WebGL编程指南》学习-第8章光照（1-光照原理）
努力的V崽兽
10-17 955
对静态物体进行光照处理，使之更真实
webgl火焰特效（证实可用）
HR_Reborn的博客
08-27 551
1、代码如下 <!DOCTYPE html> <html lang="en"> <head> <title>TJH ar.js</title> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <meta
简单漫反射
zjz
03-22 1205
前言：本篇博客只是一个简单的实现漫反射功能的例子，主要是当做笔记使用。 核心要点：如下所示： 1.使用法向量和光照向量在相同坐标系中进行点积得到光照强度。点积值小于0表示光照在两向量所在平面的背面，此时无需光照颜色。点积值大于等于0时表示光照在两向量所在平面的正面，此时点积值越大，两向量夹角越小，光照强度就越强。所以可以将点积值使用saturate函数限定在0~1之间来乘以光照颜色，从而得到每个顶...
WebGL编程指南：示例源码深度解析
4. 光照和材质：如何模拟光照效果，包括环境光、漫反射、镜面反射等，并实现不同的材质效果。 5. 纹理映射：在WebGL中加载、使用和管理纹理贴图，以便给3D模型添加真实感。 6. 高级纹理技术：比如多重纹理、纹理压缩...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值