Generate a visual distortion effect using WebGL and three.js

Question

Generate a visual distortion effect using WebGL and three.js

I'm currently learning three.js and experimenting with image transformations.

After seeing a cool effect demonstrated here, I'm interested in replicating it.

Can anyone provide guidance on the steps to achieve similar image transformations?

So far, I've set up a loader:

// instantiate a loader
var loader = new THREE.TextureLoader();

// load a resource
loader.load(
    // resource URL
    'clouds.jpg',
    // Function when resource is loaded
    function (texture) {
        init(new THREE.MeshBasicMaterial({
            map: texture
        }));
    },
    // Function called when download progresses
    function (xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    // Function called when download errors
    function (xhr) {
        console.log('An error happened');
    }
);

var init = function(material) {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var rectLength = window.innerHeight;
    var rectWidth = window.innerWidth;
    var rectShape = new THREE.Shape();
    rectShape.moveTo(0,0);
    rectShape.lineTo(0, rectWidth);
    rectShape.lineTo(rectLength, rectWidth);
    rectShape.lineTo(rectLength, 0);
    rectShape.lineTo(0, 0);
    var geometry = new THREE.ShapeGeometry(rectShape);
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 1;

    var render = function () {
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    };

    render();
}

Currently, the image renders as a flat 2D shape but I'm unsure how to implement effects within the render function.

Would it be better to handle this in plain WebGL?

Any advice, tips, or tutorials would be greatly appreciated!

javascript three.js webgl

Answer 1

Answer №1

Exploring the potential in WebGL, you can achieve similar results as with 2D canvas but with added possibilities for more intricate warping effects on a per-pixel basis rather than just per-line.

var img = new Image();
img.onload = start;
img.src = "https://i.imgur.com/v38pV.jpg";

function start() {

  var canvas = document.querySelector("canvas");
  var ctx = canvas.getContext("2d");

  function mix(a, b, l) {
    return a + (b - a) * l;
  }
  
  function upDown(v) {
    return Math.sin(v) * 0.5 + 0.5;
  }
  
  function render(time) {
    time *= 0.001;

    resize(canvas);

    var t1 = time;
    var t2 = time * 0.37;

    // for each line in the canvas
    for (var dstY = 0; dstY < canvas.height; ++dstY) {
      
      // v is value that goes 0 to 1 down the canvas
      var v = dstY / canvas.height;
      
      // compute some amount to offset the src
      var off1 = Math.sin((v + 0.5) * mix(3, 12, upDown(t1))) * 300;
      var off2 = Math.sin((v + 0.5) * mix(3, 12, upDown(t2))) * 300;
      var off = off1 + off2;
      
      // compute what line of the source image we want
      // NOTE: if off = 0 then it would just be stretching
      // the image down the canvas.
      var srcY = dstY * img.height / canvas.height + off;
      
      // clamp srcY to be inside the image
      srcY = Math.max(0, Math.min(img.height - 1, srcY));

      // draw a single line from the src to the canvas
      ctx.drawImage(
        img, 
        0, srcY, img.width, 1, 
        0, dstY, canvas.width, 1);
    }    
    
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);

  function resize(canvas) {
    var width = canvas.clientWidth;
    var height = canvas.clientHeight;
    if (width != canvas.width || height != canvas.height) {
      canvas.width = width;
      canvas.height = height;
    }
  }
}

body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; }

<canvas></canvas>

The technique employed here seems to take inspiration from slit scan, although the exact formula remains unspecified at this point.

While Three.js could also handle such effects well, using WebGL directly allows for greater control and customization without the overhead of a large library for a relatively simple effect.

Below is an alternative version utilizing twgl:

var vs = `
attribute vec4 position;

varying vec2 v_texcoord;

void main() {
  gl_Position = position;
  v_texcoord = position.xy * .5 + .5;
}
`;

