WebGL编程指南-27 逐片元处理点光源光照效果

最新推荐文章于 2022-11-14 21:15:00 发布
最新推荐文章于 2022-11-14 21:15:00 发布
阅读量406 收藏
点赞数
分类专栏： WebGL编程指南 文章标签： webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46773434/article/details/127090033
版权

1.demo效果

在这里插入图片描述
在这里插入图片描述
如上图，图二为逐片元处理点光源的效果，与之前的demo效果相比，物体表面的光照效果更佳柔和、细腻。

2.实现要点

在上一章中实现方式是逐顶点的方式，实现点光源在照射到立方体呈现出的效果，通过计算各个顶点在点光源下显现的颜色，然后通过v_Color通过内拆计算出其它片元的颜色，也就是说上一张内插的是color，而这一章内插的是position，通过position计算出点光源方向从而计算出该片元color。

  • 对法线进行归一化处理
  • 计算点光源照射物体表面的光线方向
  • 计算光线方向和法向量点积
  • 计算漫反射光的颜色
  • 计算环境漫反射光的颜色
  • 将漫反射光的颜色和环境漫反射光的颜色相加的结果赋值给内置变量gl_FragColor

3.demo代码

//Chapter 08
//temp 03

//绘制一个立方体
// => 运动中的光照效果
// 加上逆转置变化法向量

const VSHADER_SOURCE = `
    attribute vec4 a_Position;
    attribute vec4 a_Color;
    uniform mat4 u_VpMatrix; //view and range mat
    uniform mat4 u_ModelMatrix; //model mat
    uniform mat4 u_ReverseModelMat; //模型矩阵的逆转置
    attribute vec4 a_Normal; //法向量
    varying vec3 v_Normal;
    varying vec3 v_Position;
    uniform vec3 u_LightColor; //平行光
    uniform vec3 u_LightPosition;//光源位置
    uniform vec3 u_LightDirection; //光照方向 //=归一化后的世界坐标
    uniform vec3 u_AmbientLight; // 环境光
    varying vec4 v_Color;
    void main() {
        gl_Position = u_VpMatrix * u_ModelMatrix * a_Position;

        //漫反射光颜色
        //法向量进行归一化
        //计算顶点的世界坐标
        v_Position = vec3(u_ModelMatrix*a_Position);
        v_Normal=normalize(vec3(u_ReverseModelMat*a_Normal));
        v_Color=a_Color;
    }
`;

const FSHADER_SOURCE = `
    precision mediump float;
    uniform vec3 u_LightColor;
    uniform vec3 u_LightPosition;
    uniform vec3 u_AmbientLight;
    
    varying vec3 v_Normal;
    varying vec3 v_Position;
    
    varying vec4 v_Color;
    void main() {
        vec3 normal = normalize(v_Normal);
        vec3 lightDirection = normalize(u_LightPosition-v_Position);
        float nDotL = max(dot(lightDirection,normal),0.0);

        vec3 diffuse = u_LightColor*v_Color.rgb*nDotL;
        vec3 ambient = u_AmbientLight*v_Color.rgb;
        
        gl_FragColor = vec4(diffuse+ambient,v_Color.a);
        // gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`;

ready(loadWEBGL);

