shadowMap 简单回顾

最新推荐文章于 2023-11-23 19:46:12 发布
最新推荐文章于 2023-11-23 19:46:12 发布
阅读量245 收藏
点赞数
分类专栏： webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36091277/article/details/116866029
版权

编程指南:shadowMap示例连接
编程指南部分代码
给与想象的空间

获取gl变量

var canvas = document.getElementById('webgl');
var gl = getWebGLContext(canvas);

获取Plane、Triangle顶点缓冲区,颜色缓冲区,索引缓冲区

var triangle = initVertexBuffersForTriangle(gl); //三角形
var plane = initVertexBuffersForPlane(gl);   //平面

//不推荐这么写...当然我也不知道怎么写更好
//将顶点数组、颜色数组、索引数组 转为顶点缓冲区,颜色缓冲区,索引缓冲区
function initVertexBuffersForTriangle(gl) {
  // Create a triangle
  //       v2
  //      / | 
  //     /  |
  //    /   |
  //  v0----v1
  // Vertex coordinates
  var vertices = new Float32Array([-0.8, 3.5, 0.0,  0.8, 3.5, 0.0,  0.0, 3.5, 1.8]);
  // Colors
  var colors = new Float32Array([1.0, 0.5, 0.0,  1.0, 0.5, 0.0,  1.0, 0.0, 0.0]);    
  // Indices of the vertices
  var indices = new Uint8Array([0, 1, 2]);
  var o = new Object();  // Utilize Object object to return multiple buffer objects together
  // Write vertex information to buffer object
  o.vertexBuffer = initArrayBufferForLaterUse(gl, vertices, 3, gl.FLOAT);
  o.colorBuffer = initArrayBufferForLaterUse(gl, colors, 3, gl.FLOAT);
  o.indexBuffer = initElementArrayBufferForLaterUse(gl, indices, gl.UNSIGNED_BYTE);
  if (!o.vertexBuffer || !o.colorBuffer || !o.indexBuffer) return null; 
  o.numIndices = indices.length;
  // Unbind the buffer object
  gl.bindBuffer(gl.ARRAY_BUFFER, null);
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
  return o;
}
//这个是加载Plane
function initVertexBuffersForPlane(gl) {
   // Create a plane
   //  v1------v0
   //  |        | 
   //  |        |
   //  |        |
   //  v2------v3
   // Vertex coordinates
   var vertices = new Float32Array([
     3.0, -1.7, 2.5,  
     -3.0, -1.7, 2.5,  
     -3.0, -1.7, -2.5,   
     3.0, -1.7, -2.5    // v0-v1-v2-v3
   ]);
   // Colors
   var colors = 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
   ]);
   // Indices of the vertices
   var indices = new Uint8Array([0, 1, 2,   0, 2, 3]);
   var o = new Object(); // Utilize Object object to return multiple buffer objects together
   // Write vertex information to buffer object
   o.vertexBuffer = initArrayBufferForLaterUse(gl, vertices, 3, gl.FLOAT);
   o.colorBuffer = initArrayBufferForLaterUse(gl, colors, 3, gl.FLOAT);
   o.indexBuffer = initElementArrayBufferForLaterUse(gl, indices, gl.UNSIGNED_BYTE);
   if (!o.vertexBuffer || !o.colorBuffer || !o.indexBuffer) return null; 
   o.numIndices = indices.length;
   // Unbind the buffer object
   gl.bindBuffer(gl.ARRAY_BUFFER, null);
   gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
   return o;
 }
 function initArrayBufferForLaterUse(gl, data, num, type) {
   // Create a buffer object
   var buffer = gl.createBuffer();
   if (!buffer) {
     console.log('Failed to create the buffer object');
     return null;
   }
   gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
   gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
   buffer.num = num;
   buffer.type = type;
   return buffer;
 }
 function initElementArrayBufferForLaterUse(gl, data, type) {
   var buffer = gl.createBuffer();
   if (!buffer) {
     console.log('Failed to create the buffer object');
     return null;
   }
   gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);
   gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, data, gl.STATIC_DRAW);
   buffer.type = type;
   return buffer;
 }

