shadowmap

最新推荐文章于 2023-10-13 09:54:38 发布
最新推荐文章于 2023-10-13 09:54:38 发布
阅读量261 收藏
点赞数
分类专栏： webgl编程指南学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/directx3d_beginner/article/details/103387843
版权

这个例子其实没什么，主要是要注意光线坐标系的传递，以及纹理的传递

1，光源坐标系的传递，主要是要比较深度图的大小

        gl.useProgram(program_shadowMap);
     ....
        mvpMatrixFromLight_triangle.set(g_mvpMatrix);       

....
        mvpMatrixFromLight_plane.set(g_mvpMatrix);        
    
.........
        gl.useProgram(program_Normal);   


        gl.uniformMatrix4fv(MvpMatrixFromLightHandle_Normal, false, mvpMatrixFromLight_triangle.elements );

.......
        gl.uniformMatrix4fv(MvpMatrixFromLightHandle_Normal, false, mvpMatrixFromLight_plane.elements );

 

2,纹理的绑定，这里绑定是按照第几个纹理绑定的，

gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, fbo.texture);
 

绑定后，正常绘制后传递时，

var shadowMapHandle_Normal = gl.getUniformLocation(program_Normal, 'u_ShadowMap'); gl.uniform1i(shadowMapHandle_Normal, 0 );

 

具体代码如下：

<html>
<head>11</head>
<body>
<canvas id = "test" width = "800" height = "800">canvas </canvas>
<script src = "webgltest/cuon-matrix.js"></script>
<script >

//生成阴影贴图的顶点缓冲区
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 =
    'precision mediump float;\n' +
    'void main() {\n' +
    'gl_FragColor = vec4(gl_FragCoord.z, 0.0, 0.0, 0.0); \n' +
    '}\n';
//正常绘制时的顶点着色器
var vertexShaderSource =
    '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';

//片元着色器
var fragmentShaderSource =
    'precision mediump float;\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' +
    'float depth = rgbaDepth.r;\n' +
    'float visibility = (shadowCoord.z > depth + 0.005 ) ? 0.7 : 1.0;\n' +
    'gl_FragColor = vec4(v_Color.rgb * visibility, v_Color.a ); \n' +
    '}\n';
    
//离屏绘制尺寸
var OFFSCREEN_WIDTH = 1024;
var OFFSCREEN_HEIGHT = 1024;
var LIGHT_X     = 0.0;
var LIGHT_Y = 7.0;
var LIGHT_Z = 2.0;
var g_modelMatrix = new Matrix4();
var g_mvpMatrix = new Matrix4();

//创建着色器方法，输入参数：渲染上下文，着色器类型，数据源
function createShader(gl, type, source)
{
    //创建着色器对象
    var shader = gl.createShader(type);
    //提供数据源
    gl.shaderSource(shader,source);
    //编译着色器
    gl.compileShader(shader);
    //链接
    var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
    if(success)
    {
        return shader;
    }
    gl.deleteShader(shader);
    
}
//将顶点着色器和像素着色器链接到一个着色程序
function createProgram(gl, vertexShader, fragmentShader)
{
    var program = gl.createProgram();
    gl.attachShader( program, vertexShader);
    gl.attachShader( program, fragmentShader);
    gl.linkProgram( program );
    var success = gl.getProgramParameter(program, gl.LINK_STATUS);
    if(success)
    {
        return program;
    }
    gl.deleteProgram(program);
}

//创建顶点缓冲区和索引缓冲区
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 theObject = new Object();
  theObject.vertexBuffer = initArrayBufferForLateruse(gl, vertices, 3, gl.FLOAT);
  theObject.colorBuffer = initArrayBufferForLateruse(gl, colors, 3, gl.FLOAT);
  theObject.indexBuffer = initElementArrayBufferForLaterUse(gl, indices, gl.UNSIGNED_BYTE);
  if( !theObject.vertexBuffer || !theObject.colorBuffer || !theObject.indexBuffer)
  {
    return null;
  }
    
    theObject.numIndices = indices.length;
    
    //解绑
    gl.bindBuffer(gl.ARRAY_BUFFER, null );
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
    
    return theObject;

}

//创建顶点缓冲区和索引缓冲区
function initVertexBuffersForPlane(gl)
{
   // 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 theObject = new Object();
  theObject.vertexBuffer = initArrayBufferForLateruse(gl, vertices, 3, gl.FLOAT);
  theObject.colorBuffer = initArrayBufferForLateruse(gl, colors, 3, gl.FLOAT);
  theObject.indexBuffer = initElementArrayBufferForLaterUse(gl, indices, gl.UNSIGNED_BYTE);
  if( !theObject.vertexBuffer || !theObject.colorBuffer || !theObject.indexBuffer)
  {
    return null;
  }
    
    theObject.numIndices = indices.length;
    
    //解绑
    gl.bindBuffer(gl.ARRAY_BUFFER, null );
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
    
    return theObject;

}


