HTML5 WebGL液态金属波动色差着色器动画特效

Chromatic aberration

webgl, metal, wave, shader

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

let canvas = null;
let gl = null;
let lastUpdate = null;
let timer = 0.0;
let time = null;
let resolutionLocation = null;

let vertexShader = null;
let fragmentShader = null;

const stats = new Stats();

const initialize = () => {
     //initializeStats();
    	initialize3DCanvas();
     initializeShaders();
     initializeProgram();
    	initializeModel();
     initializeResize();
    	animate();
}

const initializeStats = () => {
     stats.showPanel( 0 );
     document.body.appendChild( stats.domElement );
}

const initialize3DCanvas = () => {
     canvas = document.getElementById("canvas");
     gl = canvas.getContext("webgl") || canvas.getContext('experimental-webgl');
     if(gl)
     {
          gl.viewport(0,0,canvas.width,canvas.height);
          gl.enable(gl.DEPTH_TEST);
          gl.depthFunc(gl.LEQUAL); 
          gl.clearColor(1.0,1.0,1.0,1.0);
          gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
     }
}

const initializeModel = () => {
     // create rectangle
     let buffer = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
     gl.bufferData(
          gl.ARRAY_BUFFER,
          new Float32Array([
               -1.0, -1.0,
               1.0, -1.0,
               -1.0,  1.0,
               -1.0,  1.0,
               1.0, -1.0,
               1.0,  1.0]),
          gl.STATIC_DRAW);

// vertex data
     let positionLocation = gl.getAttribLocation(program, "a_position");
     gl.enableVertexAttribArray(positionLocation);
     gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
     
     // passing resolution to the shader
     resolutionLocation = gl.getUniformLocation(program, "u_resolution");
     gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
     
     //init time
     time = gl.getUniformLocation(program, "time");
     lastUpdate = new Date().getTime();
}

const createShader = (gl,source,type) => {
  let shader = gl.createShader(type);
  source = document.getElementById(source).text;
  gl.shaderSource(shader, source);
  gl.compileShader(shader);

return shader;
}

const initializeShaders = () => {
     vertexShader = createShader(gl, 'vert-shader', gl.VERTEX_SHADER);
     fragmentShader = createShader(gl, 'frag-shader', gl.FRAGMENT_SHADER);
}

let program = null;

const initializeProgram = () => {
     program = gl.createProgram();
     gl.attachShader(program, vertexShader);
     gl.attachShader(program, fragmentShader);

gl.linkProgram(program);
     gl.useProgram(program); 
     
     if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) {
          let info = gl.getProgramInfoLog(program); 
          throw "Could not compile WebGL program. \n\n" + info;
     } else {
          gl.useProgram(program); 
     }
}

const animate = () => {
     stats.begin();
     
     let currentTime = new Date().getTime();
     let timeSinceLastUpdate = currentTime - lastUpdate;
     lastUpdate = currentTime;

render(timeSinceLastUpdate);
     
     stats.end();
     
     window.requestAnimationFrame(animate);
}

const render = (timeDelta) => {
     timer += (timeDelta ? timeDelta / 1000 : 0.05);
     gl.uniform1fv(time, [timer]); 
     
     gl.drawArrays(gl.TRIANGLES, 0, 6);
}

const initializeResize = () => {
     const height = document.body.clientHeight;
     const width = document.body.clientWidth;

canvas.width = width * window.devicePixelRatio;
     canvas.height = height * window.devicePixelRatio;

canvas.style.width = `${width}px`;
     canvas.style.height = `${height}px`;
     
     gl.viewport(0,0,canvas.width,canvas.height);
     gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
}

window.onresize = () => {
     initializeResize();
}

initialize();

编译

CSS

HTML

void main() {
   	// returns the position
   	gl_Position = a_position;
  }
</script>

#define PI 3.1415926535897932384626433832795
#define HALF_PI 1.57079632679

precision mediump float;

uniform vec2 u_resolution;
uniform float time;

void main() {

vec3 color;
     vec2 uvcopy;
	float l;
     float offset = time;
     
	for(int i=0; i < 4; i++) {
     
     	vec2 uv = gl_FragCoord.xy / u_resolution.xy;
          
          uv = ((uv - 0.5) * 3.0);

vec2 uvcopy = uv;

if (u_resolution.y > u_resolution.x ) {
               uvcopy.y *= u_resolution.y / u_resolution.x;
          } else {
               uvcopy.x *= u_resolution.x / u_resolution.y;
          }
     
		//offset += (cos(time) * 0.1) + 0.05;
          offset -= 0.1;
          
		l = length(uvcopy);
          
		uv += uvcopy / l;
          
          uv *= abs(sin(-offset) + 2.0);
          uv *= abs(sin(l * 2.0 - offset));
          uv *= abs(cos(l * 1.0 - offset));
          
          uv.x += sin(time * 0.2) * 4.0;
          uv.y += cos(time * 0.2) * 4.0;
          
		color[i] = 0.1 / length(abs(mod(uv, 1.0) - 0.5));
	}
     
	gl_FragColor = vec4(color / l, 1.0);
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>

Chromatic aberration

webgl, metal, wave, shader

编辑器支持Emmet

快捷键

Chromatic aberration

webgl, metal, wave, shader

使用HTML5 WebGL GLSL着色器代码实现的太空星云图粒子动画特效

WebGL Three.js 彩虹液态物质（液体）动画特效的着色器代码

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：