先获取fbo,后面用

  • fbo还有一种方式绑定
 var fbo = initFramebufferObject(gl);
 
 //texture depthBuffer 返回fbo
 function initFramebufferObject(gl) {
   var texture = gl.createTexture(); // 纹理创建 后面拿来用的
   gl.bindTexture(gl.TEXTURE_2D, texture); // Bind the object to target
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, OFFSCREEN_WIDTH, OFFSCREEN_HEIGHT, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

   var depthBuffer = gl.createRenderbuffer(); // 创建渲染缓冲区 用来渲染的
   gl.bindRenderbuffer(gl.RENDERBUFFER, depthBuffer); // Bind the object to target
   gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, OFFSCREEN_WIDTH, OFFSCREEN_HEIGHT); //都是深度吗?

   var framebuffer = gl.createFramebuffer(); //帧缓冲区 有个有点展示的意思
   framebuffer.texture = texture; // Store the texture object
   gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
   gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0); //帧缓冲区 对应贴图
   gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthBuffer); //帧缓冲区 对应渲染缓冲区

   var e = gl.checkFramebufferStatus(gl.FRAMEBUFFER); //判断是否正确配置
   return framebuffer;
 }

变量的声明

var OFFSCREEN_WIDTH = 2048, OFFSCREEN_HEIGHT = 2048;
var LIGHT_X = 0, LIGHT_Y = 7, LIGHT_Z = 2; // Position of the light source
var currentAngle = 0.0; // Current rotation angle (degrees)
var mvpMatrixFromLight_t = new Matrix4(); // A model view projection matrix from light source (for triangle)
var mvpMatrixFromLight_p = new Matrix4(); // A model view projection matrix from light source (for plane)

深度材质,用在平面和三角面上的,然后给fbo获取为那个角度的贴图

 var shadowProgram = createProgram(gl, SHADOW_VSHADER_SOURCE, SHADOW_FSHADER_SOURCE);
 var SHADOW_VSHADER_SOURCE =
   'attribute vec4 a_Position;\n' +
   'uniform mat4 u_MvpMatrix;\n' +
   'void main() {\n' +
   '  gl_Position = u_MvpMatrix * a_Position;\n' +
   '}\n';
 var SHADOW_FSHADER_SOURCE =
   '#ifdef GL_ES\n' +
   'precision mediump float;\n' +
   '#endif\n' +
   'void main() {\n' +
   '  gl_FragColor = vec4(gl_FragCoord.z, 0.0, 0.0, 0.0);\n' + //网格材质的颜色只写入z值
   '}\n';
使用材质
shadowProgram.a_Position = gl.getAttribLocation(shadowProgram, 'a_Position');
shadowProgram.u_MvpMatrix = gl.getUniformLocation(shadowProgram, 'u_MvpMatrix');
gl.activeTexture(gl.TEXTURE0); // Set a texture object to the texture unit
gl.bindTexture(gl.TEXTURE_2D, fbo.texture); //为啥要在这里绑定呢
var viewProjMatrixFromLight = new Matrix4(); // Prepare a view projection matrix for generating a shadow map
viewProjMatrixFromLight.setPerspective(70.0, OFFSCREEN_WIDTH/OFFSCREEN_HEIGHT, 1.0, 100.0);
viewProjMatrixFromLight.lookAt(LIGHT_X, LIGHT_Y, LIGHT_Z, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);
drawcall
gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); // Change the drawing destination to FBO
gl.viewport(0, 0, OFFSCREEN_HEIGHT, OFFSCREEN_HEIGHT); // Set view port for FBO
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);   // Clear FBO    
gl.useProgram(shadowProgram); // Set shaders for generating a shadow map
drawTriangle(gl, shadowProgram, triangle, currentAngle, viewProjMatrixFromLight);
//mvpMatrixFromLight_t.set(g_mvpMatrix); // Used later
drawPlane(gl, shadowProgram, plane, viewProjMatrixFromLight);
mvpMatrixFromLight_p.set(g_mvpMatrix); // Used later