function initElementArrayBufferForLaterUse(gl, data, type)
{
    // Create a buffer object
    var indexBuffer = gl.createBuffer();
    if (!indexBuffer)
    {
        return -1;
    }

    // Write the indices to the buffer object
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, data, gl.STATIC_DRAW);
    
    indexBuffer.type = type;

    return indexBuffer;
}
function initArrayBufferForLateruse(gl, data, num, type) {
  var buffer = gl.createBuffer();   // Create a buffer object
  if (!buffer)
  {
    return false;
  }
  // Write date into the buffer object
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
 
  buffer.num = num;
  buffer.type = type
  return buffer;
}

function initFrameBufferObject(gl)
{
    var frameBuffer, texture, depthBuffer;
    var error = function()
    {
        if(frameBuffer)
        {
            gl.deleteFrameBuffer(frameBuffer);
        }
        if(texture)
        {
            gl.deleteTexture(texture);
        }
        if(depthBuffer)
        {
            gl.deleteRenderBuffer(depthBuffer);
        }
        return null;
    }
    //创建FBO
    frameBuffer = gl.createFramebuffer();
    if(!frameBuffer)
    {
        return error();
    }
    
    //创建纹理对象，并设置大小和参数
    texture = gl.createTexture();
    if(!texture)
    {
        return error();
    }
    //绑定对象到目标
    gl.bindTexture(gl.TEXTURE_2D, texture);
    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 );
    frameBuffer.texture = texture;
    
    //创建渲染缓冲区对象,并设置大小和参数
    depthBuffer = gl.createRenderbuffer();
    if(!depthBuffer)
    {
        return error();
    }
    //连接对象到目标
    gl.bindRenderbuffer(gl.RENDERBUFFER, depthBuffer);
    gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, OFFSCREEN_WIDTH, OFFSCREEN_HEIGHT );
    
    //连接纹理对象和渲染缓冲区对象到FBO
    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);
    
    //判断FBO是否配置正确
    var e = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
    if(gl.FRAMEBUFFER_COMPLETE !== e )
    {
        return error();
    }
    
    //解绑缓存对象
    gl.bindFramebuffer(gl.FRAMEBUFFER, null );
    gl.bindTexture(gl.TEXTURE_2D, null );
    gl.bindRenderbuffer(gl.RENDERBUFFER, null);
    
    return frameBuffer;    
    
}
 
   
function  initAttributeVariable(gl, a_attribute, buffer, bufferNum, bufferType )
{
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer );
    gl.vertexAttribPointer(a_attribute, bufferNum, bufferType, false, 0, 0 );
    gl.enableVertexAttribArray(a_attribute);
}

function drawTriangle(gl,positionHandle, colorHandle,MvpMatrixHandle, theObject, angle,  viewProjMatrix)
{
    g_modelMatrix.setRotate(angle, 0, 1, 0 );

    initAttributeVariable(gl, positionHandle, theObject.vertexBuffer, theObject.vertexBuffer.num, theObject.vertexBuffer.type );
    initAttributeVariable(gl, colorHandle, theObject.colorBuffer, theObject.colorBuffer.num, theObject.colorBuffer.type );
    g_mvpMatrix.set(viewProjMatrix);
    g_mvpMatrix.multiply(g_modelMatrix);
    gl.uniformMatrix4fv(MvpMatrixHandle, false, g_mvpMatrix.elements );
    //绘制
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, theObject.indexBuffer );
    gl.drawElements(gl.TRIANGLES, theObject.numIndices, theObject.indexBuffer.type, 0 );    
    
}
function drawTriangleFBO(gl,positionHandle,MvpMatrixHandle, theObject, angle, viewProjMatrix)
{
    g_modelMatrix.setRotate(angle, 0, 1, 0 );
    initAttributeVariable(gl, positionHandle, theObject.vertexBuffer, theObject.vertexBuffer.num, theObject.vertexBuffer.type );
    g_mvpMatrix.set(viewProjMatrix);
    g_mvpMatrix.multiply(g_modelMatrix);
    gl.uniformMatrix4fv(MvpMatrixHandle, false, g_mvpMatrix.elements );
    //绘制
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, theObject.indexBuffer );
    gl.drawElements(gl.TRIANGLES, theObject.numIndices, theObject.indexBuffer.type, 0 );    
    
    
}
function drawPlane(gl,positionHandle, colorHandle,MvpMatrixHandle, theObject, viewProjMatrix)
{        
    g_modelMatrix.setRotate(-45.0, 0, 1, 1 );
    
    initAttributeVariable(gl, positionHandle, theObject.vertexBuffer, theObject.vertexBuffer.num, theObject.vertexBuffer.type );
    initAttributeVariable(gl, colorHandle, theObject.colorBuffer, theObject.colorBuffer.num, theObject.colorBuffer.type );
    g_mvpMatrix.set(viewProjMatrix);
    g_mvpMatrix.multiply(g_modelMatrix);
    gl.uniformMatrix4fv(MvpMatrixHandle, false, g_mvpMatrix.elements );

    //绘制
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, theObject.indexBuffer );
    gl.drawElements(gl.TRIANGLES, theObject.numIndices, theObject.indexBuffer.type, 0 );    
}    

