用Raymarching算法绘制无限世界:从零开始的GLSL着色器之旅

2025-06-19
用Raymarching算法绘制无限世界:从零开始的GLSL着色器之旅

本文介绍了使用Raymarching技术和GLSL着色器创建3D场景的方法。作者从基本概念如光线追踪、符号距离函数(SDF)出发,逐步讲解如何构建简单的形状,并通过SDF运算符(如min和smoothmin)组合形状,实现更复杂的场景。文章还涵盖了光照模型、软阴影、无限重复场景的创建以及使用噪声导数生成逼真的地形等高级技术。最终,作者展示了如何结合这些技术创建出令人惊叹的无限延伸的火星景观,并分享了其创作过程和心得体会。

阅读更多
开发

后处理与体积光照:用光线步进法在React Three Fiber中绘制逼真的光束

2025-06-14
后处理与体积光照:用光线步进法在React Three Fiber中绘制逼真的光束

本文深入探讨了如何在React Three Fiber中结合后处理和体积光线步进法实现逼真的体积光照效果。作者首先介绍了不同坐标系之间的转换,然后详细讲解了如何从屏幕空间重建三维光线,并利用深度缓冲区优化性能。文章还涵盖了光线形状设计、阴影映射以及光散射等高级技巧,最终实现具有阴影和雾效的动态体积光照效果。多个演示场景展示了该技术的应用,例如拱门和太空场景,并讨论了多光源和全方向阴影的实现方法。

阅读更多

用着色器创造迷人的后期处理效果

2025-02-09
用着色器创造迷人的后期处理效果

本文介绍了作者在2024年学习着色器技术并将其应用于后期处理的经验,通过借鉴其他艺术家的作品,例如@samdape和@hahajohnx等,实现了各种精细的像素图案、错视效果和互动式后期处理效果。文章详细讲解了像素化、使用SDF和阈值矩阵创建图案、以及实现LED面板、编织效果、乐高积木和磨砂玻璃效果的技术细节,并提供了相应的代码示例和演示。

阅读更多
设计

用Shader打造复古网页3D效果:抖动、色彩量化和像素化

2025-02-03
用Shader打造复古网页3D效果:抖动、色彩量化和像素化

作者花了几个月时间构建个人网站,并加入了3D元素来展示其着色器和WebGL技能。文章深入探讨了后期处理在提升3D场景视觉效果中的关键作用,特别是复古风格效果的实现,包括抖动、色彩量化和像素化等技术。文章讲解了不同类型的抖动技术(白噪声抖动、有序抖动和蓝噪声抖动),以及如何通过着色器实现这些效果。此外,文章还介绍了色彩量化技术,允许自定义调色板,并最终结合像素化和模拟CRT显示器的效果,创造出令人惊艳的复古风格3D网页效果。

阅读更多
开发

打造绘画风格着色器的技巧

2024-10-31
打造绘画风格着色器的技巧

本文详细介绍了如何使用Kuwahara滤镜创建类似水彩、水粉等绘画风格的WebGL着色器。作者首先介绍了Kuwahara滤镜的工作原理,它通过计算图像中每个像素周围区域的方差来保留边缘并平滑纹理细节,从而实现绘画效果。然后,作者探讨了Kuwahara滤镜的几种改进方法,包括Papari扩展的圆形内核和高斯/多项式加权,以及各向异性Kuwahara滤镜,该滤镜通过结构张量和特征值/特征向量分析图像的局部结构,从而根据边缘方向调整滤镜内核,实现更精细的绘画效果。最后,文章讨论了色彩校正、量化、饱和度调整和纹理叠加等后期处理技术,以增强最终的绘画效果。

阅读更多
未分类 WebGL Kuwahara滤镜