function loadWEBGL() {
  const canvas = document.getElementById("webgl");
  const webgl = canvas.getContext("webgl");

  if (!initShaders(webgl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log(new Error("failed to init shaders!"));
    return;
  }

  const viewMat = new Matrix4().setLookAt(
    7,
    2.5,
    6,
    0.0,
    0.0,
    0.0,
    0.0,
    1.0,
    0.0
  );
  const modelMat = new Matrix4().setIdentity();
  // var modelMat = new Matrix4().setTranslate(0, 1, 0).rotate(30, 0, 0, 1);

  const projMat = new Matrix4();
  projMat.setPerspective(30, canvas.width / canvas.height, 1.0, 100);

  const vpMat = new Matrix4().setIdentity().multiply(projMat).multiply(viewMat);
  const u_VpMatrix = webgl.getUniformLocation(webgl.program, "u_VpMatrix");
  webgl.uniformMatrix4fv(u_VpMatrix, false, vpMat.elements);

  const u_ModelMatrix = webgl.getUniformLocation(webgl.program, "u_ModelMatrix");
  webgl.uniformMatrix4fv(u_ModelMatrix, false, modelMat.elements);

  //************* */
  //model逆转置
  const reverseModelMat = new Matrix4().setInverseOf(modelMat); //求逆
  reverseModelMat.transpose(); //转置
  const u_ReverseModelMat = webgl.getUniformLocation(
    webgl.program,
    "u_ReverseModelMat"
  );
  webgl.uniformMatrix4fv(u_ReverseModelMat, false, reverseModelMat.elements);
  //************* */
  const u_LightPosition = webgl.getUniformLocation(
    webgl.program,
    "u_LightPosition"
  );
  webgl.uniform3f(u_LightPosition, 0.0, 3.0, 4.0);

  // data
  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_ALLWHITE = 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,
  ]);

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

  initArrayBuffer(webgl, vertexData, "a_Position", 3, webgl.FLOAT);
  initArrayBuffer(webgl, colorData_ALLWHITE, "a_Color", 3, webgl.FLOAT);
  initIndexBuffer(webgl, indicesData);
  const n = indicesData.length;

  //设置光照颜色
  const u_LightColor = webgl.getUniformLocation(webgl.program, "u_LightColor");
  webgl.uniform3f(u_LightColor, 1.0, 1.0, 1.0);
  //设置光照方向
  const u_LightDirection = webgl.getUniformLocation(
    webgl.program,
    "u_LightDirection"
  );
  const lightDirection = new Vector3([0.5, 3.0, 4.0]);
  lightDirection.normalize();
  webgl.uniform3fv(u_LightDirection, lightDirection.elements);
  //通过设置顶点的法向量 确定面的法向量
  const normalData = 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,
  ]);
  initArrayBuffer(webgl, normalData, "a_Normal", 3, webgl.FLOAT);

  //设置环境光
  const u_AmbientLight = webgl.getUniformLocation(
    webgl.program,
    "u_AmbientLight"
  );
  webgl.uniform3f(u_AmbientLight, 0.2, 0.2, 0.2);

  webgl.enable(webgl.DEPTH_TEST);
  webgl.clearColor(0.0, 0.0, 0.0, 1.0);
  webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);
  // webgl.drawArrays(webgl.TRIANGLES, 0, n);
  webgl.drawElements(webgl.TRIANGLES, n, webgl.UNSIGNED_BYTE, 0);

  const tempRMatrix = new Matrix4().setInverseOf(modelMat);
  const tick = () => {
    var modelMat = animateRotate(webgl, 30);

    //model逆转置
    tempRMatrix.setInverseOf(modelMat); //求逆
    tempRMatrix.transpose(); //转置
    webgl.uniformMatrix4fv(u_ReverseModelMat, false, tempRMatrix.elements);
    //mvp矩阵
    webgl.uniformMatrix4fv(u_ModelMatrix, false, modelMat.elements);
    //************* */
    webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);
    webgl.drawElements(webgl.TRIANGLES, n, webgl.UNSIGNED_BYTE, 0);
    requestAnimationFrame(tick);
  };
  // requestAnimationFrame(tick);
}

// 初始化顶点缓冲区
// 坐标值 或者 颜色值
function initArrayBuffer(webgl, data, name, num, type) {
  const vertexBuffer = webgl.createBuffer();
  webgl.bindBuffer(webgl.ARRAY_BUFFER, vertexBuffer);
  webgl.bufferData(webgl.ARRAY_BUFFER, data, webgl.STATIC_DRAW);
  const vertexLoction = webgl.getAttribLocation(webgl.program, name);
  webgl.vertexAttribPointer(vertexLoction, num, type, false, 0, 0);
  webgl.enableVertexAttribArray(vertexLoction);
  return true;
}

//=> 使用索引
function initIndexBuffer(webgl, indexData) {
  const indicesBuffer = webgl.createBuffer();

  webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
  webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, indexData, webgl.STATIC_DRAW);

  return true;
}

