webGL
关注
分享
扫一扫
Jedi Hongbin
hongbin.xyz meta.hongbin.xyz kmyc.hongbin.xyz
展开
-
glsl基于LTC的面光源渲染 - 圆盘光
【代码】glsl基于LTC的面光源渲染 - 圆盘光。原创 2024-11-05 18:17:00 · 125 阅读 · 0 评论 -
glsl基于LTC的面光源渲染 - 矩形光通过three.js
【代码】glsl基于LTC的面光源渲染 - 矩形光通过three.js。原创 2024-11-04 19:26:43 · 196 阅读 · 0 评论 -
three.js使用ShaderMaterial实现聚光灯光源demo
three.js使用ShaderMaterial实现聚光灯光源demo。原创 2024-10-29 18:09:16 · 252 阅读 · 0 评论 -
判断点与平面的前后关系-three.js
通过点积判断 物体到相机向量和法线向量 > 0 背面， < 0 正面。原创 2024-10-21 09:45:18 · 104 阅读 · 0 评论 -
WebGL读取画布任意像素颜色WebGLRenderingContext.readPixels
该方法是读取当前当前缓冲区(framebuffer)的不过three提供的方法可以传入指定的RednerTarget。three实现的思路是通过 先绑定传入的renderTarget 在最后再绑定回来。以下为threejs实现代码。原创 2024-10-17 18:02:06 · 382 阅读 · 0 评论 -
THREE.JS Blinn–Phong反射模型 高光shader
在threee.js中实现Blinn–Phong反射模型高光shader部分原创 2024-10-02 18:15:55 · 452 阅读 · 0 评论 -
GLSL 棋盘shader
【代码】GLSL 棋盘shader。原创 2024-09-14 21:35:38 · 152 阅读 · 0 评论 -
THREE.JS网格边缘像素化后处理
不加处理如下⬇️<!-- * @Author: hongbin * @Date: 2024-09-04 11:06:55 * @LastEditors: hongbin * @LastEditTime: 2024-09-04 13:24:24 * @Description: --><!DOCTYPE html><html lang="en"> <head> <title>Grid Effect</原创 2024-09-04 13:45:56 · 1078 阅读 · 0 评论 -
THREE.JS像素风格渲染
【代码】THREE.JS像素风格渲染。原创 2024-09-04 13:37:43 · 357 阅读 · 0 评论 -
three.js 动漫风格 卡通渲染 边缘采样 边缘光
计算光线和法线的余弦值原创 2024-08-09 22:01:49 · 906 阅读 · 0 评论 -
Three.js柏林噪音 流动球体
代码：https://gitee.com/honbingitee/three-template-next.js/tree/shader/参考油管视频：https://www.youtube.com/watch?原创 2023-10-17 14:23:35 · 343 阅读 · 0 评论 -
Three.js-矩形块shader
多种配置 绘制炫酷的矩形块原创 2023-09-12 11:26:48 · 242 阅读 · 0 评论 -
three.js 粒子水波纹效果
【代码】three.js 粒子水波纹效果。原创 2022-12-17 18:00:04 · 929 阅读 · 0 评论 -
Three.js粒子系统多模型切换动画
为了让shader计算每个点在某一时刻应该在什么位置需要提供几个属性参与计算：变换前的位置，变换后应该的位置，变换的时长，当前的时间，如果需要颜色渐变可以额外提供之前和之后的颜色，这些数据通过。每次切换模型数据 将原先的属性替换为新的模型数据 然后告诉shader需要更新这一属性，这样shader才会接受到新的有效的数据。传递给shader,在自定义shader中设置对应属性接收、计算。shader中的计算和控制粒子变换的代码请看下面代码区域。Three.js粒子变换特效。关于单个模型用粒子组成可参考。原创 2022-12-16 21:11:12 · 1730 阅读 · 0 评论 -
使用粒子效果动画组成模型[自定义shader实现]
使用自定义shader来进行大量粒子的动画，避免页面卡顿原创 2022-12-14 16:12:50 · 908 阅读 · 2 评论 -
three.js太阳火焰shader
threejs 代码。原创 2022-11-17 11:47:30 · 697 阅读 · 0 评论 -
粒子效果应用自定义着色器更灵活实现PointsMaterial材质
【代码】粒子效果应用自定义着色器更灵活实现PointsMaterial材质。原创 2022-11-10 00:20:10 · 319 阅读 · 0 评论 -
分析three.js OutlinePass 实现模式
浅析 OutlinePass的工作原理原创 2022-10-18 16:53:58 · 1437 阅读 · 0 评论 -
webgl着色器学习 - 凹凸纹理 根据纹理颜色 决定高度
原理 悬赏令的字图颜色大致相同 将满足这种颜色的像素z轴位置移动 形成凸起部分 产生立体效果。如图 将一张娜美的悬赏令上的文字凸显出来。原创 2022-10-10 16:42:31 · 212 阅读 · 0 评论 -
webgl着色器学习 - 使用纹理
【代码】webgl着色器学习 - 使用纹理。原创 2022-10-10 10:43:44 · 189 阅读 · 0 评论 -
webgl着色器学习 -出乎意外的形状
在向一个目标前进时莫名其妙出现了其他有意思的形状记录于此。原创 2022-10-05 10:47:02 · 184 阅读 · 0 评论 -
webgl着色器学习 - 使用矩阵旋转图形
【代码】webgl着色器学习 - 使用矩阵旋转图形。原创 2022-10-04 21:01:36 · 147 阅读 · 0 评论 -
webgl着色器学习 - 多个镂空矩形
使用 fract函数获取小数部分 使0-1的uv有多次0-1 来实现多个矩形。确定矩形中心 大小 边框 范围。原创 2022-10-04 10:54:58 · 273 阅读 · 0 评论 -
webgl着色器学习 - 随机数
【代码】webgl着色器学习 - 随机数。原创 2022-10-04 10:38:04 · 314 阅读 · 0 评论 -
webgl着色器学习 - 绘制多个不同颜色圆形并且不断变换颜色位置
在three.js中每帧更新时间参数。uniform传递 fargmentShader 应用数据原创 2022-10-02 16:01:42 · 353 阅读 · 0 评论 -
webgl着色器学习 - 绘制圆形
使用length函数求两点的距离 如果这个距离小于你定义的圆形半径就绘制一个颜色 (可以可用勾股定理求两点直线距离)step函数两个参数 如果后面的比前面的小则返回0.0 否则返回1.0 一次来作为条件判断。如图 在矩形的每个面上绘制一个圆。片元着色器 可以这样写。原创 2022-10-02 09:42:26 · 479 阅读 · 0 评论 -
webgl着色器学习 - webpack 打包glsl文件
使用 webpack将文件转换成字符串 传递到 ShaderMaterial中。写着色器没有语法提示 在.glsl文件中可获得语法支持。原创 2022-10-01 20:03:07 · 1077 阅读 · 5 评论 -
webgl着色器学习 - 颜色渐变着色器
使用 requestAnimationFrame 更改 uniform 改变着色器颜色原创 2022-10-01 09:35:08 · 614 阅读 · 0 评论 -
webgl着色器学习 -顶点着色器修改物体形状
一个矩形盒子通过修改顶点着色器可以产生如上图的不同形状。原创 2022-10-01 09:07:26 · 236 阅读 · 0 评论 -
webgl着色器学习 - 矩形盒子两端渐变(矩形不同面特殊处理)
以正负几何体高度的一半为条件 修改传递到片元着色器中的变量 产生不同于一致渲染的颜色着色。普通着色器每一个面都相同导致两端颜色不能顺利延伸 如同。要两边颜色铺满 要对两端的点单独处理。原创 2022-09-30 12:03:56 · 290 阅读 · 0 评论 -
webgl着色器学习 - 渐变颜色(varying 在顶点着色器和片元着色器之间传递信息)
【代码】webgl着色器学习 - 渐变颜色(varying 在顶点着色器和片元着色器之间传递信息)原创 2022-09-29 23:30:00 · 319 阅读 · 0 评论 -
webgl着色器学习-fragmentShader使用three.js传入变量 (uniform使用)
uniforms与片元着色器交互 以u_开头 值必须具有value属性的一个对象。在fragmentShader中使用。使用uniform传递。原创 2022-09-29 16:55:21 · 112 阅读 · 0 评论 -
webgl着色器初学习-顶点着色器和片元着色器
我理解为这两个着色器，顶点着色器决定渲染位置 ，片元着色器决定颜色。供three使用 我们对其的修改就会作用在模型上。编写一个简单的着色器 暂不指定片元着色器 发现。不过最大值为1 1即是十六进制的255。每一个像素点都将执行这两个着色器。函数 如果不写main就会报错。函数内容为空 同样不会显示模型。顶点着色器需要一个内置变量。片元着色器需要 内置变量。四个参数对应rgba。原创 2022-09-29 13:23:01 · 679 阅读 · 0 评论