生成阴影材质,用在平面和三角面上的

图一

  var normalProgram = createProgram(gl, VSHADER_SOURCE, FSHADER_SOURCE);
  // Vertex shader program for regular drawing
  var VSHADER_SOURCE =
    'attribute vec4 a_Position;\n' +
    'attribute vec4 a_Color;\n' +
    'uniform mat4 u_MvpMatrix;\n' +
    'uniform mat4 u_MvpMatrixFromLight;\n' +
    'varying vec4 v_PositionFromLight;\n' +
    'varying vec4 v_Color;\n' +
    'void main() {\n' +
    '  gl_Position = u_MvpMatrix * a_Position;\n' + 
    '  v_PositionFromLight = u_MvpMatrixFromLight * a_Position;\n' + //相对于光点的矩阵
    '  v_Color = a_Color;\n' +
    '}\n';

  // Fragment shader program for regular drawing
  var FSHADER_SOURCE =
    '#ifdef GL_ES\n' +
    'precision mediump float;\n' +
    '#endif\n' +
    'uniform sampler2D u_ShadowMap;\n' + //深度贴图
    'varying vec4 v_PositionFromLight;\n' +
    'varying vec4 v_Color;\n' +
    'void main() {\n' +
    '  vec3 shadowCoord = (v_PositionFromLight.xyz/v_PositionFromLight.w)/2.0 + 0.5;\n' +  //
    '  vec4 rgbaDepth = texture2D(u_ShadowMap, shadowCoord.xy);\n' + //这一步可看图一来理解 能上贴图(rgbaDepth是带有深度信息的)的地方
    '  float visibility = (shadowCoord.z > rgbaDepth.r + 0.005) ? 0.7 : 1.0;\n' + //实际深度与贴图上的深度要深得话 就会有阴影 乘0.7是为了更暗
    '  gl_FragColor = vec4(v_Color.rgb * visibility, v_Color.a);\n' + //
    '}\n';
使用材质
normalProgram.a_Position = gl.getAttribLocation(normalProgram, 'a_Position');
normalProgram.a_Color = gl.getAttribLocation(normalProgram, 'a_Color');
normalProgram.u_MvpMatrix = gl.getUniformLocation(normalProgram, 'u_MvpMatrix');
normalProgram.u_MvpMatrixFromLight = gl.getUniformLocation(normalProgram, 'u_MvpMatrixFromLight');
normalProgram.u_ShadowMap = gl.getUniformLocation(normalProgram, 'u_ShadowMap');
var viewProjMatrix = new Matrix4();          // Prepare a view projection matrix for regular drawing
viewProjMatrix.setPerspective(45, canvas.width/canvas.height, 1.0, 100.0);
viewProjMatrix.lookAt(0.0, 9.0, 9.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);
drawcall
gl.bindFramebuffer(gl.FRAMEBUFFER, null); // Change the drawing destination to color buffer
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);    // Clear color and depth buffer
gl.useProgram(normalProgram); // Set the shader for regular drawing
gl.uniform1i(normalProgram.u_ShadowMap, 0);  // Pass 0 because gl.TEXTURE0 is enabled�る
//gl.uniformMatrix4fv(normalProgram.u_MvpMatrixFromLight, false, mvpMatrixFromLight_t.elements);
drawTriangle(gl, normalProgram, triangle, currentAngle, viewProjMatrix);
gl.uniformMatrix4fv(normalProgram.u_MvpMatrixFromLight, false, mvpMatrixFromLight_p.elements);
drawPlane(gl, normalProgram, plane, viewProjMatrix);

