JediHongbin的博客_webGL

GLSL 棋盘shader

【代码】GLSL 棋盘shader。

前端

three.js

glsl

shader

原创 1月前 12 阅读

Three.js粒子系统多模型切换动画

为了让shader计算每个点在某一时刻应该在什么位置需要提供几个属性参与计算：变换前的位置，变换后应该的位置，变换的时长，当前的时

javascript

webgl

three.js

数据

顶点着色器

原创 2023-04-04 21:11:45 236 阅读

webgl着色器学习 - 矩形盒子两端渐变(矩形不同面特殊处理)

普通着色器每一个面都相同导致两端颜色不能顺利延伸如同要两边颜色铺满要对两端的点单独处理思路两端端点用y轴约束以正负几何体高度的一半为条件修改传递到片元着色器中的变量产生不同于一致渲染的颜色着色/** * @description: 指定两个渐变色的两边使用渐变色盒子模型 * @param {string} color1 rgb格式颜色 * @param {string} color2

学习

javascript

前端

ide

渐变色

原创 2023-03-09 09:25:29 44 阅读

webgl着色器学习-fragmentShader使用three.js传入变量 (uniform使用)

uniforms与片元着色器交互以u_开头值必须具有value属性的一个对象。在fragmentShader中使用。使用uniform传递。

javascript

webgl

着色器

原创 2023-02-14 09:23:25 28 阅读

three.js太阳火焰shader

threejs 代码。

webgl

three.js

#define

着色器

原创 2023-02-14 09:15:37 176 阅读

分析three.js OutlinePass 实现模式

浅析 OutlinePass的工作原理

webgl

着色器

three.js

边缘检测

官网

原创 2023-02-14 09:13:56 278 阅读

webgl着色器学习 - 使用纹理

【代码】webgl着色器学习 - 使用纹理。

webgl

着色器

学习

顶点着色器

原创 2023-02-14 09:13:30 48 阅读

webgl着色器学习 - 凹凸纹理根据纹理颜色决定高度

悬赏令上的文字凸显出来。

webgl

着色器

学习

ide

原创 2023-02-14 09:13:24 40 阅读

webgl着色器学习 - 使用矩阵旋转图形

【代码】webgl着色器学习 - 使用矩阵旋转图形。

webgl

着色器

学习

ci

sed

原创 2023-02-14 09:13:08 42 阅读

webgl着色器学习 -出乎意外的形状

在向一个目标前进时莫名其妙出现了其他有意思的形状记录于此。

webgl

着色器

学习

sed

ci

原创 2023-02-14 09:13:07 66 阅读

webgl着色器学习 - 多个镂空矩形

使用 fract函数获取小数部分使0-1的uv有多次0-1 来实现多个矩形。确定矩形中心大小边框范围。

webgl

着色器

学习

sed

Time

原创 2023-02-14 09:12:30 107 阅读

webgl着色器学习 - 随机数

【代码】webgl着色器学习 - 随机数。

webgl

着色器

学习

原创 2023-02-14 09:12:28 75 阅读

webgl着色器学习 - 绘制多个不同颜色圆形并且不断变换颜色位置

在three.js中每帧更新时间参数。uniform传递 fargmentShader 应用数据

webgl

着色器

学习

ci

顶点着色器

原创 2023-02-14 09:12:14 99 阅读

webgl着色器学习 - 绘制圆形

文章目录矩形每个面都绘制圆形一个面绘制圆形矩形每个面都绘制圆形如图在矩形的每个面上绘制一个圆length(vPosition.zy) 使用length函数求两点的距离如果这个距离小于你定义的圆形半径就绘制一个颜色 (可以可用勾股定理求两点直线距离)// 自定义lengt函数用勾股定义获取两点之间距离float length(vec2 l) { return s

webgl

着色器

学习

ci

条件判断

原创 2023-02-14 09:12:09 80 阅读

webgl着色器学习 - 颜色渐变着色器

使用 requestAnimationFrame 更改 uniform 改变着色器颜色

着色器

学习

javascript

Math

sed

原创 2023-02-14 09:11:47 92 阅读

webgl着色器学习 - webpack 打包glsl文件

使用 webpack将文件转换成字符串传递到 ShaderMaterial中。写着色器没有语法提示在.glsl文件中可获得语法支持。

webpack

webgl

着色器

ci

字符串

原创 2023-02-14 09:11:25 244 阅读

webgl着色器学习 -顶点着色器修改物体形状

一个矩形盒子通过修改顶点着色器可以产生如上图的不同形状。

webgl

着色器

学习

Data

顶点着色器

原创 2023-02-14 09:11:17 72 阅读

webgl着色器学习 - 渐变颜色(varying 在顶点着色器和片元着色器之间传递信息)

【代码】webgl着色器学习 - 渐变颜色(varying 在顶点着色器和片元着色器之间传递信息)

webgl

着色器

学习

ide

颜色值

原创 2023-02-14 09:11:15 172 阅读

粒子效果应用自定义着色器更灵活实现PointsMaterial材质

【代码】粒子效果应用自定义着色器更灵活实现PointsMaterial材质。

着色器

材质

前端

自定义

缩放

原创 2023-02-13 20:14:53 62 阅读

使用粒子效果动画组成模型[自定义shader实现]

使用自定义shader来进行大量粒子的动画，避免页面卡顿

着色器

前端

webgl

three.js

顶点着色器

原创 2023-02-13 20:14:03 71 阅读

three.js 粒子水波纹效果

【代码】three.js 粒子水波纹效果。

webgl

缩放

运行时间

着色器

原创 2023-02-13 20:14:00 527 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

mb63e9d7d5826b2的博客

GLSL 棋盘shader

Three.js粒子系统多模型切换动画

webgl着色器学习 - 矩形盒子两端渐变(矩形不同面特殊处理)

webgl着色器学习-fragmentShader使用three.js传入变量 (uniform使用)

three.js太阳火焰shader

分析three.js OutlinePass 实现模式

webgl着色器学习 - 使用纹理

webgl着色器学习 - 凹凸纹理根据纹理颜色决定高度

webgl着色器学习 - 使用矩阵旋转图形

webgl着色器学习 -出乎意外的形状

webgl着色器学习 - 多个镂空矩形

webgl着色器学习 - 随机数

webgl着色器学习 - 绘制多个不同颜色圆形并且不断变换颜色位置

webgl着色器学习 - 绘制圆形

webgl着色器学习 - 颜色渐变着色器

webgl着色器学习 - webpack 打包glsl文件

webgl着色器学习 -顶点着色器修改物体形状

webgl着色器学习 - 渐变颜色(varying 在顶点着色器和片元着色器之间传递信息)

粒子效果应用自定义着色器更灵活实现PointsMaterial材质

使用粒子效果动画组成模型[自定义shader实现]

three.js 粒子水波纹效果