Three.js custom shader not displaying

Question

I recently started learning about shaders and three.js. I tried to display a shader with a texture but it displays all black.

Here's the codepen: https://codepen.io/LDB95/pen/MxmWNq

These are my uniforms:

uniforms: {
tDiffuse: { value: null },
time: { type: "f", value: 1.0 },
resolution: { type: "v2", value: new THREE.Vector2() },
iChannel0: { type: 't', value: new THREE.TextureLoader().load('https://naqyr37xcg93tizq734pqsx1-wpengine.netdna-ssl.com/wp-content/uploads/2017/11/10-Things-We-Can-Learn-From-the-Incredible-Steve-Jobs.jpg')},
iChannel1: { type: 't', value: new THREE.TextureLoader().load('https://gobelmont.ca/Portals/0/xBlog/uploads/2018/8/30/white%20noise.jpg')},

},

I just can't seem to find the fix. Would be really awesome if someone could help me out here :)

Thanks!

According to the Migration guide, Three.js version 102 changed the way to render to RenderTargets, so the EffectComposer and ShaderPass in the examples might be outdated. For simplicity's sake, you should just import Three.js version 100 for now, until those examples are updated. Additionally, if you look at your console, you're getting a Cross-Origin Request Blocked warning. Your images are not being loaded. You should do a search on what that warning means to find out how to fix it. — M -
– M -, Commented Mar 8, 2019 at 1:07

Mugen87 · Accepted Answer · 2019-03-08 10:58:32Z

2

I'm afraid your codepen is full of mistakes. It seems you are trying to port a shader from shadertoy to three.js, right?

I have removed all errors here but the effect still looks broken: https://codepen.io/anon/pen/XGRVew

Anyway, here are a few things to keep in mind:

You have to assign the textures to the uniforms after you have created the shader pass. Uniforms are cloned for the internal material of ShaderPass. That means textures are cloned, too. The respective needsUpdate flag is not set correctly if you load the texture before the material creation.
As mentioned by @Marquizzo, your texture are blocked for security reasons. I've added some textures from the three.js repo for test purposes.
The following line of code is not necessary since uv coordinates are provided with the geometry. It's not necessary to compute them on-the-fly like shadertoy does. Just use the varying vUv in the fragment shader.
```
vec2 uv = gl_FragCoord.xy / resolution.xy;
```
For such simple one-pass shaders, it's not necessary to use EffectComposer. Try to use an approach similar to this official example.
You always have to ensure that the example files like ShaderPass or EffectComposer match the three.js version in your code. I've changed this in the codepen in order to remove all deprecation warnings.

answered Mar 8, 2019 at 10:58

Mugen87

31.2k4 gold badges34 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

M - Over a year ago

Do you know if the removal of the renderTarget parameter from WebGLRenderer.render() in r102 has affected the EffectComposer examples?

Mugen87 Over a year ago

We updated the examples so they should all work without warnings.

M - Over a year ago

Ah, I thought so. It looks like the Codepen above is using this version from cdn.rawgit, which looks to be the older one compared to this newer version from the examples

Mugen87 Over a year ago

Yep, the versions of the files in the original codepen do not match.

LDB95 Over a year ago

I fixed the effect, just for you to know what I wanted to achieve ! codepen.io/LDB95/pen/YgQxpX

|

Collectives™ on Stack Overflow

Three.js custom shader not displaying

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related