//=> 添加一个动画
// return rotate 矩阵
const CURRENT_ANGLE = 0;
const CURRENT_MODEL_MATRIX = new Matrix4();
const CURRENT_TIMESTAMP = Date.now();
function animateRotate(webgl, speed) {
  const now = Date.now();
  const interval = Date.now() - CURRENT_TIMESTAMP;
  CURRENT_TIMESTAMP = now;
  CURRENT_ANGLE += (interval * speed) / 1000; //累加
  CURRENT_MODEL_MATRIX.setRotate(CURRENT_ANGLE, 0, 0, 1);
  return CURRENT_MODEL_MATRIX;
}
鸡米工程师
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
《WebGL编程指南》自带光盘webgl-guide-code
01-12
WebGL提供了基础的光照模型，包括环境光、点光源、平行光等，以及各种光照参数，如颜色、位置、强度和方向。 6. 深度测试与混合： 深度测试确保了正确地绘制多边形，避免出现错误的覆盖效果。混合则用于处理透明...
webGl编程指南书籍下载
最新发布
05-26
在《WebGL编程指南》这本书中，你将全面了解到WebGL的基础知识，包括如何设置场景、创建几何形状、应用变换、光照和材质效果，以及加载和处理纹理。这本书将带你走过WebGL的学习曲线，从最基础的概念开始，逐步引导...
html5 WebGL酷炫网页动画特效
06-11
6款html5 WebGL酷炫网页动画特效，结合TweenMax、Three.js创建形状，打造出各种动画效果都十分的好看。
WebGL使用点光源照明（WebGL进阶06）
点燃火柴的博客
07-17 1027
使用点光源照明1. demo效果2. 点光源介绍 1. demo效果 上图效果为原点处有点光源照射的效果 2. 点光源介绍 现实生活中最常见的光照，就是灯泡照明，灯泡发出的光从灯泡开始向四面八方散射出去，实际上，灯泡发出的光衰减醒来。距离越远，到达的光就越少。本次实现的点光源的处理中没有考虑到这种光衰减 我们已经知道，在WebGL中，在使用平行光的时候需要知道平行光的方向，但是点光源只有一个位置属性，本身没有方向属性，但是我们可以用点光源的坐标减去顶点的坐标就得到 点光源的方向 点光源方向计算 <点
逐片元光照
coder
11-21 183
<html> <head>11</head> <body> <canvas id = "test" width = "200" height = "200">canvas </canvas> <script src = "webgltest/cuon-matrix.js"></script> <s...
[WebGL入门]二十五，点光源的光照
weixin_33905756的博客
04-30 199
注：文章译自http://wgld.org/，原作者杉本雅広(doxas)，文章中假设有我的额外说明。我会加上［lufy：］。另外，鄙人webgl研究还不够深入，一些专业词语。假设翻译有误，欢迎大家指正。本次的demo的执行结果点光源上次介绍了高氏着色和补色着色。使用补色着色的手法。能够渲染更加自然的阴影。3D效果更加真实。可是会有计算量比較大的缺点。这个仅仅能case by case，依据不...
WebGL实践篇（九）—— 光照：点光源
weixin_44207506的博客
04-27 905
1.点光源的光照值 光照来源于点，太阳也算是一个点光源，光照射到物体的同一面上有明有暗（即光照值不同），将面上的每个点到光源的矢量与法向量点乘得到的值就是光照值。 顶点着色器： 主要添加了光照位置的参数，并将顶点着色器中求出来的光照向量传值给着色器进行渲染。 <script id="vertex-shader-3D" type="x-shader/x-vertex"> attribute vec4 a_position; attribute vec3 a_norma
WebGL编程指南
04-09
《WebGL编程指南》 第1 章 WebGL 概述 1 WebGL 的优势 3 使用文本编辑器开发三维应用 3 轻松发布三维图形程序 4 充分利用浏览器的功能 5 学习和使用WebGL 很简单 5 WebGL 的起源 5 WebGL 程序的结构 6 总结...
webgl编程指南样例代码和程序
02-08
《WebGL编程指南》是一本深入讲解WebGL技术的专业书籍，它旨在帮助读者掌握在浏览器中进行3D图形编程的核心技巧。样例代码和示例程序是学习这本书的重要辅助资源，能够直观地展示理论知识的实际应用，加深理解并提供...
webgl-cookbook:webgl编程指南_案例
03-24
"webgl-cookbook:webgl编程指南_案例"是一个开源项目，提供了丰富的示例代码，旨在帮助开发者学习和掌握WebGL编程。 这个项目的核心是通过实例来教授WebGL的基本概念和技术。在"webgl-cookbook-master"这个压缩包中...
WebGL入门(二十九)-逐片元处理点光源光照效果
点燃火柴的博客
04-06 480
逐片元处理点光源光照效果1.demo效果2.实现要点2.1顶点着色器中声明varying变量2.2片元着色器中使用varying变量3.demo代码 1.demo效果 如上图，图二为逐片元处理点光源的效果，与之前的demo效果相比，物体表面的光照效果更加柔和、细腻 2.实现要点 2.1顶点着色器中声明varying变量 在顶点着色器中声明varying变量v_Color，v_Normal，v_Position分别用来向片元着色器传值顶点颜色信息，顶点法向量，顶点坐标，在main函数中分别计算它们的值
WebGL 中的灯光设置
Kristen的博客
11-14 583
在 3D 空间中模拟现实世界的灯光的具体原理和细节绝非本篇文章能够描述清楚的，但是对灯光模型有一定的了解对我们的学习还是很有帮助的。以我们的需要来看，我们会简化光照模型，只考虑简单的方向光和环境光，不会考虑任何镜面反射和点光源。这种光的特点可以理解为好像是从一个很遥远的地方照射过来的，然后光线中的每一个光子与其它光子都是平行运动的。接着，我们会更新顶点着色器，考虑到环境光，再考虑到方向光（方向光的作用会因为光线方向与面的夹角关系而不同），计算每一个顶点的颜色。这种光在我们的现实生活中是最常被用到的。
WebGL入门(二十七)-点光源使用，点光源照射下的立方体效果
点燃火柴的博客
04-05 773
点光源使用，点光源照射下的立方体效果1.demo效果2.相关知识点2.1 点光源方向计算3. demo代码 1.demo效果 如上图，立方体在点光源照射下的效果，最前面的面右上角看起来比周围更亮一些 2.相关知识点 2.1 点光源方向计算 我们已经知道，在WebGL中，在使用平行光的时候需要知道平行光的方向，但是点光源只有一个位置属性，本身没有方向属性，但是我们可以用点光源的坐标减去顶点的坐标就得到 点光源的方向 点光源方向计算 <点光源方向> = <点光源坐标> - <顶点
逐片元操作
飞飞飞的博客
01-07 1053
这是渲染流水线的最后一步。逐片元操作（Per-Fragment Operation)是OpenGL中的说法，在DirectX中，这一阶段被称为输出合并阶段（Output-Merger)。Merger这个词可能更容易让读者明白这一步骤的目的：合并。而OpenGL中的名字可以让读者明白这个阶段的操作单位，即对每个片元进行一些操作。但要合并哪些数据，又要...
UnityShader从入门到放弃(五)漫反射—逐片元光照
IT_break的博客
09-06 670
逐片元光照是在将计算光照信息的代码放在片元函数中，同时本篇代码还加入了环境光 Shader "Luoxiaoxiao/Shader_5"{ SubShader{ Tags{"LightMode"="ForwardBase"}//引入LightMode标签 使系统捕捉关照信息 Pass{ CGPROGRAM #include "Lighting.cginc"/
webgl实现发光线框(glow wireframe)效果
netcy的专栏
08-06 1575
在之前这篇文章， WebGL 单通道wireframe渲染 我们介绍了webgl如何实现单通道wireframe的效果。 本篇文章就是在此技术原理基础之上，来实现发光的wireframe效果。 要实现发光的效果 所谓的发光的效果，就是颜色的渐变。 渐变越慢，发光的效果越明显，渐变越快，发光效果越不明显。 其实wireframe本身就是在两种颜色之间进行渐变,从代码也可以看出： gl_FragColor.rgb = mix(vec3(.0,.0,.0), vec3(1.0,1.0,1.0),edgeFacto
webgl点光源的漫反射
webMinStudent的博客
01-11 4165
1.webgl点光源的漫反射 点光源的特点: 点光源照射到物体上的每个顶点的入射光方向是各不相同的。 需要一个点光源的位置。 需要一个点光源的光颜色。 需要计算的是 我们需要计算出每个顶点的入射光线的方向。 点光源向四周放射光线，所以顶点处的光线方向是由点光源坐标 - 顶点坐标而得到得矢量 入射光线的方向 = 点光源的坐标 - 顶点坐标 顶点着色器中 声明点光源的位置 'uniform vec3 u_LightPosition;\n' + // 点光源的位置 获取地址，并且赋值 const u_Li
逐片元-兰伯特光照模型
qq_39691716的博客
09-19 84
Shader "QStudyShader/Per_Fragment_LambertLaw" { Properties{ } SubShader{ Pass{ Tags{ "LightModel" = "ForwardBase"} CGPROGRAM #include "Lighting.cginc" #pragma vertex Vertex #p
WebGL入门指南：探索3D图形编程
3. **纹理与光照(Chapter 3: Textures and Lighting)**：这部分会介绍如何应用纹理到3D模型上，增加视觉真实感，并讲解不同的光照模型，如环境光、点光源和方向光。 4. **增强现实感(Chapter 4: Increasing Realism...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值