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

相关推荐
小兔崽子去哪了3 天前
Three.js 曲线
three.js
Keepreal4964 天前
使用 Three.js 和 GSAP 动画库实现3D 名字抽奖
javascript·vue.js·three.js
Jedi Hongbin5 天前
Three.js NodeMaterial 节点材质系统文档
前端·javascript·three.js·nodematerial
入秋5 天前
Three.js后期处理实战:噪点 景深 以及色彩调整
前端·javascript·three.js
答案answer5 天前
你不知道的Three.js性能优化和使用小技巧
前端·性能优化·three.js
爱看书的小沐6 天前
【小沐学WebGIS】基于Three.JS绘制飞行轨迹Flight Tracker(Three.JS/ vue / react / WebGL)
javascript·vue·webgl·three.js·航班·航迹·飞行轨迹
小兔崽子去哪了9 天前
Three.js 学习记录
three.js
Demoncode_y9 天前
Vue3 + Three.js 实现 3D 汽车个性化定制及展示
前端·javascript·vue.js·3d·汽车·three.js
ObjectX前端实验室12 天前
【图形编辑器架构】节点树与渲染树的双向绑定原理
前端·计算机图形学·图形学
ObjectX前端实验室13 天前
【图形编辑器架构】渲染层篇 — 从 React 到 Canvas 的声明式渲染实现
前端·计算机图形学·图形学