Sign in to follow this  
Rakasis

Using renderTexture in Three.js

Recommended Posts

Hey, just wondering if it would be possible to export a pixi.js renderTexture so that I can put it into a three.js plane? I have been trying for a while and can't seem to get it to work. 

 

I am doing this because I am trying to use pixi.js with a webcam feed and three.js/threex.js is equipped for this. 

 

If you have any ideas on if this is possible or alternate routes i could take I would be really grateful. Thanks!

Share this post


Link to post
Share on other sites

Ok, really banging my head against a wall with this one. 

 

I feel like it's a bit of scope problem?

 

In my <body> tags I have this;  

 

    <div align="center">
         <canvas id="game-canvas" width="1400" height="720"></canvas>
    </div> 
 
And I also have three.js running inside of a <script> tag. 
 
I am trying to reference 'game canvas' from within the <script> tags like this: 
 
Attempt 1: 
 
    <div align="center">
         <canvas id="game-canvas" width="1400" height="720"></canvas>
    </div> 
 
<script>
          var canvas = document.createElement( 'canvas' );
          canvas.width = 1400; 
          canvas.height = 720;
          canvas.setAttribute("id", "bream-canvas");
          var texture = new THREE.Texture( canvas );
          texture.needsUpdate = true;
          texture.anisotropy = 16
 
          ...
 
          var geometry = new THREE.PlaneGeometry(window.innerWidth, window.innerHeight);
          var material = new THREE.MeshBasicMaterial();
          material.map = texture
          var mesh = new THREE.Mesh(geometry, material)
          scene.add(mesh)
          ...
</script>
 
Attempt 2: 
   
    <div align="center">
         <canvas id="game-canvas" width="1400" height="720"></canvas>
    </div> 
 
<script>
         var canvas = document.getElementById("bream-canvas");
          texture.needsUpdate = true;
 
          ...
 
          var geometry = new THREE.PlaneGeometry(window.innerWidth, window.innerHeight);
          var material = new THREE.MeshBasicMaterial();
          material.map = texture
          var mesh = new THREE.Mesh(geometry, material)
          scene.add(mesh)
          ...
</script>
 
When I run the code the previously visible three.js canvas has gone grey but seems to be running error free. Thoughts? Is this how I should be accessing the pixi.js canvas within the script?
 
Any insight on this would be amazing. I am getting worried.  

Share this post


Link to post
Share on other sites

Murphies Law. I solved this 20 minutes after I broke down and posted on here. 

 

  var canvas = document.getElementById( 'game-canvas' );
           
   var texture = new THREE.Texture( canvas );
 
at the top then I realized I was calling needsUpdate to early so I moved; 
 
                texture.needsUpdate = true;
 
all the way to the bottom of the script to be directly after; 
 
                requestAnimationFrame(animate);
 
 
Cheers. 

Share this post


Link to post
Share on other sites
On 3/5/2014 at 1:14 PM, xerver said:

You could render the texture to a canvas, and use that canvas as a texture in three.js

I wonder how much performance cost that incurs, rendering to one canvas (with the GPU) then taking the image data to Three.js texture, and rendering to another canvas (with GPU). Seems like a lot going on there. Maybe there is an optimized code path underneath in the browsers, for that case?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.