drawcall的一些方法

 // Coordinate transformation matrix
 var g_modelMatrix = new Matrix4();
 var g_mvpMatrix = new Matrix4();
 function drawTriangle(gl, program, triangle, angle, viewProjMatrix) {
   // Set rotate angle to model matrix and draw triangle
   g_modelMatrix.setRotate(angle, 0, 1, 0);
   draw(gl, program, triangle, viewProjMatrix);
 }
 function drawPlane(gl, program, plane, viewProjMatrix) {
   // Set rotate angle to model matrix and draw plane
   g_modelMatrix.setRotate(-45, 0, 1, 1);
   draw(gl, program, plane, viewProjMatrix);
 }
 function draw(gl, program, o, viewProjMatrix) {
   initAttributeVariable(gl, program.a_Position, o.vertexBuffer);
   if (program.a_Color != undefined) // If a_Color is defined to attribute
     initAttributeVariable(gl, program.a_Color, o.colorBuffer);
   gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, o.indexBuffer);
   // Calculate the model view project matrix and pass it to u_MvpMatrix
   g_mvpMatrix.set(viewProjMatrix);
   g_mvpMatrix.multiply(g_modelMatrix);
   gl.uniformMatrix4fv(program.u_MvpMatrix, false, g_mvpMatrix.elements);
   gl.drawElements(gl.TRIANGLES, o.numIndices, gl.UNSIGNED_BYTE, 0);
 }
 // Assign the buffer objects and enable the assignment
 function initAttributeVariable(gl, a_attribute, buffer) {
   gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
   gl.vertexAttribPointer(a_attribute, buffer.num, buffer.type, false, 0, 0);
   gl.enableVertexAttribArray(a_attribute);
 }
