Rakasis

Members
  • Content Count

    7
  • Joined

  • Last visited

  1. Nevermind about this. I have realized that the depths of this problem are not something I should be tackling atm.
  2. I have an effectsComposer creating a result that is heavy in white. var composer = new THREE.EffectComposer(renderer);var renderPass = new THREE.RenderPass(shaderHeavyScene, camera);composer.render(delta) In the same project I have a material and scene with with a second image loaded into it. When I replace: composer.render(delta); with: renderer.render( secondImageScene, camera ); I can see my secondary image loaded into the three.js canvas. My plan was to multiply the white heavy image of effectsComposer over the secondImageScene. (Revealing secondImageScene through the white) My question is this: How would I go about multiplying the end result of the effectsComposer overtop of secondImageScene?
  3. Hey, so I have a merge going on where I am combining a pixi.js canvas with a three.js environment. In the three.js script I import my pixi canvas like so: var canvas = document.getElementById( 'pixi-canvas' ); var texture = new THREE.Texture( canvas );This texture works as expected when used like this: var material = new THREE.MeshBasicMaterial( { map: texture } ); var mesh = new THREE.Mesh(geometry, material) scene.add(mesh)requestAnimationFrame(function animate(nowMsec) { requestAnimationFrame(animate); texture.needsUpdate = true;...} The issue revolves around using this texture in a shader as a uniform. If I load the texture into the shader ala: uniforms : { ...pixiTexture : { type: "t", value: texture},...}or this pixiTexture : { type: "t", value: new THREE.Texture(document.getElementById( 'pixi-canvas' ))},and all I get is black! Is there a way to debug this? 1. How do I load a texture as a uniform without imgUtils? 2. Where would you set texture.needsUpdate in this situation?
  4. 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.
  5. 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.
  6. Amazing! Thanks for the tip. I am getting on this right now. Long night ahead...
  7. 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!