webgl（wtcgl.js）生成圆形编织动画

webgl circles shader

webgl, shader, shape

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2656
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

console.clear();

const twodWebGL = new WTCGL(
  document.querySelector('canvas#webgl'), 
  document.querySelector('script#vertexShader').textContent, 
  document.querySelector('script#fragmentShader').textContent,
  window.innerWidth, window.innerHeight, window.devicePixelRatio
);
// twodWebGL.startTime = -10000 + Math.random() * 5000;

window.addEventListener('resize', () => {
  twodWebGL.resize(window.innerWidth, window.innerHeight);
});
twodWebGL.resize(window.innerWidth, window.innerHeight);

// track mouse move
let mousepos = [0,0];
const u_mousepos = twodWebGL.addUniform('mouse', WTCGL.TYPE_V2, mousepos);
window.addEventListener('pointermove', (e) => {
  let ratio = window.innerHeight / window.innerWidth;
  if(window.innerHeight > window.innerWidth) {
    mousepos[0] = (e.pageX - window.innerWidth / 2) / window.innerWidth;
    mousepos[1] = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1 * ratio;
  } else {
    mousepos[0] = (e.pageX - window.innerWidth / 2) / window.innerWidth / ratio;
    mousepos[1] = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1;
  }
  twodWebGL.addUniform('mouse', WTCGL.TYPE_V2, mousepos);
});

// Load all our textures. We only initiate the instance once all images are loaded.
const textures = [
  {
    name: 'noise',
    url: '/uploads/1811/noise.png',
    type: WTCGL.IMAGETYPE_TILE,
    img: null
  }
];
const loadImage = function (imageObject) {
  let img = document.createElement('img');
  img.crossOrigin="anonymous";
  
  return new Promise((resolve, reject) => {
    img.addEventListener('load', (e) => {
      imageObject.img = img;
      resolve(imageObject);
    });
    img.addEventListener('error', (e) => {
      reject(e);
    });
    img.src = imageObject.url
  });
}
const loadTextures = function(textures) {
  return new Promise((resolve, reject) => {
    const loadTexture = (pointer) => {
      if(pointer >= textures.length || pointer > 10) {
        resolve(textures);
        return;
      };
      const imageObject = textures[pointer];

loadTextures(textures).then(
  (result) => {
    twodWebGL.initTextures();
    // twodWebGL.render();
    twodWebGL.running = true;
  },
  (error) => {
    console.log('error');
  }
);

编译

CSS

HTML

void main() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
    
    // movement
    movement = path(u_time);
    
    // Camera and look-at
    vec2 mouse = u_mouse * 3. + 5.;
    float mousex_s = sin(mouse.x);
    float mousex_c = cos(mouse.x);
    float mousey_s = sin(mouse.y);
    float mousey_c = cos(mouse.y);
    vec3 cam = cameraPosition;
    cam.xz *= mat2(mousex_c, -mousex_s, mousex_s, mousex_c);
    cam.xy *= mat2(mousey_c, -mousey_s, mousey_s, mousey_c);
    vec3 lookAt = vec3(0,0,0);
    
    // add movement
    lookAt += movement;
    cam += movement;
    
    // Unit vectors
    vec3 forward = normalize(lookAt - cam);
    vec3 right = normalize(vec3(forward.z, 0., -forward.x));
    vec3 up = normalize(cross(forward, right));
    
    // FOV
    float FOV = 3.4;
    
    // Ray origin and ray direction
    vec3 ro = cam;
    vec3 rd = normalize(forward + FOV * uv.x * right + FOV * uv.y * up);
    
    // Ray marching
    const float clipNear = 0.;
    const float clipFar = 32.;
    float accum = 0.;
    Surface objectSurface = rayMarch(ro, rd, clipNear, clipFar, accum);
    
    accum = accum*accum*.0009;
    
    gl_FragColor = vec4(vec3(accum + .5 - (cos(accum + 1. + u_time) * .5 + .5), accum, accum + .5 - (sin(accum + 1. + u_time) * .5 + .5)), 1.);
    return;
  }
  
</script>
<script src="/uploads/1908/wtcgl.js"></script>

webgl circles shader

webgl, shader, shape

编辑器支持Emmet

快捷键

webgl circles shader

webgl, shader, shape

babylon.js自动生成3D地形（terrain builder）

webgl three.js实现孟杰海绵（menger sponge）立方体光线追踪（raymarching）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：