WebGL-Shader基础

使用shader绘制线、线段、曲线(WebGL-Shader开发基础01)-卡核

使用shader绘制线、线段、曲线(WebGL-Shader开发基础01)

使用shader绘制线、线段、曲线 0.序1. 绘制线1.1 绘制水平线1.1.1 根据判断条件着色绘制1.1.2 使用step函数绘制1.1.3 使用smoothstep函数绘制 1.2 绘制垂直线1.3绘制斜线1.3.1使用step函数绘制1...
点燃火柴的头像-卡核点燃火柴2年前
09094452
使用shader绘制矩形、矩形框、圆形、圆形框(WebGL-Shader开发基础02)-卡核

使用shader绘制矩形、矩形框、圆形、圆形框(WebGL-Shader开发基础02)

绘制矩形、矩形框、圆形、圆形框 1.绘制矩形1.1 使用if语句绘制1.2 使用step函数绘制1.3 使用step函数简化方法绘制1.4 使用abs对称思想绘制1.5 绘制矩形边框 2. 绘制圆2.1 绘制圆形2.2 绘制圆形...
点燃火柴的头像-卡核点燃火柴2年前
05638764
shader编程-二维空间中使用矩阵实现物体的旋转、缩放、平移变换(WebGL-Shader开发基础03)-卡核

shader编程-二维空间中使用矩阵实现物体的旋转、缩放、平移变换(WebGL-Shader开发基础03)

shader编程-二维空间中使用矩阵实现物体的旋转、缩放、平移变换 1. 变换前物体的绘制2. 物体旋转的实现3. 物体缩放的实现4. 物体平移的实现5. 平移与缩放另外一种实现方式6. 所有示例代码 1. 变...
点燃火柴的头像-卡核点燃火柴2年前
03879216
shader编程-通过交集、并集、差集实现形状的合并(WebGL-Shader开发基础04)-卡核

shader编程-通过交集、并集、差集实现形状的合并(WebGL-Shader开发基础04)

shader编程-通过交集、并集、差集实现形状的合并 1. 准备2. 交集实现3. 并集实现3. 差集实现4. 示例代码 1. 准备 先复习一下数学概念,交集、并集、差集如下图所示 我们准备拿圆做实验&#x...
点燃火柴的头像-卡核点燃火柴2年前
04680159
shader编程-2D基本图形SDF(有向距离场)介绍与使用(WebGL-Shader开发基础05)-卡核

shader编程-2D基本图形SDF(有向距离场)介绍与使用(WebGL-Shader开发基础05)

shader编程-2D基本图形SDF有向距离场介绍与使用 1. 有向距离场介绍2. SDF绘制圆3. SDF绘制矩形3.1 绘制矩形3.2 绘制带圆角矩形3.3 通过两端和宽度绘制矩形 4. SDF绘制线段5. SDF绘制菱形6. SDF...
点燃火柴的头像-卡核点燃火柴2年前
09070721
shader编程-着色器中颜色基础(WebGL-Shader开发基础06)-卡核

shader编程-着色器中颜色基础(WebGL-Shader开发基础06)

shader编程-着色器中颜色基础 1. 单色背景颜色2. 颜色根据屏幕坐标变化3. 物体形状颜色4. 借助A通道处理物体形状颜色5. 相关代码 1. 单色背景颜色 在之前的文章中我们用一个三维向量表示颜色 ve...
点燃火柴的头像-卡核点燃火柴2年前
03555260
shader编程-RayMarching与SDF结合开始三维探索(WebGL-Shader开发基础07)-卡核

shader编程-RayMarching与SDF结合开始三维探索(WebGL-Shader开发基础07)

RayMarching与SDF结合开始三维探索 1. 初识RayMarching2. 实现过程2.1 光线步进函数2.2 获取物体表面距离2.3 计算光照阴影2.4 物体表面距离计算 3 demo运行结果4 demo代码 1. 初识RayMarching ...
点燃火柴的头像-卡核点燃火柴2年前
07951620
shader编程-RayMarching与SDF搭建三维场景实现Blinn-Phong光照(WebGL-Shader开发基础08)-卡核

shader编程-RayMarching与SDF搭建三维场景实现Blinn-Phong光照(WebGL-Shader开发基础08)

RayMarching与SDF搭建三维场景实现Blinn-Phong光照 1. demo概述与效果2. Blinn-Phong光照模型介绍3. demo实现3.1 场景物体准备3.2 rayMarching调整3.3 Blinn-Phong光照计算 4. demo代码 1. demo...
点燃火柴的头像-卡核点燃火柴2年前
04977156
shader编程-RayMarching三维场景下模型基本变换旋转、缩放、平移(WebGL-Shader开发基础09)-卡核

shader编程-RayMarching三维场景下模型基本变换旋转、缩放、平移(WebGL-Shader开发基础09)

RayMarching三维场景下模型基本变换 1. demo概述2. 实现过程2.1 模型的旋转操作2.2 模型的缩放操作2.3 模型的平移操作 3. demo 代码 1. demo概述 在之前的一篇文章中讲述了,二维空间中物...
点燃火柴的头像-卡核点燃火柴2年前
09570385
shader编程-RayMarching三维场景下使用交集、并集、差集方法CSG建模(WebGL-Shader开发基础10)-卡核

shader编程-RayMarching三维场景下使用交集、并集、差集方法CSG建模(WebGL-Shader开发基础10)

三维场景下使用交集、并集、差集方法CSG建模 1. CSG介绍2. demo效果3. 实现过程3.1 交集、并集、差集函数3.2 旋转矩阵3.3 基础形状3.4 组合过程3.4.1 互相垂直圆柱实现3.4.2 相交的球体与立方体...
点燃火柴的头像-卡核点燃火柴2年前
0891470
shader编程-三维场景下SDF建模,平滑交集、平滑并集、平滑差集(WebGL-Shader开发基础11)-卡核

shader编程-三维场景下SDF建模,平滑交集、平滑并集、平滑差集(WebGL-Shader开发基础11)

三维场景下SDF建模,平滑交集、平滑并集、平滑差集 1. demo效果2. 实现要点2.1 平滑运算方法定义2.2 模型计算3. demo代码 1. demo效果 smooth-operate 如上所示,三个展示的模型分...
点燃火柴的头像-卡核点燃火柴2年前
07413903
shader编程-三维场景下SDF建模,对模型进行扭曲、弯曲、裁剪、掏空操作(WebGL-Shader开发基础12)-卡核

shader编程-三维场景下SDF建模,对模型进行扭曲、弯曲、裁剪、掏空操作(WebGL-Shader开发基础12)

对模型进行扭曲、弯曲、裁剪、掏空操作 1. demo效果2. 实现要点2.1 模型扭曲2.2 模型弯曲2.3 模型裁剪与掏空2.3.1 球体裁剪与掏空2.3.2 圆柱裁剪与掏空2.3.3 甜圈圈裁剪与掏空 3. demo代码 1. d...
点燃火柴的头像-卡核点燃火柴2年前
0371049