EffectHub.com: your best source for gaming

Recommendation

More Effects...

"use strict";

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

var vertexShader = null;
var fragmentShader = null;

var stats = new Stats();

var initialize = function initialize() {
     //initializeStats();
     initialize3DCanvas();
     initializeShaders();
     initializeProgram();
     initializeModel();
     initializeResize();
     animate();
};

var initializeStats = function initializeStats() {
     stats.showPanel(0);
     document.body.appendChild(stats.domElement);
};

var initialize3DCanvas = function 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);
     }
};

var initializeModel = function initializeModel() {
     // create rectangle
     var 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
     var 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();
};

var createShader = function createShader(gl, source, type) {
     var shader = gl.createShader(type);
     source = document.getElementById(source).text;
     gl.shaderSource(shader, source);
     gl.compileShader(shader);

return shader;
};

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

var program = null;

var initializeProgram = function 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)) {
          var info = gl.getProgramInfoLog(program);
          throw "Could not compile WebGL program. \n\n" + info;
     } else {
          gl.useProgram(program);
     }
};

var animate = function animate() {
     stats.begin();

var currentTime = new Date().getTime();
     var timeSinceLastUpdate = currentTime - lastUpdate;
     lastUpdate = currentTime;

render(timeSinceLastUpdate);

stats.end();

window.requestAnimationFrame(animate);
};

var render = function render(timeDelta) {
     timer += timeDelta ? timeDelta / 1000 : 0.05;
     gl.uniform1fv(time, [timer]);

gl.drawArrays(gl.TRIANGLES, 0, 6);
};

var initializeResize = function initializeResize() {
     var height = document.body.clientHeight;
     var 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 = function () {
     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 = vec3(1.0, 1.0, 1.0);
     vec2 uvcopy;
	float distance;
     float offset = time;
     
     vec2 uv = gl_FragCoord.xy / u_resolution.xy;
     
     uv = ((uv - 0.5) * 2.0);
     
	for(int i=0; i <= 2; i++) {

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

Recommendation

Join Effecthub.com