Jump to content

Loading canvas textures into Shaders (three.js)


Recommended Posts

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?

Link to comment
Share on other sites

  • 1 month later...

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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...