CODEWITHSUNDEEP
javascriptthree.jsglslwebglshader
Hopploppa
Hopploppa

Reputation: 142

Implement shader with threejs

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.

  1. 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?

  2. 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?

  3. 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.

Upvotes: 1

Views: 400

Answers (1)

TheJim01
TheJim01

Reputation: 8896

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.

Upvotes: 1

Related Questions