Guide to implementing a mesh inside a WebGL renderer in Three JS by adding a canvas

Question

Guide to implementing a mesh inside a WebGL renderer in Three JS by adding a canvas

Recently, I've been delving into Three JS after stumbling upon an interesting article about using augmented reality with a webcam. In my quest to experiment, I decided to incorporate a simple canvas into a scene where I had previously used webglrender. The goal was to insert a webcam stream for added effect. The article () mentioned the need to create a virtual scene rendered by the webglrenderer object as well as a physical reality scene (the webcam). Within my file testingthreejs.js, between lines 30 and 41, I implemented the code for creating this new virtual scene and inserting the canvas within my mesh object. However, to my disappointment, nothing seemed to happen. How can I successfully insert the canvas as a Mesh object? I attempted to avoid drawing a canvas directly, as it is believed that canvas rendering is slower than webgl rendering (I am also considering the use of the ray class). You can find my gist here: https://gist.github.com/fernandosg/75ec701c0295761a77e6, which includes the files testingthreejs.js and index.html. Thank you in advance for any assistance you can provide.

javascript three.js webgl

Answer 1

Answer №1

If you're interested in learning more about textures and canvas in Three.js, I recommend checking out the Stemkoski's website. It offers a variety of examples with detailed explanations that can be really helpful.

Specifically, you might find what you're looking for in this link. Be sure to take a look at the script provided on the page.

For a closer look at the code:

// Drawing text on canvas
var canvas1 = document.createElement('canvas');
var context1 = canvas1.getContext('2d');
context1.font = "Bold 40px Arial";
context1.fillStyle = "rgba(255,0,0,0.95)";
context1.fillText('Hello, world!', 0, 50);

var texture1 = new THREE.Texture(canvas1);
texture1.needsUpdate = true;

var material1 = new THREE.MeshBasicMaterial({ map: texture1, side:THREE.DoubleSide });
material1.transparent = true;

var mesh1 = new THREE.Mesh(
    new THREE.PlaneGeometry(canvas1.width, canvas1.height),
    material1
);
mesh1.position.set(0, 50, 0);
scene.add(mesh1);

// Drawing image on canvas
var canvas2 = document.createElement('canvas');
var context2 = canvas2.getContext('2d');
var texture2 = new THREE.Texture(canvas2);

var imageObj = new Image();
imageObj.src = "images/Dice-Blue-1.png";
imageObj.onload = function() {
    context2.drawImage(imageObj, 0, 0);
    if (texture2)
        texture2.needsUpdate = true;
};

var material2 = new THREE.MeshBasicMaterial({ map: texture2, side:THREE.DoubleSide });
material2.transparent = true;

var mesh2 = new THREE.Mesh(
    new THREE.PlaneGeometry(canvas2.width, canvas2.height),
    material2
);
mesh2.position.set(0, 50, -50);
scene.add(mesh2);

Answer 2

If you're interested in learning more about textures and canvas in Three.js, I recommend checking out the Stemkoski's website. It offers a variety of examples with detailed explanations that can be really helpful.

Specifically, you might find what you're looking for in this link. Be sure to take a look at the script provided on the page.

For a closer look at the code:

// Drawing text on canvas
var canvas1 = document.createElement('canvas');
var context1 = canvas1.getContext('2d');
context1.font = "Bold 40px Arial";
context1.fillStyle = "rgba(255,0,0,0.95)";
context1.fillText('Hello, world!', 0, 50);

var texture1 = new THREE.Texture(canvas1);
texture1.needsUpdate = true;

var material1 = new THREE.MeshBasicMaterial({ map: texture1, side:THREE.DoubleSide });
material1.transparent = true;

var mesh1 = new THREE.Mesh(
    new THREE.PlaneGeometry(canvas1.width, canvas1.height),
    material1
);
mesh1.position.set(0, 50, 0);
scene.add(mesh1);

// Drawing image on canvas
var canvas2 = document.createElement('canvas');
var context2 = canvas2.getContext('2d');
var texture2 = new THREE.Texture(canvas2);

var imageObj = new Image();
imageObj.src = "images/Dice-Blue-1.png";
imageObj.onload = function() {
    context2.drawImage(imageObj, 0, 0);
    if (texture2)
        texture2.needsUpdate = true;
};

var material2 = new THREE.MeshBasicMaterial({ map: texture2, side:THREE.DoubleSide });
material2.transparent = true;

var mesh2 = new THREE.Mesh(
    new THREE.PlaneGeometry(canvas2.width, canvas2.height),
    material2
);
mesh2.position.set(0, 50, -50);
scene.add(mesh2);

Answer 3

Answer №2

I feel like I'm making progress towards solving the issue at hand. It's great that I was able to successfully incorporate the canvas using a MeshBasicMaterial and PlaneGeometry. However, I encountered a problem where the canvas was drawn but the video was not rendered: canvas rendering issue

Here is the code snippet:

var canvas=document.createElement("canvas");
canvas.width=512;
canvas.height=512;  
var video=document.createElement("video");
streamVideo(video);
var canvasContext=canvas.getContext("2d");
var glCanvas=document.createElement("canvas");
var renderer_webgl=new THREE.WebGLRenderer({canvas:glCanvas});
renderer_webgl.setSize(512,512);
renderer_webgl.autoClear=false;
document.getElementById("container").appendChild(glCanvas);
var camera = new THREE.Camera();
var scene=new THREE.Scene();
var geometry=new THREE.PlaneGeometry(2,2,0);
var texture=new THREE.Texture(canvas);
var material=new THREE.MeshBasicMaterial({
            map:texture,
            depthTest:false,
            depthWrite:false
        });
