- 博客(12)
- 收藏
- 关注
RSS订阅原创 webgl通过PCSS生成软阴影
PCSS（Percentage-Closer Soft Shadows）则通过模拟阴影边缘的模糊效果，生成更加逼真的软阴影，与PCF不同之处是：PCF（Percentage-Closer Filtering）通过对深度比较结果进行平均处理。PCSS是在PCF的基础上做进一步改进了阴影边缘的柔和度，使得阴影效果更加逼真。我们看到，尽管PCSS产生的阴影的效果更加真实，但是片元着色器中又增加找遮挡物的操作，这进一步增加了性能的开销，不过现在的GPU的性能都比较强，牺牲一点性能，增加真实感还是比较可行的。
2024-07-14 18:48:38
313
原创 webgl通过Shadow Mapping生成软阴影
PCF(Percentage Closer Filtering)通过对多个邻近点进行采样并平均结果来生成软阴影，这种方式是通过在着色点周围多次采用方式，通过对比比较是阴影贴图中的深度信息，判断周围的点是否在阴影中，然后把多次采样中的信息进行平均。采用的方式选择泊松采样，泊松采样的好处如下：泊松分布特性对于计算阴影的平滑过渡非常重要。均匀且随机的采样点分布能够有效减少阴影中的噪点，使阴影边缘更加平滑自然。实际光照中的阴影过渡是复杂且多变的，泊松采样的随机性和均匀性更接近真实的光照情况。
2024-07-07 16:31:31
355
原创 webgl通过Shadow Mapping生成阴影
/ 设置网格对象并添加到渲染队列中// 设置阴影网格对象并添加到渲染队列中}) {从上面的图片中，我们可以看到阴影边缘出现锯齿现象, 并且阴影也并不像现实生活中的阴影那样，边缘有点模糊的感觉，我们通过这种方式产生的阴影为硬阴影，现实生活中产生的阴影为软阴影，如下图所示软硬阴影的对比。图片来自于网络。
2024-06-30 22:49:53
239
原创 webgl实现法线贴图
切线空间是相对于三维模型表面上的每个顶点或像素定义的局部坐标系，它提供了一种将法线贴图数据转换到模型表面局部坐标系的方式，说白了就是改变了原来模型的法线方向，从而改变了，光照射时的反射方向。
2024-06-09 12:56:59
483
原创 前端解决返回的数据编码问题
发现查资料发现，上面的乱码字符是utf-8，在解析其他编码格式，无法正确的解码，就会使用替换字符进行填充。这样就想到了一个解决的办法，就是把从服务器上拿到的数据，先进行utf-8解码，然后，判断有替换字符，就说明使用的解码格式不正确，然后在换另一种解码格式。最近做项目需要调用后端的接口，返回的是服务器静态文本文件，而且这个文本文件是不同人的制作，放到服务器上的。这就导致了文件的编码格式不同。有的是utf-8，有的是gbk，按照一种格式去进行解码，会导致页面显示的内容乱码。
2024-06-09 12:56:30
295
原创 webgl实现Blinn-Phong光照模型
在计算机图形学中，光照模型是渲染3D场景时的重要组成部分。通过模拟光线与物体表面的交互，可以实现逼真的视觉效果。在本文中，我们将探讨如何使用WebGL实现基于Blinn-Phong光照模型的着色器，从而模拟光线与3D物体表面的反射效果。Blinn-Phong模型的公式：是最终的光照强度。是环境光的强度。是漫反射光的强度。 是镜面反射光的强度。
2024-06-01 18:12:28
247
原创 WebGL 反距离插值算法的 GPU 加速技术
数据插值是预测未知数据点的重要技术。反距离权重插值（IDW）是一种常用的方法，通过已知点对未知点进行加权平均。WebGL（Web Graphics Library）利用 GPU 加速，可以高效地处理和渲染大规模数据，成为数据插值和可视化的理想工具。
2024-05-25 15:35:32
398
原创 webgl中的模版测试（Stencil Test）
是一种模版测试（Stencil Test），它是一种基于模版缓冲区的技术，用于在绘制过程中进行更复杂的控制。模版测试允许你根据模版缓冲区中的值来决定是否允许绘制到屏幕上的特定像素。：模版测试可以用于确定镜头遮挡效果，例如在FPS游戏中，当玩家的角色处于遮挡物后面时，遮挡物会遮挡玩家的视野。：你可以使用模版测试来定义一个掩码，仅绘制到模版缓冲区特定区域内的像素。这对于实现各种形状的剪裁非常有用。：在阴影体积渲染中，你可以使用模版测试来确定哪些像素在阴影体积内，以便在渲染阴影时只考虑这些像素。
2024-05-13 20:27:14
328
1
原创 webgl投影视图矩阵
模型矩阵、视图矩阵和透视矩阵是三维图形渲染中的关键变换矩阵，它们分别描述了物体的模型变换、相机的视角和透视投影。通过合理地组合和使用这些矩阵，我们可以实现复杂的三维场景渲染，并呈现出逼真的视觉效果。深入理解这些矩阵的原理和应用，对于掌握三维图形渲染技术具有重要意义。代码中使用的threejs的矩阵生成方式。
2024-05-05 18:57:14
648
2
原创 webgl之Framebuffer
在WebGL中，Framebuffer（帧缓冲）是一个重要的概念，用于控制渲染目标的输出位置和属性。它允许你将渲染结果存储在一个可定制的缓冲区中，而不仅仅是直接渲染到屏幕上。这在实现一些高级渲染技术，如后期处理、阴影效果和多重渲染目标等方面非常有用。
2023-09-04 21:07:16
487
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人