3D / WebGL / Shader

运用WebGL在网页中渲染3D场景，利用GPU硬件加速实现像素级别的流体、噪波、光效等高级视觉效果。无需插件，纯浏览器原生渲染。

等离子体着色器

基于正弦波叠加的等离子体效果，通过多层不同频率和相位的色彩叠加，创造流动的能量场视觉效果。GPU并行计算每个像素的颜色值。

// WebGL 片段着色器核心
const fragmentShader = `
  precision mediump float;
  uniform float u_time;
  uniform vec2 u_resolution;

  void main() {
    vec2 uv = gl_FragCoord.xy / u_resolution;
    float plasma = sin(uv.x * 10.0 + u_time) 
                 + sin(uv.y * 10.0 + u_time) 
                 + sin((uv.x + uv.y) * 10.0 + u_time);
    vec3 color = vec3(
      0.5 + 0.5 * sin(plasma + 0.0),
      0.5 + 0.5 * sin(plasma + 2.0),
      0.5 + 0.5 * sin(plasma + 4.0)
    );
    gl_FragColor = vec4(color, 1.0);
  }
`;

// 光线步进 (Ray Marching) 基础
float sdSphere(vec3 p, float r) { return length(p) - r; }
float map(vec3 p) { return sdSphere(p, 1.0); }
vec3 rayMarch(vec3 ro, vec3 rd) {
  for(int i=0; i<64; i++) {
    float d = map(ro);
    if(d < 0.001) return vec3(1.0);
    ro += rd * d;
  }
  return vec3(0.0);
}
      

← 返回索引