Shader实例02-动态水波纹
效果预览 通过滑动条可调节水纹波动频率的快慢。 原理 对当前uv坐标进行线性+三角函数等混合变换,结合动态变化的时间参数,得到一个新的采样坐标,产生图片折射扭曲效果,从而模拟动态水波纹特效。 u_rate参数可调节波动频率的快慢。 获取源码 项目代码:https://github.com/foupw… 阅读更多 »Shader实例02-动态水波纹
效果预览 通过滑动条可调节水纹波动频率的快慢。 原理 对当前uv坐标进行线性+三角函数等混合变换,结合动态变化的时间参数,得到一个新的采样坐标,产生图片折射扭曲效果,从而模拟动态水波纹特效。 u_rate参数可调节波动频率的快慢。 获取源码 项目代码:https://github.com/foupw… 阅读更多 »Shader实例02-动态水波纹
效果预览 展示的效果是从HSL转换为RGB,H(色调)的取值范围是 (0, 360),S(饱和度)的取值范围是 (-1, 1),L(亮度)的取值范围是 (-1, 1)。 定义 RGB和HSL(也叫HSB/HSV)是两种不同的色彩空间,RGB代表红(Red)、绿(Green)、蓝(Blue),HSL代… 阅读更多 »Shader实例01-HSL转RGB
项目代码:https://github.com/foupwang/JavaScript3DRenderer 开发环境:VSCode+Chrome浏览器 参考:《Windows游戏编程大师技巧》(第2版) /《3D游戏编程大师技巧》(André LaMothe) 前文介绍了画点函数,本文说明如何绘制直… 阅读更多 »JavaScript实现软件光栅化渲染器02-如何画直线
原文:https://www.cs.helsinki.fi/group/goa/mallinnus/lines/bresenh.html 基本Bresenham算法 考虑在光栅网格上绘制一条直线,这条直线的斜率是 0\leq m \leq 1。 斜率定义:假设直线起点是(x1, y1),终点是(x2… 阅读更多 »Bresenham快速画直线算法(中文翻译+注释)