Rakasis Posted March 5, 2014 Share Posted March 5, 2014 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! Quote Link to comment Share on other sites More sharing options...
xerver Posted March 5, 2014 Share Posted March 5, 2014 You could render the texture to a canvas, and use that canvas as a texture in three.js Quote Link to comment Share on other sites More sharing options...
Rakasis Posted March 6, 2014 Author Share Posted March 6, 2014 Amazing! Thanks for the tip. I am getting on this right now. Long night ahead... Quote Link to comment Share on other sites More sharing options...
Rakasis Posted March 21, 2014 Author Share Posted March 21, 2014 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. Quote Link to comment Share on other sites More sharing options...
Rakasis Posted March 21, 2014 Author Share Posted March 21, 2014 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. Quote Link to comment Share on other sites More sharing options...
trusktr Posted November 21, 2019 Share Posted November 21, 2019 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? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.