function drawPlaneFBO(gl, positionHandle,MvpMatrixHandle, theObject, viewProjMatrix)
{        
    g_modelMatrix.setRotate(-45.0, 0, 1, 1 );
    
    initAttributeVariable(gl, positionHandle, theObject.vertexBuffer, theObject.vertexBuffer.num, theObject.vertexBuffer.type );
    g_mvpMatrix.set(viewProjMatrix);
    g_mvpMatrix.multiply(g_modelMatrix);
    gl.uniformMatrix4fv(MvpMatrixHandle, false, g_mvpMatrix.elements );
    //绘制
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, theObject.indexBuffer );
    gl.drawElements(gl.TRIANGLES, theObject.numIndices, theObject.indexBuffer.type, 0 );    
    
}

    var canvas = document.getElementById("test");
    //创建webgl渲染上下文
    var gl = canvas.getContext("webgl");
    //初始化生成阴影贴图的着色器
    
    var vertexShader_shadowMap = createShader(gl,gl.VERTEX_SHADER,SHADOW_VSHADER_SOURCE);
    var fragmentShader_shadowMap = createShader(gl,gl.FRAGMENT_SHADER, SHADOW_FSHADER_SOURCE);
    var program_shadowMap = createProgram(gl, vertexShader_shadowMap, fragmentShader_shadowMap);
    var positionHandle_shadowMap = gl.getAttribLocation(program_shadowMap, 'a_Position');
    var MvpMatrixHandle_shadowMap = gl.getUniformLocation(program_shadowMap, 'u_MvpMatrix');
    if(positionHandle_shadowMap < 0 || !MvpMatrixHandle_shadowMap )
    {
        console.log('Failed to get program_shadowMap variable');
    }

    var vertexShader_Normal = createShader(gl,gl.VERTEX_SHADER,vertexShaderSource);
    var fragmentShader_Normal = createShader(gl,gl.FRAGMENT_SHADER, fragmentShaderSource);
    var program_Normal = createProgram(gl, vertexShader_Normal, fragmentShader_Normal);
    var positionHandle_Normal = gl.getAttribLocation(program_Normal, 'a_Position');
    var colorHandle_Normal = gl.getAttribLocation(program_Normal, 'a_Color');
    var MvpMatrixHandle_Normal = gl.getUniformLocation(program_Normal, 'u_MvpMatrix');
    var MvpMatrixFromLightHandle_Normal = gl.getUniformLocation(program_Normal, 'u_MvpMatrixFromLight');
    var shadowMapHandle_Normal = gl.getUniformLocation(program_Normal, 'u_ShadowMap');
    if( positionHandle_Normal < 0 || colorHandle_Normal < 0 || !MvpMatrixHandle_Normal || !MvpMatrixFromLightHandle_Normal || !shadowMapHandle_Normal )
    {
        console.log('Failed to get program_Normal variable');
    }

    //创建顶点数组
    var triangle = initVertexBuffersForTriangle(gl);    
    var plane = initVertexBuffersForPlane(gl);
    
    if(!triangle || !plane )
    {
        console.log('Failed to set the Vertex information');
    }
            
    //创建帧缓存对象
    var fbo = initFrameBufferObject(gl);
    if(!fbo)
    {
        console.log('Failed to initialize FBO');
    }
    
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, fbo.texture);
 
    //模型矩阵
    //var g_modelMatrix = new Matrix4();
    //模型视图投影矩阵
    //var g_mvpMatrix = new Matrix4();
    var rotateDeg = 1.0;
    
    gl.clearColor( 0.0, 0.0, 0.0, 1.0 );
    //开启隐藏面消除功能
    gl.enable(gl.DEPTH_TEST);
    
    var viewProjMatrixFromLight = new Matrix4();
    viewProjMatrixFromLight.setPerspective(70.0, OFFSCREEN_WIDTH / OFFSCREEN_HEIGHT,1.0, 100.0);
    viewProjMatrixFromLight.lookAt(LIGHT_X,LIGHT_Y,LIGHT_Z,0,0,0,0,1,0);  
    
    var viewProjMatrix = new Matrix4();
    viewProjMatrix.setPerspective(45, canvas.width / canvas.height,1.0, 100.0);
    viewProjMatrix.lookAt(10,20,30,9.0,0,0,0,1,0);  
    
    var mvpMatrixFromLight_triangle = new Matrix4();
    var mvpMatrixFromLight_plane = new Matrix4();
    var mytick = function()
    {
        
        //绑定帧缓冲区对象
        gl.bindFramebuffer(gl.FRAMEBUFFER, fbo );
        //定义离线绘图的绘图区域
        gl.viewport(0, 0, OFFSCREEN_WIDTH, OFFSCREEN_HEIGHT );    
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
        gl.useProgram(program_shadowMap);
        
        //绘制三角形
        drawTriangleFBO(gl, positionHandle_shadowMap, MvpMatrixHandle_shadowMap,triangle, rotateDeg,viewProjMatrixFromLight);      
        mvpMatrixFromLight_triangle.set(g_mvpMatrix);        
        drawPlaneFBO(gl, positionHandle_shadowMap, MvpMatrixHandle_shadowMap,plane, viewProjMatrixFromLight);
        mvpMatrixFromLight_plane.set(g_mvpMatrix);        
    
        //解绑fbo
        gl.bindFramebuffer(gl.FRAMEBUFFER, null );
        
        //正常绘制
        gl.viewport(0, 0, canvas.width, canvas.height );    
        gl.clearColor( 0.0, 0.0, 0.0, 1.0 );
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
        gl.useProgram(program_Normal);    
        gl.uniform1i(shadowMapHandle_Normal, 0 );
        gl.uniformMatrix4fv(MvpMatrixFromLightHandle_Normal, false, mvpMatrixFromLight_triangle.elements );
        drawTriangle(gl, positionHandle_Normal, colorHandle_Normal, MvpMatrixHandle_Normal,triangle, rotateDeg, viewProjMatrix);    
        gl.uniformMatrix4fv(MvpMatrixFromLightHandle_Normal, false, mvpMatrixFromLight_plane.elements );
        drawPlane(gl, positionHandle_Normal, colorHandle_Normal, MvpMatrixHandle_Normal, plane, viewProjMatrix);
    
        rotateDeg += 1
        requestAnimationFrame(mytick);
    }
    mytick();
    
    </script>
