logo
publist
写文章

简介

该用户还未填写简介

擅长的技术栈

可提供的服务

暂无可提供的服务

webgl通过Shadow Mapping生成阴影

/ 设置网格对象并添加到渲染队列中// 设置阴影网格对象并添加到渲染队列中}) {从上面的图片中,我们可以看到阴影边缘出现锯齿现象, 并且阴影也并不像现实生活中的阴影那样,边缘有点模糊的感觉,我们通过这种方式产生的阴影为硬阴影,现实生活中产生的阴影为软阴影,如下图所示软硬阴影的对比。图片来自于网络。

文章图片
#webgl
webgl通过Shadow Mapping生成软阴影

PCF(Percentage Closer Filtering)通过对多个邻近点进行采样并平均结果来生成软阴影,这种方式是通过在着色点周围多次采用方式,通过对比比较是阴影贴图中的深度信息,判断周围的点是否在阴影中,然后把多次采样中的信息进行平均。采用的方式选择泊松采样,泊松采样的好处如下:泊松分布特性对于计算阴影的平滑过渡非常重要。均匀且随机的采样点分布能够有效减少阴影中的噪点,使阴影边缘更加平滑

文章图片
#webgl
webgl实现法线贴图

切线空间是相对于三维模型表面上的每个顶点或像素定义的局部坐标系,它提供了一种将法线贴图数据转换到模型表面局部坐标系的方式,说白了就是改变了原来模型的法线方向,从而改变了,光照射时的反射方向。

文章图片
#webgl#贴图#前端
webgl中的模版测试(Stencil Test)

是一种模版测试(Stencil Test),它是一种基于模版缓冲区的技术,用于在绘制过程中进行更复杂的控制。模版测试允许你根据模版缓冲区中的值来决定是否允许绘制到屏幕上的特定像素。:模版测试可以用于确定镜头遮挡效果,例如在FPS游戏中,当玩家的角色处于遮挡物后面时,遮挡物会遮挡玩家的视野。:你可以使用模版测试来定义一个掩码,仅绘制到模版缓冲区特定区域内的像素。这对于实现各种形状的剪裁非常有用。:在

文章图片
#webgl#前端#javascript
webgl投影视图矩阵

模型矩阵、视图矩阵和透视矩阵是三维图形渲染中的关键变换矩阵,它们分别描述了物体的模型变换、相机的视角和透视投影。通过合理地组合和使用这些矩阵,我们可以实现复杂的三维场景渲染,并呈现出逼真的视觉效果。深入理解这些矩阵的原理和应用,对于掌握三维图形渲染技术具有重要意义。代码中使用的threejs的矩阵生成方式。

文章图片
#webgl#矩阵#线性代数
webgl基础之纹理使用

【代码】webgl基础之纹理绑定。

文章图片
#webgl
webgl基础平移、旋转、缩放

【代码】webgl基础平移、旋转、缩放。

文章图片
#webgl
到底了