Leveraging the power of WebRTC and ThreeJS to craft a visually stunning brushed metal texture

Question

Leveraging the power of WebRTC and ThreeJS to craft a visually stunning brushed metal texture

I am experimenting with applying a real-time camera feed onto a rotating cube using

THREE.ImageUtils.loadTextureCube()

.

So far, I have successfully applied a basic texture from my video to a MeshLambertMaterial:

var geometry = new THREE.CubeGeometry(100, 100, 100, 10, 10, 10);
videoTexture = new THREE.Texture( Video ); // "Video" is my <video> element
var material = new THREE.MeshLambertMaterial({ map: videoTexture });
Cube = new THREE.Mesh(geometry, material);
Scene.add( Cube );

You can view the result at

Now, I want to use this video stream to create a brushed metal texture. However, when attempting to create a different type of material, I encountered an error:

var videoSource = decodeURIComponent(Video.src);
var environment = THREE.ImageUtils.loadTextureCube([videoSource, // left
                                                    videoSource, // right
                                                    videoSource, // top
                                                    videoSource, // bottom
                                                    videoSource, // front
                                                    videoSource]); // back
var material = new THREE.MeshPhongMaterial({ envMap: environment });

The error received was:

blob:http://localhost/dad58cd1-1557-41dd-beed-dbfea4c340db 404 (Not Found)

It appears that loadTextureCube() expects image parameters but does not accept videoSources.

As a beginner in Three.js, I am wondering if there is a workaround for this issue?

Thank you, jmpp

javascript textures webgl three.js webrtc

Answer 1

Answer №1

If you're looking to enhance the appearance of an image, there are a couple of approaches you can take. The first method involves adding specular highlights and shininess by adjusting the material in your code from MeshLambertMaterial to MeshPhongMaterial:

var material = new THREE.MeshPhongMaterial({ 
         map: texture , 
         ambient: 0x030303, 
         specular: 0xffffff, 
         shininess: 90
});

You can then experiment with different values for ambient, specular, and shininess to achieve the desired effect.

The second option is to directly manipulate the pixels of the video image using a canvas before applying it as a texture. This process can also be achieved through custom shaders or libraries that handle image filtering. Here's an example using a canvas:

var ctx = document.getElementById('testCanvas').getContext('2d');
texture = new THREE.Texture();

// during rendering loop
ctx.drawImage(Video,0,0);
var img = ctx.getImageData(0,0,c.width,c.height);
// perform pixel manipulation on the img.data array
// then assign the modified image back to the texture
texture.image = img;

texture.needsUpdate = true;

New Approach!

An alternative method involves using the video as an envMap but requires resizing it to a power of 2 with equal width and height. By cropping the video stream and applying it as an envMap, you can achieve a similar effect without extensive manipulations. Here's how you can implement this:

// Accessing camera part
 var canvas = document.createElement('canvas')
     canvas.width = 512;
     canvas.height = 512;
 ctx = canvas.getContext('2d');   

 // During render loop 
 ctx.drawImage(Video,0,0, 512, 512);
 img = ctx.getImageData(0,0,512,512);

// When using an envMap, provide an array of images instead of just one
 cubeVideo.image = [img,img,img,img,img,img];
 if (Video.readyState === Video.HAVE_ENOUGH_DATA)
     cubeVideo.needsUpdate = true;

Answer 2

If you're looking to enhance the appearance of an image, there are a couple of approaches you can take. The first method involves adding specular highlights and shininess by adjusting the material in your code from MeshLambertMaterial to MeshPhongMaterial:

var material = new THREE.MeshPhongMaterial({ 
         map: texture , 
         ambient: 0x030303, 
         specular: 0xffffff, 
         shininess: 90
});

You can then experiment with different values for ambient, specular, and shininess to achieve the desired effect.

The second option is to directly manipulate the pixels of the video image using a canvas before applying it as a texture. This process can also be achieved through custom shaders or libraries that handle image filtering. Here's an example using a canvas:

var ctx = document.getElementById('testCanvas').getContext('2d');
texture = new THREE.Texture();