var mesh=new THREE.Mesh(geometry,material);

canvas_draw=document.createElement("canvas");
        canvas_draw.width=128;
        canvas_draw.height=128;
        ctx=canvas_draw.getContext("2d");
        ctx.fillStyle = "#AAA";
        ctx.fillRect(1,1,20,25);
// INSERT THE CANVAS HERE
var texture_canvas=new THREE.Texture(canvas_draw);
texture_canvas.needsUpdate=true;
var basic_material_canvas=new THREE.MeshBasicMaterial({
    map:texture_canvas
});
var mesh_canvas=new THREE.Mesh(new THREE.PlaneGeometry(2,2,0),basic_material_canvas);
scene.add(mesh);
scene.add(mesh_canvas);
function renderScenes(){
    renderer_webgl.render(scene,camera);
}

function loop(){
    if(video.readyState===video.HAVE_ENOUGH_DATA){
        canvas.changed=true;
        canvasContext.drawImage(video,0,0);
        verifyDetector();
        texture.needsUpdate=true;
        texture_canvas.needsUpdate=true;
        renderScenes();
    }

    requestAnimationFrame(loop);
}
loop();

function verifyDetector(){
    detector = new AR.Detector();
    imageData = canvasContext.getImageData(0, 0, canvas.width, canvas.height);
    var markers = detector.detect(imageData);
    /*if(markers.length>0)
        canvasContext.drawImage(canvas_draw,markers[0].corners[0].x,markers[0].corners[0].y);               
        */
}

Why is this happening?

Answer 4

I feel like I'm making progress towards solving the issue at hand. It's great that I was able to successfully incorporate the canvas using a MeshBasicMaterial and PlaneGeometry. However, I encountered a problem where the canvas was drawn but the video was not rendered: canvas rendering issue

Here is the code snippet:

var canvas=document.createElement("canvas");
canvas.width=512;
canvas.height=512;  
var video=document.createElement("video");
streamVideo(video);
var canvasContext=canvas.getContext("2d");
var glCanvas=document.createElement("canvas");
var renderer_webgl=new THREE.WebGLRenderer({canvas:glCanvas});
renderer_webgl.setSize(512,512);
renderer_webgl.autoClear=false;
document.getElementById("container").appendChild(glCanvas);
var camera = new THREE.Camera();
var scene=new THREE.Scene();
var geometry=new THREE.PlaneGeometry(2,2,0);
var texture=new THREE.Texture(canvas);
var material=new THREE.MeshBasicMaterial({
            map:texture,
            depthTest:false,
            depthWrite:false
        });
var mesh=new THREE.Mesh(geometry,material);

canvas_draw=document.createElement("canvas");
        canvas_draw.width=128;
        canvas_draw.height=128;
        ctx=canvas_draw.getContext("2d");
        ctx.fillStyle = "#AAA";
        ctx.fillRect(1,1,20,25);
// INSERT THE CANVAS HERE
var texture_canvas=new THREE.Texture(canvas_draw);
texture_canvas.needsUpdate=true;
var basic_material_canvas=new THREE.MeshBasicMaterial({
    map:texture_canvas
});
var mesh_canvas=new THREE.Mesh(new THREE.PlaneGeometry(2,2,0),basic_material_canvas);
scene.add(mesh);
scene.add(mesh_canvas);
function renderScenes(){
    renderer_webgl.render(scene,camera);
}

function loop(){
    if(video.readyState===video.HAVE_ENOUGH_DATA){
        canvas.changed=true;
        canvasContext.drawImage(video,0,0);
        verifyDetector();
        texture.needsUpdate=true;
        texture_canvas.needsUpdate=true;
        renderScenes();
    }

    requestAnimationFrame(loop);
}
loop();

function verifyDetector(){
    detector = new AR.Detector();
    imageData = canvasContext.getImageData(0, 0, canvas.width, canvas.height);
    var markers = detector.detect(imageData);
    /*if(markers.length>0)
        canvasContext.drawImage(canvas_draw,markers[0].corners[0].x,markers[0].corners[0].y);               
        */
}

Why is this happening?

Guide to implementing a mesh inside a WebGL renderer in Three JS by adding a canvas

Answer №1

Answer №2

Similar questions

Is there a way for me to determine the exact coordinates of all buttons on a given webpage?

Tips for simultaneously updating a value in multiple collections on firestore?

Incorporating Meteor js into an established user system

Avoid activating jQuery functions based on certain screen widths for menu/navigation system

Dynamic SVG positioning

Creating a Step-by-Step Sequential Slider

What is the best way to change the class of an input using jQuery when it is not empty?

Issue: Unable to locate module 'js-yaml' while executing npm start command

What is the best way to transfer data from one function to another file in React without directly calling the component or using props?

Angular directive has issues with $compile functionality

Having trouble getting the jQuery AJAX post syntax to work properly

Utilize Browserify to Dynamically Load all Files within a Directory

Sorting an array by item type involves prioritizing strings first, followed by floats and integers, while maintaining the original order of each type without utilizing additional arrays

Fixing the Angular2 glitch: 'Uncaught TypeError: Cannot read property 'apply' of undefined'

Feeling a bit lost on my first JQuery project, could use some

Securing client-side code with AngularJS for enhanced security

Implementing dropdown filtering for nested ng-repeats in Angular application

What is the best way to handle errors in the front-end when receiving responses from expressjs?

"Exclusive Mui sx styles will be applied only when a specific breakpoint

Angular tutorial: Loading Excel file with header located on row n