Implement shader with threejs

Question

I've been playing around with the threejs library and creating a basic scene with a bathtub and skybox. You can find my original code (without any shaderimplementation) at; https://liuloppan.github.io/watershader/

Now I want to make a shader for my water using GLSL, but I'm struggling to make it work just linking the vertex- and fragmentshader into a program. Right now I just want a standard blue shader using GLSL, I've looked at the ShaderMaterial function, RawShaderMaterial, and also WebGL tutorials trying to make it work. I have 3 different questions at this point.

With the ShaderMaterial and RawShaderMaterial examples, I noticed that most of the code examples use the ../build/three.js, but I use the minified three.min.js, how much of a difference does it make?
I followed this tutorial; https://aerotwist.com/tutorials/an-introduction-to-shaders-part-1/ I get an error "could not initialise shader" VALIDATE_STATUS false gl error. How to fix this?
Do you know of any alternative up to date examples of shader-implementation with threejs? Most examples I find seem to use some or multiple deprecated methods so that I can't run the examples myself.

there's a great example with the WaterShader.js module.

prisoner849
– prisoner849

2016-11-21 20:48:48 +00:00
Commented Nov 21, 2016 at 20:48 — prisoner849
– prisoner849, Commented Nov 21, 2016 at 20:48

TheJim01 · Accepted Answer · 2016-11-21 22:31:18Z

1

1 > There is no functional difference between full and minified.

2 & 3 > Look for two objects in the three.js code called ShaderLib and ShaderChunk. These are the building blocks for the basic shaders in three.js. Those should help you learn how three.js expects shaders to be assembled, and you can be sure their way is correct for use in three.js.

answered Nov 21, 2016 at 22:31

TheJim01

8,8861 gold badge32 silver badges57 bronze badges

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

Collectives™ on Stack Overflow

Implement shader with threejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related