DEV Community

Creating a custom shader in Three.js

Maniflames on January 21, 2019

3D stuff in the browser is awesome. After playing around with threejs for some time and making a mini-game at school I started to like it a lot. A ...
Collapse
 
avasconcelos114 profile image
Andre Vasconcelos

The things you can do in three.js are just mindblowing

I've never gotten as far as writing my own shaders but I dabbled with it when creating my company's website (wanderer.studio) and the sheer possibility of things you can create with it amaze me every time (just look at their example page in their site!)

Thank you for sharing your experiences with three.js :)

Collapse
 
maniflames profile image
Maniflames

Woah, the company website is super nice 👀

Collapse
 
avasconcelos114 profile image
Andre Vasconcelos • Edited

Thanks!

You can make some pretty cool experiences just using the right models. I got mine from turbosquid.com/, they have a bunch of free models you can use to experiment with

Thread Thread
 
maniflames profile image
Maniflames

Woah, this is a site I definitely need. I always tried to find something sepecific in Google Poly but could never really find it. I found a ton after just one search on turbosquid!

Collapse
 
adambernath profile image
adambernath

Have you played with the webgl shader editor yet? this - victhorlopez.github.io/editor/
I'm trying to use the output code as a vertex/fragment shader, but I cant make it work, I don't really know what I'm doing wrong, but mixing the two together would create a really awesome shader editor for three js

Collapse
 
maniflames profile image
Maniflames

No I haven't but it looks cool! The code generated by the environment contains a lot of uniforms, it might be that some of them are defined with a different name in threejs' environment. There are a lot of things that could go wrong though, I've only glanced a bit over the code generated by the example.

Collapse
 
dechamp profile image
DeChamp

This is the first post that finally made me realize thank using 3d on the web, is really not that scary. Thanks for the great post! Also your little game is pretty awesome.

Collapse
 
maniflames profile image
Maniflames

Thanks! Of all people, you saying this actually means a lot to me 😁. I'm glad that nowadays there are a lot of libraries available that make the use of things like 3D this easy. I hope you find a chance to try it out one day!

Collapse
 
anuragsahu profile image
Anurag Sahu

Loved the Effort you put in to,

my learning

the argument you pass in uniform are recoverable by the shaders
Thanks for Helping me fix my code

Collapse
 
mantiq profile image
A.Z.

Great article, finally understand some variables which in some other guides are just put out there with no proper explanation what certain variables are :)

Collapse
 
sujisucoder profile image
Sujith Surendran

did someone tried angular three (NGT)? , we could use three.js more simply there.