webgl+canvas浩瀚宇宙动画效果代码-html代码-BFW代码库

webgl+canvas浩瀚宇宙动画效果代码

代码语言：html

所属分类：动画

代码描述：webgl+canvas浩瀚宇宙动画效果代码，底部还有一个长长的彩色线条。

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

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

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


  
  
<style>
body,
html {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #000;
  overflow: hidden;
}
canvas {
  aspect-ratio: 1920/1080;
  width: 100vw;
  background-color: #000;
  image-rendering: high-quality;
}
:fullscreen {
  background-color: #000;
}
</style>


  
</head>

<body translate="no">
  <script type="fragment-shader" id="fragmentShader">
#ifdef GL_ES
precision mediump float;
#endif

uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;

#define rotate2D(a) mat2(cos(a),-sin(a),sin(a),cos(a))


float nonRecursiveJulia(in vec2 p, in float n){
    for(int i=0;i<1000;i++)
        if (n > 0.0 && p.x * p.x + p.y * p.y < n) {
            float nextY = 2. * (p.x * p.y) - .4-sin(time)/5.;
            p.x = p.x * p.x - p.y * p.y - .78;
            p.y = nextY;
            n--;
        }
        else
            break;
	return n / 70.0;
}



vec3 hsl(in float h,in float s,in float l){
    return l + s * (clamp( abs(mod(h*6.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 )-0.5)*(1.0-abs(2.0*l-1.0));
}




void main( void ) {
    vec2 uv =  (gl_FragCoord.xy - 0.5*resolution)/resolution.y;
    vec2 p = uv;
    uv.x += cos(time)/4.;
    uv.y += sin(time)/4.;
    uv *= abs(2.+sin(time/4.)*5.)/5.-2.;
    uv *= rotate2D(time);
    float c = nonRecursiveJulia(uv, 75.0);
    vec3 color = hsl(c/9.-.5,1.+c/2.,.5-c/2.);
    if(p.y<-.497)
	    color=hsl(p.x-time,1.,.5);
	gl_FragColor = vec4(color,1.0);
}
</script>
  
      <script  >
const canvas = document.createElement("canvas");
const w = canvas.width = 1920;
const h = canvas.height = 1080;
const ctx3d = getContext3d(canvas, fragmentShader.innerText);
document.body.prepend(canvas);
canvas.onclick = e => e.target.requestFullscreen();

!function animate(t = 0) {
  ctx3d.update();
  requestAnimationFrame(animate);
}();



function getContext3d(canvasObj, fragmentShaderScript, vertextShaderScript) {
  this.context = canvasObj.getContext("webgl2");
  const w = this.context.canva.........完整代码请登录后点击上方下载按钮下载查看