Three.js 学习记录shader黑客帝国数字雨

Three.js 学习记录shader黑客帝国数字雨

想锻炼锻炼自己输出能力
实现效果

需要一定shader知识 使用glsl-canvas插件展示效果

分步骤实现

1、生成黑白渐变图

根据y轴高度生成渐变,y值越大越白

ini 复制代码
#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main(){
    vec2 uv=gl_FragCoord.xy/u_resolution.xy;
    float col = uv.y;
    gl_FragColor = vec4(vec3(col), 1.0);
}

2、使用倒数

ini 复制代码
float col = .1/uv.y;

可以通过控制分子分母比值大小调整样式 比如

ini 复制代码
float col = .01/uv.y;

3、让图形动起来

在y轴上加上时间进行偏移

ini 复制代码
uv.y += u_time/2.;

4、让光亮在x轴上变形

使用常用的三角函数sin

ini 复制代码
    uv.x *=5.;
    uv.y += sin(uv.x)+ u_time/2.;
    float col = .1/ fract(uv.y);

提示:可以思考为什么是uv.x *5 不是uv *5

5、取整函数使用

波浪的效果还不能满足要求 为了实现平整的柱状效果使用floor floor shader自带的向下取整函数

arduino 复制代码
  uv.y += sin(floor(uv.x))+ u_time/2.;

6、让每列下落的数组都不一致

对时间参数做修改,加入噪声与 x轴偏移量组成速度

arduino 复制代码
float random(float val){
   return fract(sin(val*12.9898)*43758.545323);
}
scss 复制代码
    uv.x *=5.;
    uv.x = floor(uv.x);
    float speed  = cos(uv.x)*.2 +random(uv.x+2.1)*0.2+ 0.35; 
    uv.y += sin(floor(uv.x))+ u_time*speed ;
    float col = .1/ fract(uv.y);

7、开始数字部分

添加数字纹理,让图片随时间进行偏移

ini 复制代码
    uv *=5.;
    uv=fract(uv);
    float offsetx=step(0.5,fract((u_time/2.)))/2.;
    float offsety=step(0.5,fract((u_time/3.)))/2.;
    vec4 color=texture2D(u_texture_0,vec2((uv.x+offsetx)/1.,uv.y+offsety));

8、两个效果相乘再加上颜色加代码优化

(偷懒一下,有啥问题可以评论区见)

ini 复制代码
#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform sampler2D u_texture_0;

#define scale.8// 页面缩放比例
#define column 50.0// 列数

float random(float val){
  return fract(sin(val*12.9898)*43758.545323);
}

void main(){
  vec2 uv=gl_FragCoord.xy/u_resolution.xy;
  vec2 st=uv;
  st.x=(st.x)*column;
  st.x=floor(st.x);
  st=st*scale;
  float offset=sin(st.x*column);
  float speed=cos(st.x*column)*.15+random(st.x+2.1)*.2+.35;
  float y=(fract((st.y+u_time/3.*speed+offset)));
  uv*=column/2.;
  uv=fract(uv);
  float offsetx=step(.5,fract((u_time/2.)))/2.;
  float offsety=step(.5,fract((u_time/3.)))/2.;
  vec4 color=texture2D(u_texture_0,vec2((uv.x+offsetx)/1.,uv.y+offsety));
  color.xyz=color.xyz/(y*60.);
  color=color*vec4(.1,1.,.35,1.);
  gl_FragColor=color;
}

添加到threeJs中 (好像效果不是很好)

文章写的不多 欢迎大家多提点建议 886886

相关推荐
魂断蓝桥66610 小时前
如何基于three.js(webgl)引擎架构,实现3D微信小游戏(第一课)
webgl·three.js·微信小游戏·three.js路径规划、三维a*算法、javascript三维导航,·three.js小游戏
Mintopia18 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia18 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Mintopia2 天前
三维空间的 “切蛋糕大师”:八叉树的底层奥秘与妙用
前端·javascript·计算机图形学
Mintopia2 天前
Three.js 加载模型文件:从二进制到像素的奇幻漂流
前端·javascript·three.js
良辰未晚2 天前
基于全屏 Quad 的 Three.js 后处理全解析
three.js
Mintopia3 天前
Three.js 材质与灯光:一场像素级的光影华尔兹
前端·javascript·three.js
Mintopia3 天前
B 样条曲线:计算机图形学里的 “曲线魔术师”
前端·javascript·计算机图形学
Mintopia3 天前
Three.js 3D 世界中的噪声运动:当数学与像素共舞
前端·javascript·three.js
阿怼丶13 天前
🔥Three.js轮廓线高亮神器来啦!自定义高亮选中效果只需一个类搞定!
前端·three.js