// Fragment shader code for one effect
var fs1 = `
precision mediump float;

uniform float time;
uniform sampler2D tex;

varying vec2 v_texcoord;

float upDown(float v) {
  return sin(v) * 0.5 + 0.5;
}

void main() {
  float t1 = time;
  float t2 = time * 0.37;

... (Continued) ...

body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; }
.top { position: absolute; left: 5px; top: 5px; color: white; }

<script src="https://twgljs.org/dist/twgl.min.js"></script>
<canvas></canvas>
<div class="top">click to switch effects</div>

Answer 2

Exploring the potential in WebGL, you can achieve similar results as with 2D canvas but with added possibilities for more intricate warping effects on a per-pixel basis rather than just per-line.

var img = new Image();
img.onload = start;
img.src = "https://i.imgur.com/v38pV.jpg";

function start() {

  var canvas = document.querySelector("canvas");
  var ctx = canvas.getContext("2d");

  function mix(a, b, l) {
    return a + (b - a) * l;
  }
  
  function upDown(v) {
    return Math.sin(v) * 0.5 + 0.5;
  }
  
  function render(time) {
    time *= 0.001;

    resize(canvas);

    var t1 = time;
    var t2 = time * 0.37;

    // for each line in the canvas
    for (var dstY = 0; dstY < canvas.height; ++dstY) {
      
      // v is value that goes 0 to 1 down the canvas
      var v = dstY / canvas.height;
      
      // compute some amount to offset the src
      var off1 = Math.sin((v + 0.5) * mix(3, 12, upDown(t1))) * 300;
      var off2 = Math.sin((v + 0.5) * mix(3, 12, upDown(t2))) * 300;
      var off = off1 + off2;
      
      // compute what line of the source image we want
      // NOTE: if off = 0 then it would just be stretching
      // the image down the canvas.
      var srcY = dstY * img.height / canvas.height + off;
      
      // clamp srcY to be inside the image
      srcY = Math.max(0, Math.min(img.height - 1, srcY));

      // draw a single line from the src to the canvas
      ctx.drawImage(
        img, 
        0, srcY, img.width, 1, 
        0, dstY, canvas.width, 1);
    }    
    
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);

  function resize(canvas) {
    var width = canvas.clientWidth;
    var height = canvas.clientHeight;
    if (width != canvas.width || height != canvas.height) {
      canvas.width = width;
      canvas.height = height;
    }
  }
}

body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; }

<canvas></canvas>

The technique employed here seems to take inspiration from slit scan, although the exact formula remains unspecified at this point.

While Three.js could also handle such effects well, using WebGL directly allows for greater control and customization without the overhead of a large library for a relatively simple effect.

Below is an alternative version utilizing twgl:

var vs = `
attribute vec4 position;

varying vec2 v_texcoord;

void main() {
  gl_Position = position;
  v_texcoord = position.xy * .5 + .5;
}
`;

// Fragment shader code for one effect
var fs1 = `
precision mediump float;

uniform float time;
uniform sampler2D tex;

varying vec2 v_texcoord;

float upDown(float v) {
  return sin(v) * 0.5 + 0.5;
}

void main() {
  float t1 = time;
  float t2 = time * 0.37;

... (Continued) ...

body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; }
.top { position: absolute; left: 5px; top: 5px; color: white; }

<script src="https://twgljs.org/dist/twgl.min.js"></script>
<canvas></canvas>
<div class="top">click to switch effects</div>

Answer 3

Answer №2

Opting for WebGL Shaders is undoubtedly the top choice for achieving a similar effect as mentioned. It would be beneficial to explore Texture Shader demonstrations or simply take a look at this example in Three.js by following this link.

Answer 4

Opting for WebGL Shaders is undoubtedly the top choice for achieving a similar effect as mentioned. It would be beneficial to explore Texture Shader demonstrations or simply take a look at this example in Three.js by following this link.

Generate a visual distortion effect using WebGL and three.js

Answer №1

Answer №2

Similar questions

The error message indicates that the Worklight adapter is an object, not a function

XMLHTTP is not accessible in the Department of Health

Adjust picture dimensions when the window changes (using jQuery)

How to disable specific multiple dates in Material-UI datepickers?

Instructions on how to submit a form using a button while also clicking on an anchor link simultaneously

What are the possible arguments for the event type onInput?

Avoid form submission when the 'enter' key is pressed in Edge, but not in Chrome or Firefox

Divide the string into two halves and display them in separate div elements

Tips for changing the TextField variant when it receives input focus and keeping the focus using Material-UI

Issue: A problem has arisen with the element type, as it was supposed to be a string for built-in components but is currently undefined. This error is being encountered

Having trouble with the addEventListener function not working on a vanilla JS form?

When entering a sub-URL into the browser address bar, the routes do not display as expected

What is the most efficient method for managing axios errors in Laravel and Vue.js?

Limit the v-text-field input to only accept a single digit

Error in mandatory data required by the Screenleap API in JavaScript

Is it possible to enclose a form inside a Bootstrap popover?

Issue: attempting to write after the end of a node

Unusual shadow cast by the box's silhouette

The issue of Ejs partial header and footer file only functioning in one file and not the other (both at the same directory level)

Errors slipping through the cracks of Express middleware