</body>
</html>

图示如下：

提到了马赫带，果然去掉那个微调值出现了条纹

directx3d_beginner
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
cesium 设置时间_Cesium学习系列工具篇38可视域分析基于shadowmap
weixin_31885729的博客
01-02 1726
最近一年几乎天天加班，没什么时间研究ceisum，趁着今天休息忙里偷闲了解下如何实现cesium的可视域分析功能。可视域分析是三维空间分析中最重要的一个功能，一直想抽空研究下。之前用cesium实现了基于dem的可视域分析，但是可视化效果不好。现在初步实现了真正基于shadowmap的可视域，先上效果图：不得不感叹，cesium团队的强大，只要基于源码稍微修改即可实现想要效果。基于Ces...
86.（cesium篇）cesium叠加面接收阴影效果（gltf模型）.rar
06-24
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“86.（cesium篇）cesium叠加面接收阴影效果（gltf模型）”。如下载有问题，可联系博主。 解压密码：cesium
Cesium阴影技术
07-02 2013
【以前的文章存档】Cesium的阴影技术用的是Cascaded Shadow Mapping(简称CSM)，先来说下两种阴影类型，一种是另一种是。
WEBGL学习【十四】利用HUD技术在网页上方显示三维物体
weixin_34075268的博客
01-11 130
版权声明：本文为博主原创文章，未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/79035579 关...
Cesium深入浅出之阴影贴图
Helsing的专栏
10-27 6112
引子 又偷懒了，说好的周更的，又拖了一个月咯。前面两篇写了可视域分析和视频投影，无一例外的都用到了ShadowMap也就是阴影贴图，因此觉得又必要单独写一篇阴影贴图的文章。当然了，还有另外一个原因，文章中视频投影是利用Cesium自带的Entity方式实现的，毫无技术性可言，在文章结尾我说了可以使用ShadowMap方式来做，原理类似于可视域分析，那么今天我就把实现方式给大家说一下。 预期效果 照例先看一下预期的效果，既然说了阴影贴图，当然不能满足于只贴视频纹理了，这里我放了三张图，代表着我用了三种纹
【cesium】可视域分析
weixin_39823367的博客
03-24 4426
// 创建相机 createLightCamera () { this.lightCamera = new Cesium.Camera(this.viewer.scene); this.lightCamera.position = this.viewPosition; // if (this.viewPositionEnd) { // let direction = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(this.viewPos
shadow map范例
07-07
在提供的"ShadowMap"压缩包中，可能包含有Unity项目文件，用于展示如何创建和配置Shadow Map，以及相关的脚本示例。你可以通过导入这些文件到Unity编辑器中，实际操作并观察效果，加深理解。 通过查阅链接的博客...
D3D11_ShadowMap1
11-02
《D3D11_ShadowMap1：深度阴影贴图技术在Direct3D11中的应用》 在3D图形编程领域，为了实现更逼真的光照效果，阴影的模拟是必不可少的一部分。本项目“D3D11_ShadowMap1”专注于在Direct3D11环境下，利用深度阴影...
shadow map PCF
12-14
"Shadow Map" 技术是一种常用的实时光照计算方法，它通过将光源视角下的场景深度信息编码到一张纹理中，然后在接收光照的物体上进行采样，判断物体是否处于阴影中。而"Percentage-Closer Filtering (PCF)"则是一种...
简单ShadowMap2.rar
11-17
unity shader实现自定义shadowmap,shadowmask原理学习用
ShadowMap 动态阴影
06-07
Shadow Map，也称为深度贴图，是一种计算和投射阴影的技术，它广泛应用于游戏开发和实时渲染领域。本篇文章将深入探讨Shadow Map的概念、工作原理以及如何在Unity引擎中实现动态阴影。 一、Shadow Map简介 Shadow ...
24.cesuim分析之可视域分析
最新发布
yaojindou0的博客
10-13 797
cesuim分析之可视域分析。
Cesium 实现可视域分析
qq_24155097的博客
08-24 1660
glsl2.js 文件我找了两个， 我测试都是可以实现的，只是效果问题，可以切换了尝试一下。此示例基于vue3上实现，
Cesium中通过射线计算日照
yue1241630499的博客
08-09 1342
前段时间接触到一个需求，需要实时的计算建筑的日照，通常优先通过shadow map来实现。通过shadow map可以直接获取某一时刻的光照信息，累积不同太阳光位置的shadow map即可得到物体表面的光照时长。不过本人技术有限，还没能力手撕shadow map，之前看了光线追踪的内容，考虑到也可以通过射线求交的方法来计算物体表面是否直达光源，来累积光照时长。
Cesium可视域分析
xt3d的博客
11-04 2981
Cesium可视域分析实现效果关键代码 实现效果 关键代码 createPostStage() { const fs = glsl const postStage = new Cesium.PostProcessStage({ fragmentShader: fs, uniforms: { shadowMap_textureCube: () => {
Cesium光照效果添加，且添加倾斜摄影后实现日照阴影效果
weixin_43312391的博客
04-12 7028
实现效果： 实现光照效果的代码： 全局定义inter，便于后续的使用。 let inter = null 此时的光照效果为当前时间的光照效果。 viewer.scene.globe.enableLighting = true viewer.shadows = true viewer.terrainShadows = Cesium.ShadowMode.RECEIVE_ONLY //viewer.shadowMap.softShadows = true vi..
Cesium 高性能扩展之 DrawCommand（四）：阴影和实例化
三维网格
02-23 3045
DrawCommand 是 Cesium 渲染器的核心类，常用的接口 Entity、Primitive、Cesium3DTileSet，以及地形和影像的渲染等等，底层都是一个个 DrawCommand 完成的。在进行扩展开发、视觉特效提升、性能优化、渲染到纹理（RTT），甚至基于 Cesium 封装自己的开发框架，定义独家数据格式等等，都需要开发人员对 DrawCommand 熟练掌握。而这部分接口，Cesium 官方文档没有公开，网上的相关资料也比较少，学习起来比较困难，所以接下来我们用几期文章，由浅入深
Cesium 核心类Viewer-查看器详解
GISer小辉
12-14 5014
Viewer是一个用于构建应用程序的基本小部件。它将所有标准Cesium小部件组合到一个可重用的程序包中。
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、付费专栏及课程。

余额充值