CODEWITHSUNDEEP
javascriptcanvaswebgl
saibbyweb
saibbyweb

Reputation: 3244

How do I render a 2d canvas on WebGL canvas?

I am using multiple canvas'es for animating (scaling / changing opacity) images on 2D canvas'es. Just read somewhere using webgl will increase overall FPS. I have new to WEBGL and found it quite different from 2d canvases. Can some guide me how can I render my existing 2d canvases on a main webgl canvas.

Here's a demo code, depicting a webgl canvas and virtual 2d canvas with an image drawn. How can I draw this 2d canvas with image drawn on a webgl canvas?

let webglCanvas = $('#webgl-canvas')[0];
let webglContext = backgroundCanvas.getContext('webgl');

/* setting up 2d canvas */
let virtualCanvas = document.createElement('canvas');
let virtualContext = virtualCanvas.getContext('2d');

/* setting height and width */
webglCanvas.height = 100;
webglCanvas.width = 150;

virtualCanvas.height = 100;
virtualCanvas.width = 150;

/* fetching image to draw on 2d context */
let image = new Image();
image.src = "http://ahiliahomes.saibbywebdemos.online/assets/images/brown-back.jpg";
image.onload = () => drawImageOn2D()

function drawImageon2D() {
  virtualContext.save();
  virtualContext.clearRect(0, 0, virtualCanvas.width, virtualCanvas.height, 0, 0);
  virtualContext.drawImage(image, 0, 0, image.width, image.height, 0, 0, virtualCanvas.width, virtualCanvas.height);
  virtualContext.restore();
  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="webgl-canvas"></canvas>

Upvotes: 1

Views: 3327

Answers (1)

Zim
Zim

Reputation: 1483

If you're not opposed to using a third party library (well, I strongly recommend it !), here's how I would do it with three.js (I'm using another image because I'm encountering CORS issues with yours).

The idea is basically to create a plane on the WebGL canvas and apply the image as a texture on it. The rest is boilerplate code to make the scene be rendered (aniamte) and visible (light):

Link to fiddle

const IMG_WIDTH = 390;
const IMG_HEIGHT = 260;

var scene = new THREE.Scene();

// these are the default PerspectiveCamera initialization settings
var camera = new THREE.PerspectiveCamera( 45, IMG_WIDTH / IMG_HEIGHT, 1, 1000  );
// you'll have to play with the camera z position to get closer
// or further to the image, so render it smaller or bigger
camera.position.z = 10;

var renderer = new THREE.WebGLRenderer();
renderer.setSize( IMG_WIDTH, IMG_HEIGHT );

// LIGHT
var light = new THREE.PointLight( 0xffffff, 1, 0 );
light.position.set(1, 1, 100 );
scene.add(light)

var loader = new THREE.TextureLoader();

// IMAGE
var planeMaterial = new THREE.MeshLambertMaterial({
  map: loader.load("https://i.imgur.com/fHyEMsl.jpg")
});

var planeGeometry = new THREE.PlaneGeometry(10, 10 * (IMG_HEIGHT/IMG_WIDTH));
var mesh = new THREE.Mesh(planeGeometry, planeMaterial);
mesh.position.set(0, 0, 0);
scene.add(mesh);

document.body.appendChild( renderer.domElement );

// here is the (stereotyped) render loop
function animate() {
  requestAnimationFrame( animate );
    renderer.render( scene, camera );
}

animate();
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/99/three.min.js"></script>

Upvotes: 0

Related Questions