// during rendering loop
ctx.drawImage(Video,0,0);
var img = ctx.getImageData(0,0,c.width,c.height);
// perform pixel manipulation on the img.data array
// then assign the modified image back to the texture
texture.image = img;

texture.needsUpdate = true;

New Approach!

An alternative method involves using the video as an envMap but requires resizing it to a power of 2 with equal width and height. By cropping the video stream and applying it as an envMap, you can achieve a similar effect without extensive manipulations. Here's how you can implement this:

// Accessing camera part
 var canvas = document.createElement('canvas')
     canvas.width = 512;
     canvas.height = 512;
 ctx = canvas.getContext('2d');   

 // During render loop 
 ctx.drawImage(Video,0,0, 512, 512);
 img = ctx.getImageData(0,0,512,512);

// When using an envMap, provide an array of images instead of just one
 cubeVideo.image = [img,img,img,img,img,img];
 if (Video.readyState === Video.HAVE_ENOUGH_DATA)
     cubeVideo.needsUpdate = true;

Answer 3

Answer №2

Give this a shot:

let sceneBackground = new THREE.Texture( [ Video, Video, Video, Video, Video, Video ] );
let shinyMaterial = new THREE.MeshPhongMaterial({ envMap: sceneBackground });

// make sure to call this in your animation loop
sceneBackground.needsUpdate = true;

Answer 4

Give this a shot:

let sceneBackground = new THREE.Texture( [ Video, Video, Video, Video, Video, Video ] );
let shinyMaterial = new THREE.MeshPhongMaterial({ envMap: sceneBackground });

// make sure to call this in your animation loop
sceneBackground.needsUpdate = true;

Answer 5

Answer №3

Finally, after some tinkering, I was able to achieve a dazzling shine effect on the cube using a Phong material :

videoTexture = new THREE.Texture( Video );
var material = new THREE.MeshPhongMaterial({
    map: videoTexture,
    ambient: 0x030303,
    specular: 0xc0c0c0,
    shininess: 25
});

The result is quite impressive.

However, it appears that using

THREE.Texture([Video,Video,Video,Video,Video,Video]);

as an envMap doesn't work as expected. The cube remains black despite my efforts.

Answer 6

Finally, after some tinkering, I was able to achieve a dazzling shine effect on the cube using a Phong material :

videoTexture = new THREE.Texture( Video );
var material = new THREE.MeshPhongMaterial({
    map: videoTexture,
    ambient: 0x030303,
    specular: 0xc0c0c0,
    shininess: 25
});

The result is quite impressive.

However, it appears that using

THREE.Texture([Video,Video,Video,Video,Video,Video]);

as an envMap doesn't work as expected. The cube remains black despite my efforts.

Leveraging the power of WebRTC and ThreeJS to craft a visually stunning brushed metal texture

Answer №1

New Approach!

Answer №2

Answer №3

Similar questions

The uncomplicated bar graph and its corresponding axis line up perfectly beside each other in an SVG diagram

Issue with series of node commands getting stuck on npx command

Issue with shadows not functioning properly on version r72

Implementing an active state for the initial item in jCarousel Lite

Exploring the concept of unprojection in three.js

How can I access a list in the code behind of an ASPX file and iterate through it using JavaScript in a foreach

Locate the midpoint between two triangles in ThreeJS

JavaScript code to change an array into a stringified format

Undefined global variable

What is the best way to ensure that an mp3 file plays seamlessly across all pages?

Troubleshooting the issue of SDL2 displaying OpenGL textures improperly

How about checking the memory usage in Javascript?

Javascript is failing to fetch the desired text

Tips for effectively reusing the modal component in Vue.js without encountering re-render issues

Tips for transferring data and executing a PHP script without page refresh

Transferring an array from PHP to JavaScript via an Ajax response

Have you opened the DIV in a separate tab yet?

When implementing asynchronous form control validation in Angular 2, several API requests are triggered

Tips for maintaining JSON data in CK Editor

Struggling to navigate web pages with Selenium using Java is proving to be a challenge