[snippet_preview_vc code="{``settings``:{``resources``:`{``}`,``title``:``Fake 3D effect with depth map``},``code``:{``html``:``%3Clink%20rel%3D%22stylesheet%22%20href%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fmeyer-reset%2F2.0%2Freset.min.css%22%3E%0A%3Ccanvas%20id%3D%22canvas%22%3E%3C%2Fcanvas%3E%0A%0A%3C!--%20vertex%20shader%20--%3E%0A%3Cscript%20id%3D%22vs%22%20type%3D%22f%22%3E%0A%09attribute%20vec2%20position%3B%0A%09attribute%20vec2%20texcoord%3B%0A%0A%09uniform%20mat3%20u_matrix%3B%0A%0A%09varying%20vec2%20v_texcoord%3B%0A%0A%09void%20main()%20%7B%0A%09%09%20gl_Position%20%3D%20vec4(u_matrix%20*%20vec3(position%2C%201)%2C%201)%3B%0A%09%09%20v_texcoord%20%3D%20texcoord%3B%0A%09%7D%0A%3C%2Fscript%3E%0A%0A%3C!--%20fragment%20shader%20--%3E%0A%3Cscript%20id%3D%22fs%22%20type%3D%22f%22%3E%0A%09precision%20mediump%20float%3B%0A%0A%09uniform%20vec2%20u_mouse%3B%0A%0A%09uniform%20sampler2D%20u_originalImage%3B%0A%09uniform%20sampler2D%20u_mapImage%3B%0A%0A%09varying%20vec2%20v_texcoord%3B%0A%0A%09void%20main()%20%7B%0A%09%09%20vec4%20depthDistortion%20%3D%20texture2D(u_mapImage%2C%20v_texcoord)%3B%0A%09%09%20float%20parallaxMult%20%3D%20depthDistortion.r%3B%0A%0A%09%09%20vec2%20parallax%20%3D%20(u_mouse)%20*%20parallaxMult%3B%0A%0A%09%09%20vec4%20original%20%3D%20texture2D(u_originalImage%2C%20(v_texcoord%20%2B%20parallax))%3B%0A%09%09%20gl_FragColor%20%3D%20original%3B%0A%09%7D%0A%3C%2Fscript%3E%0A%3Cscript%20src%3D'https%3A%2F%2Fcdn.rawgit.com%2Fgreggman%2Ftwgl.js%2Fmaster%2Fdist%2F4.x%2Ftwgl-full.min.js'%3E%3C%2Fscript%3E%0A%3Cscript%20src%3D'https%3A%2F%2Fwebglfundamentals.org%2Fwebgl%2Fresources%2Fm3.js'%3E%3C%2Fscript%3E``,``js``:``%22use%20strict%22%3B%0A%0Afunction%20main()%20%7B%0A%20%20%2F%2F%20Get%20A%20WebGL%20context%0A%20%20%2F**%20%40type%20%7BHTMLCanvasElement%7D%20*%2F%0A%20%20const%20canvas%20%3D%20document.getElementById(%22canvas%22)%3B%0A%20%20const%20gl%20%3D%20canvas.getContext(%22webgl%22)%3B%0A%20%20if%20(!gl)%20%7B%0A%20%20%20%20return%3B%0A%20%20%7D%0A%0A%20%20let%20originalImage%20%3D%20%7B%20width%3A%201%2C%20height%3A%201%20%7D%3B%20%2F%2F%20replaced%20after%20loading%0A%20%20const%20originalTexture%20%3D%20twgl.createTexture(gl%2C%20%7B%0A%20%20%20%20src%3A%20%22https%3A%2F%2Frobindelaporte.fr%2Fcodepen%2Fdog1.jpg%22%2C%20%0A%20%20%20%20crossOrigin%3A%20''%2C%0A%20%20%7D%2C%20(err%2C%20texture%2C%20source)%20%3D%3E%20%7B%0A%20%20%20%20originalImage%20%3D%20source%3B%0A%20%20%7D)%3B%0A%20%20%0A%20%20const%20mapTexture%20%3D%20twgl.createTexture(gl%2C%20%7B%0A%20%20%20%20src%3A%20%22https%3A%2F%2Frobindelaporte.fr%2Fcodepen%2Fdog3.jpg%22%2C%20crossOrigin%3A%20''%2C%0A%20%20%7D)%3B%0A%20%20%0A%0A%20%20%2F%2F%20compile%20shaders%2C%20link%20program%2C%20lookup%20location%0A%20%20const%20programInfo%20%3D%20twgl.createProgramInfo(gl%2C%20%5B%22vs%22%2C%20%22fs%22%5D)%3B%0A%0A%20%20%2F%2F%20calls%20gl.createBuffer%2C%20gl.bindBuffer%2C%20gl.bufferData%20for%20a%20quad%0A%20%20const%20bufferInfo%20%3D%20twgl.primitives.createXYQuadBufferInfo(gl)%3B%0A%0A%20%20const%20mouse%20%3D%20%5B0%2C%200%5D%3B%0A%20%20document.addEventListener('mousemove'%2C%20(event)%20%3D%3E%20%7B%0A%20%20%20%20mouse%5B0%5D%20%3D%20(event.clientX%20%2F%20gl.canvas.clientWidth%20%20*%202%20-%201)%20*%20-0.02%3B%0A%20%20%20%20mouse%5B1%5D%20%3D%20(event.clientY%20%2F%20gl.canvas.clientHeight%20*%202%20-%201)%20*%20-0.02%3B%0A%20%20%7D)%3B%0A%09%0A%09document.addEventListener('touchmove'%2C%20(event)%20%3D%3E%20%7B%0A%20%20%20%20mouse%5B0%5D%20%3D%20(event.touches%5B0%5D.clientX%20%2F%20gl.canvas.clientWidth%20%20*%202%20-%201)%20*%20-0.02%3B%0A%20%20%20%20mouse%5B1%5D%20%3D%20(event.touches%5B0%5D.clientY%20%2F%20gl.canvas.clientHeight%20*%202%20-%201)%20*%20-0.02%3B%0A%20%20%7D)%3B%0A%09%0A%09document.addEventListener('touchend'%2C%20(event)%20%3D%3E%20%7B%0A%20%20%20%20mouse%5B0%5D%20%3D%200%3B%0A%20%20%20%20mouse%5B1%5D%20%3D%200%3B%0A%20%20%7D)%3B%0A%09%0A%09var%20nMouse%20%3D%20%5B0%2C%200%5D%3B%0A%09var%20oMouse%20%3D%20%5B0%2C%200%5D%3B%0A%20%20%0A%20%20requestAnimationFrame(render)%3B%0A%20%20%0A%20%20function%20render()%20%7B%0A%20%20%20%20%0A%20%20%20%20twgl.resizeCanvasToDisplaySize(gl.canvas)%3B%0A%0A%20%20%20%20gl.viewport(0%2C%200%2C%20gl.canvas.width%2C%20gl.canvas.height)%3B%0A%0A%20%20%20%20gl.clearColor(0%2C%200%2C%200%2C%200)%3B%0A%20%20%20%20gl.clear(gl.COLOR_BUFFER_BIT)%3B%0A%0A%20%20%20%20gl.useProgram(programInfo.program)%3B%0A%0A%20%20%20%20%2F%2F%20calls%20gl.bindBuffer%2C%20gl.enableVertexAttribArray%2C%20gl.vertexAttribPointer%0A%20%20%20%20twgl.setBuffersAndAttributes(gl%2C%20programInfo%2C%20bufferInfo)%3B%0A%0A%20%20%20%20const%20canvasAspect%20%3D%20gl.canvas.clientWidth%20%2F%20gl.canvas.clientHeight%3B%0A%20%20%20%20const%20imageAspect%20%3D%20originalImage.width%20%2F%20originalImage.height%3B%0A%20%20%20%20const%20mat%20%3D%20m3.scaling(imageAspect%20%2F%20canvasAspect%2C%20-1)%3B%0A%09%09%0A%09%09nMouse%5B0%5D%20%2B%3D%20(mouse%5B0%5D%20-%20nMouse%5B0%5D)%20*%200.05%3B%0A%09%09nMouse%5B1%5D%20%2B%3D%20(mouse%5B1%5D%20-%20nMouse%5B1%5D)%20*%200.05%3B%0A%09%09%09%0A%20%20%20%20%2F%2F%20calls%20gl.activeTexture%2C%20gl.bindTexture%2C%20gl.uniformXXX%0A%20%20%20%20twgl.setUniforms(programInfo%2C%20%7B%0A%20%20%20%20%20%20u_matrix%3A%20mat%2C%0A%20%20%20%20%20%20u_originalImage%3A%20originalTexture%2C%0A%20%20%20%20%20%20u_mapImage%3A%20mapTexture%2C%0A%20%20%20%20%20%20u_mouse%3A%20nMouse%2C%0A%20%20%20%20%7D)%3B%0A%09%09%0A%20%20%20%20%2F%2F%20calls%20gl.drawArrays%20or%20gl.drawElements%0A%20%20%20%20twgl.drawBufferInfo(gl%2C%20bufferInfo)%3B%0A%20%20%20%20%0A%20%20%20%20requestAnimationFrame(render)%3B%0A%20%20%7D%0A%7D%0A%0Amain()%3B``,``css``:``body%20%7B%20margin%3A%200%3B%7D%0Acanvas%20%7B%20width%3A%20100vw%3B%20height%3A%20100vh%3B%20display%3A%20block%3B%20%7D``}}"]