纳铭
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单ShadowMap2.rar
11-17
unity shader实现自定义shadowmap,shadowmask原理学习用
shadow map范例
07-07
shadow map范例，对应解释文档参考 http://blog.csdn.net/ronintao/article/details/51649664
shadowmap的原理与实现
the_shy33的博客
09-01 5118
最近在预研一个pbr模型的时候接触到了阴影渲染的部分，因为之前一直用的是Unity内置的宏去生成阴影，并且需要用到平行光。对于阴影的制作有各种各样的办法，而shadowmap就是最典型生成阴影的一种方法，在Unity内部也是用shadowmap的变种 **CSM(Cascaded Shadowmap)和SSSM(Screen Space Shadowmap)**的两种阴影。在Unity内部如果目标平台不支持SSSM的话，它会转为CSM的阴影。下面就简单说一下shadowmap的原理和实现过程。 shadow
Shadow Map 原理和改进
热门推荐
ronintao的专栏
07-07 4万+
shadow map基础及基本改进方法
DirectX 12 之 ShadowMap
蛰伏--当你不够强大时，就不要放弃努力
05-29 361
0.7 : 1.0;一旦阴影图渲染完成，我们就可以在正常视角渲染场景，然后将场景中的片元像素P，转换到灯光空间下，我们将它在灯光空间下的坐标Z分量（深度）记作d(p)。还是使用上面的案例，我们试想下，场景中的片元像素P在灯光空间下，可能有很多像素与之重合，而且一定有一点 �′ 是离摄像机最近的，也就是ShadowMap上对应的纹素R值（当然也可能P和 �′ 是一个点）那这个 �′ 点就可以作为ShadowCoords去采样ShadowMap，得到s(p)，进而和d(p)比较，来判断是否在阴影中。
【Three.js】第十六章 Shadows 阴影
m0_68324632的博客
06-14 912
上节课我们学会了灯光，现在我们需要阴影。物体的背面应该在黑暗中，这就是阴影所谓的核心。我们缺少的是物体对象的投影，也就是根据被投影的对象在其他对象身上创建阴影。阴影渲染一直是实时 3D 渲染的一大挑战，开发人员必须找到技巧以合理的帧速率显示逼真的阴影。实现它们的方法有很多种，Three.js 有一个内置的解决方案。请注意，此解决方案很方便，但并非完美。
Unity接收阴影--SHADOW_COORDS, TRANSFER_SHADOW, SHADOW_ATTENUATION---计算阴影的三个主要部分
zengjunjie59的博客
12-18 7681
关于阴影深度的基础知识： 传统的ShadowMap ShadowMap说起来十分简单，把摄像机和光源的位置重叠，那么场景中该光源的阴影区域就是那些摄像机看不到的地方，主要应用在前向渲染路径中。 具体实现分以下几个步骤： 如果有平行光开启了阴影，Unity就会为该光源计算它的ShadowMap（只会计算一个平行光），这张ShadowMap其实就是深度图，记录了从该光源的位置出发、能看到的场景中距离它最近的表面位置（深度信息）。 Unity中实现了一个额外的Pass来专门更新光源的ShadowMap，
D3D11_ShadowMap1
11-02
D3D11_ShadowMap
shadow map PCF
12-14
opengl和glsl实现的纹理阴影，采用PCF对阴影纹理进行多重采样，使阴影边缘平滑
ShadowMap 动态阴影
06-07
Shadow Map 实现 动态阴影 自阴影 范例 以供下载 共同学习
ShadowMap_PCF
06-07
ShadowMap_PCF
osg实现shadowmap
11-09
osg实现shadowmap示例
shadowmap阴影实现
04-04
采用glsl实现阴影，使用了fbo 实现了shadow mapping 示例为汽车的阴影 显卡需要支持fbo扩展
【Cocos Creator 3.x】如何快速开启实时阴影效果（shadow map 和 planar shadow）
u014206745的博客
11-17 1627
快速 3分钟学会 Cocos Creator 的阴影系统，包括平面阴影和 shadowMap 。
4.3 实时阴影
最新发布
s178435865的专栏
11-23 898
实时阴影
ShadowMap ShadowPoint和CSM
qq_41940565的博客
03-27 346
级联和点阴影的实现
unity 拿shadowmap/ sample shadow map/拿_ShadowMapTexture
anfu8346的博客
08-14 1055
https://gamedev.stackexchange.com/questions/96051/unity-5-how-to-get-a-shadowmap UNITY_DECLARE_SHADOWMAP(tex) - declares a shadowmap texture variable with name “tex”. UNITY_SAMPLE_SHADOW(tex,uv...
LWRP（URP）学习笔记三——阴影
nxl76450106的博客
11-15 4965
LWRP中是有两种阴影实现的 阴影实现传统ShadowMap屏幕空间阴影 传统ShadowMap 传统shadowmap的实现网上很多，这里就不多说了 简单讲下就是通过shadowcaster的pass 以灯光为视角渲染一张shadowmap ，使用的时候在去用自己的深度和shadowmap中进行比较检测是否被遮挡 被遮挡就处于阴影范围内 屏幕空间阴影 值得一提的是 在LWRP中 unity的内...
UnityShader——阴影源码解析（一）
NotMz
09-03 8405
最近想着自己拿SRP写个能用的管线试试的，写到阴影的时候发现自己对Unity的阴影绘制流程并没有一个毕竟全面的了解，正好借此机会把Unity默认管线的阴影绘制过一遍 一、非屏幕阴影 我们从最简单的入手，不要Cascade，不要 screen space shadowmap。在 Graphics setting 里关掉 Cascaded Shadow，场景只打一个 hard shadow 的平行...
shadow map
07-28
\[2\]Shadow map可以通过多种技术进行改进，例如改进阴影深度映射的常见技术、自定义方向光的ShadowMap等。\[1\]此外，还有一些其他的shadow filter方法，如Exponential shadow map filtering和Variance Shadow Maps...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值