wtc-gl+webgl实现三维阶梯式立方体旋转动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：wtc-gl+webgl实现三维阶梯式立方体旋转动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
<style>
body {
  background: pink;
  margin: 0;
  overflow: hidden;
}
canvas {
  
  width: 100vw;
  height: 100vh;
}
</style>



  
  
</head>

<body translate="no">
  <script type="text/fragment" id="vertShader">#version 300 es
  in vec3 position;
  in vec2 uv;
  in vec3 normal;
  in mat4 translation;
  in mat4 inverseTranspose;
  in float scale;
  
  uniform mat4 u_viewMatrix;
  uniform mat4 u_modelMatrix;
  uniform mat4 u_modelViewMatrix;
  uniform mat4 u_projectionMatrix;
  uniform mat3 u_normalMatrix;
  uniform float u_time;
  
  out vec3 vNormal;
  out vec3 vPosition;
  out vec3 vWorldPosition;
  out vec2 vUV;
  
  void main() {
    vec3 pos = (translation*vec4(scale*position, 1.)).xyz;
    // vec3 pos = mat3(translation)*(scale*position);
    
    vec4 camPos = u_projectionMatrix * u_modelViewMatrix * vec4(pos, 1.0);
    
    gl_Position = camPos;
    
    vUV = uv;
    vNormal = (inverseTranspose * vec4(normal,1)).xyz;
  }
</script>
<script type="text/fragment" id="fragShader">#version 300 es
  precision highp float;
  
  in vec3 vNormal;
  in vec2 vUV;
  in vec4 camPos;
  in vec3 vPosition;
  in vec3 vWorldPosition;
  
  out vec4 colour;
  
  uniform float u_time;
  
  // Simplex 2D noise
  //
  vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }

  float snoise(vec2 v){
    const vec4 C = vec4(0.211324865405187, 0.366025403784439,
             -0.577350269189626, 0.024390243902439);
    vec2 i  = floor(v + dot(v, C.yy) );
    vec2 x0 = v -   i + dot(i, C.xx);
    vec2 i1;
    i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
    vec4 x12 = x0.xyxy + C.xxzz;
    x12.xy -= i1;
    i = mod(i, 289.0);
    vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
    + i.x + vec3(0.0, i1.x, 1.0 ));
    vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy),
      dot(x12.zw,x12.zw)), 0.0);
    m = m*m ;
    m = m*m ;
    vec3 x = 2.0 * fract(p * C.www) - 1.0;
    vec3 h = abs(x) - 0.5;
    vec3 ox = floor(x + 0.5);
    vec3 a0 = x - ox;
    m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
    vec3 g;
    g.x  = a0.x  * x0.x  + h.x  * x0.y;
    g.yz = a0.yz * x12.xz + h.yz * x12.yw;
    return 130.0 * dot(m, g);
  }
  
  void main() {
    
    
    vec2 d = abs(vUV-.5)-.49;
    float f = length(max(d,0.0)) + min(max(d.x,d.y),0.0);
    
    // The following line is for debugging the geometry.
    colour = vec4(1,vUV,1).grba;
    colour = vec4(vNormal*.5+.5,1);
    // colour = mix(colour, vec4(0,0,0,1), smoothstep(0.,0.01,f));
  }
</script>
<script type="text/fragment" id="renderShader">#version 300 es
  precision highp float;

  uniform vec2 u_resolution;
  uniform vec2 u_screenresolution;
  uniform float u_time;
  uniform vec3 u_camera;

  uniform sampler2D b_render;
  uniform sampler2D b_depth;
  uniform sampler2D b_buffer;

  in vec2 v_uv;
  out vec4 colour;
  
  float dp(vec2 p) {
    float n = u_camera.x;
    float f = u_camera.y;
    float z = texture(b_depth, p / u_resolution).x;
    float g = (2.0 * n) / (f + n - z*(f-n));
    
    return g;
  }
  vec3 np(vec2 p) {
    return texture(b_render, p / u_resolution).xyz;
  }
  
  void main() {
    
    vec2 p = gl_FragCoord.xy;
    
    int k = 1;
    
    float grey = dp(p);
    float d = 0.;
    for(int x = -k; x <= k; x+=k) {
      for(int y = -k; y <= k; y+=k) {
        if(x==0&&y==0) continue;
        d += abs(grey - dp(p+vec2(x,y)));
      }
    }
    
    vec4 col = texture(b_render, gl_FragCoord.xy / u_resolution);
    float n = 0.;
    for(int x = -k; x <= k; x+=k) {
      for(int y = -k; y <= k; y+=k) {
        if(x==0&&y==0) continue;
        n += length(col.xyz - np(p+vec2(x,y)));
      }
    }
    
    float a = smoothstep(u_camera.z, 1., grey);
    
    // col = mix(texture(b_buffer, gl_FragCoord.xy / u_resolution), col, col.a);
    
    col = mix(col, vec4(1), pow(d+n, 2.));
    // colour = vec4(mix(col.rgb, vec3(.95), a),col.a*(1.-a));
    // colour = vec4(col.rgb, col.a*(1.-a));
    colour = col;
  }
</script>
<script type="text/fragment" id="fadeShader">#version 300 es
  precision highp float;

  uniform vec2 u_resolution;
  uniform vec2 u_screenresolution;
  uniform float u_time;
  uniform vec3 u_camera;

  uniform sampler2D b_render;
  uniform sampler2D b_buffer;

  in vec2 v_uv;
  out vec4 colour;
  
  vec2 getScreenSpace() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
    
    return uv;
  }
  
  void main() {
    
    vec2 p = gl_FragCoord.xy / u_resolution;
    
    vec4 col = texture(b_render, p);
    
    vec4 buf = texture(b_buffer, p);
    // col = mix(buf, col*.1, col.a);
    // col = buf*.9+col*.1;
    // col = mix(buf*vec4(1,1,1,.99), col, col.a);
    col = mix(buf, col, smoothstep(0., 0.001, p.x+.2-u_time*.01));
    
    colour = vec4(col);
  }
</script>
<script type="text/fragment" id="outputShader">#version 300 es
  precision highp float;

  uniform vec2 u_resolution;
  uniform vec2 u_screenresolution;
  uniform float u_time;
  uniform vec3 u_camera;

  uniform sampler2D b_render;

  in vec2 v_uv;
  out vec4 colour;
  
  
  void main() {
    
    vec2 p = gl_FragCoord.xy;
    
    vec4 col = texture(b_render, gl_FragCoord.xy / u_resolution);
    // col = mix(vec4(.95), col, col.a);
    col = mix(vec4(1), col, col.a);
    
    colour = col;
  }
</script>
  
      <script  type="module">
import {
Obj,
TransformFeedback,
Renderer,
Program,
Mesh,
Uniform,
PointCloud,
GeometryAttribute,
Camera,
Triangle,
Plane,
Box,
Texture,
Geometry,
DollyCamera,
Framebuffer } from
"https://cdn.skypack.dev/wtc-gl@1.0.0-beta.50";

import { Vec2, Vec3, Mat4 } from "https://cdn.skypack.dev/wtc-math@1.0.17";

console.clear();

const dpr = 2;
const d = new Vec2(window.innerWidth, window.innerHeight);
d.update = function () {
  uniform.........完整代码请登录后点击上方下载按钮下载查看