wtc-gl wtc-math实现莫比乌斯变换动画效果代码-html代码-BFW代码库

wtc-gl wtc-math实现莫比乌斯变换动画效果代码

代码语言：html

所属分类：动画

代码描述：wtc-gl wtc-math实现莫比乌斯变换动画效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
  background: #333;
  color: #fff;
  font-family: sans-serif;
}
body,
html {
  margin: 0;
  overflow: hidden;
  padding: 0;
}
canvas {
  width: 100vw;
  height: 100vh;
  touch-action:none;
}
</style>



</head>

<body>
  <script type="text/fragment" id="fragShader">
  #extension GL_OES_standard_derivatives : enable
  precision highp float;

  uniform vec2 u_resolution;
  uniform float u_time;
  uniform vec4 u_mouse;
  uniform sampler2D s_noise;

  uniform sampler2D b_noise;

  varying vec2 v_uv;
  
  #define PI 3.14159


  vec2 getScreenSpace(vec2 inp) {
    vec2 uv = (inp - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);

    return uv;
  }

  vec2 mobius(vec2 p, vec2 z1, vec2 z2){
    z1 = p - z1;
    p -= z2;
    return vec2(dot(z1, p), z1.y*p.x - z1.x*p.y)/dot(p, p);
  }
  vec2 rot(vec2 uv, float a) {
    float s = sin(a);
    float c = cos(a);
    return uv * mat2(c, -s, s, c);
  }
  void main() {
    vec2 uv = getScreenSpace(gl_FragCoord.xy);
    vec2 mouse = getScreenSpace(u_mouse.xy);
    vec2 mouse2 = rot(getScreenSpace(u_mouse.zw), PI);

    uv = mobius(uv, mouse, mouse2);
    
    vec2 polar = vec2(length(uv), atan(uv.y, uv.x) / (PI*2.)*PI*2.);
    
    float field = sin(u_time * 20. + (polar.y+polar.x) * 10.);
    
    gl_FragColor = vec4(vec3(smoothstep(0., 0.1, field)),1);
    
  }
</script>

  
      <script type="module">
console.clear();

import { FragmentShader, Texture, Uniform } from 'https://cdn.skypack.dev/wtc-gl@1.0.0-beta.17';
import { Vec2, Vec4 } from 'https://cdn.skypack.dev/wtc-math';

const shaderF =.........完整代码请登录后点击上方下载按钮下载查看