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

相关推荐
战场小包9 小时前
弟弟想看恐龙,用文心快码3.5S快速打造恐龙乐园,让弟弟看个够
前端·three.js·文心快码
入秋13 小时前
Three.js后期处理实战:镜头颜色、色差、点阵与颜色管道的深度解析
前端·three.js
Becauseofyou1371 天前
如果你刚入门Three.js,这几个开源项目值得你去学习
前端·three.js
明月看潮生3 天前
编程与数学 03-005 计算机图形学 08_二维图形填充
青少年编程·计算机图形学·编程与数学
Jedi Hongbin3 天前
Three.js shader内置矩阵注入
前端·javascript·three.js
接着奏乐接着舞。4 天前
3D地球可视化教程 - 第1篇:基础地球渲染系统
前端·javascript·vue.js·3d·three.js
刘皇叔code5 天前
记一次用Three.js展示360°全景图的折腾
webgl·three.js
世伟爱吗喽6 天前
threejs入门学习日记
前端·javascript·three.js
拜无忧8 天前
three.js纸飞机飞行撞建筑
前端·three.js
拜无忧8 天前
three/文字爆裂效果
three.js