Skip to content

Instantly share code, notes, and snippets.

@bozzin
Created December 3, 2019 00:22
Show Gist options
  • Save bozzin/5895d97130e148e66b88ff4c92535b59 to your computer and use it in GitHub Desktop.
Save bozzin/5895d97130e148e66b88ff4c92535b59 to your computer and use it in GitHub Desktop.
Fake 3D effect with depth map
<canvas id="canvas"></canvas>
<!-- vertex shader -->
<script id="vs" type="f">
attribute vec2 position;
attribute vec2 texcoord;
uniform mat3 u_matrix;
varying vec2 v_texcoord;
void main() {
gl_Position = vec4(u_matrix * vec3(position, 1), 1);
v_texcoord = texcoord;
}
</script>
<!-- fragment shader -->
<script id="fs" type="f">
precision mediump float;
uniform vec2 u_mouse;
uniform sampler2D u_originalImage;
uniform sampler2D u_mapImage;
varying vec2 v_texcoord;
void main() {
vec4 depthDistortion = texture2D(u_mapImage, v_texcoord);
float parallaxMult = depthDistortion.r;
vec2 parallax = (u_mouse) * parallaxMult;
vec4 original = texture2D(u_originalImage, (v_texcoord + parallax));
gl_FragColor = original;
}
</script>
"use strict";
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
if (!gl) {
return;
}
let originalImage = { width: 1, height: 1 }; // replaced after loading
const originalTexture = twgl.createTexture(gl, {
src: "https://robindelaporte.fr/codepen/dog1.jpg",
crossOrigin: '',
}, (err, texture, source) => {
originalImage = source;
});
const mapTexture = twgl.createTexture(gl, {
src: "https://robindelaporte.fr/codepen/dog3.jpg", crossOrigin: '',
});
// compile shaders, link program, lookup location
const programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);
// calls gl.createBuffer, gl.bindBuffer, gl.bufferData for a quad
const bufferInfo = twgl.primitives.createXYQuadBufferInfo(gl);
const mouse = [0, 0];
document.addEventListener('mousemove', (event) => {
mouse[0] = (event.clientX / gl.canvas.clientWidth * 2 - 1) * -0.02;
mouse[1] = (event.clientY / gl.canvas.clientHeight * 2 - 1) * -0.02;
});
document.addEventListener('touchmove', (event) => {
mouse[0] = (event.touches[0].clientX / gl.canvas.clientWidth * 2 - 1) * -0.02;
mouse[1] = (event.touches[0].clientY / gl.canvas.clientHeight * 2 - 1) * -0.02;
});
document.addEventListener('touchend', (event) => {
mouse[0] = 0;
mouse[1] = 0;
});
var nMouse = [0, 0];
var oMouse = [0, 0];
requestAnimationFrame(render);
function render() {
twgl.resizeCanvasToDisplaySize(gl.canvas);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(programInfo.program);
// calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
const canvasAspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
const imageAspect = originalImage.width / originalImage.height;
const mat = m3.scaling(imageAspect / canvasAspect, -1);
nMouse[0] += (mouse[0] - nMouse[0]) * 0.05;
nMouse[1] += (mouse[1] - nMouse[1]) * 0.05;
// calls gl.activeTexture, gl.bindTexture, gl.uniformXXX
twgl.setUniforms(programInfo, {
u_matrix: mat,
u_originalImage: originalTexture,
u_mapImage: mapTexture,
u_mouse: nMouse,
});
// calls gl.drawArrays or gl.drawElements
twgl.drawBufferInfo(gl, bufferInfo);
requestAnimationFrame(render);
}
}
main();
<script src="https://cdn.rawgit.com/greggman/twgl.js/master/dist/4.x/twgl-full.min.js"></script>
<script src="https://webglfundamentals.org/webgl/resources/m3.js"></script>
body { margin: 0;}
canvas { width: 100vw; height: 100vh; display: block; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment