Loading canvas textures into Shaders (three.js)

[Rakasis]

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?

[Rakasis]

Nevermind about this. I have realized that the depths of this problem are not something I should be tackling atm. 

[Paul Brzeski]

Damn! Let me know if you ever work it out!

 

I've had some success generating textures inside the shader, but it would be great to do it with the full abilities of the 2D canvas. 

 

What was the issue that stopped you from looking into this?