Choosing the right tool for visuals and performance

Questions
,
1

I’m building a site designed as a 3rd person game with a map for user to walk around in, engage with objects and maybe later add multiplayer for chat.

Its mainly going to be used for presentation and information, rather for shopping or gaming.

This is my first REAL big project with TJS, I’ve done many small ones before and know a lot of projects and many amazed me BUT:
I don’t know math and can’t really make cool shaders.

Questions

  1. Is it realistic for me to learn how to make good shaders without knowing Math? Can you send me materials
  2. Any sites with showcases that are similar or more advanced BUT bit more advanced then 1 small scene with points or have very impressive visuals?
  3. How can I plan for performance before building - any good sites on that?

Examples
Inigo Quilez - Rainforest
Alexander Alekseev - Seascape //I know there’s a threejs project similar to this, I’m just showing you the level of detail I’m hoping to achieve

Hoping for some good tips, any information will help thanks

2

100%, if you pick pretty much any random shader chunk of three you’ll see 99% of math is addition, multiplication, or linear interpolation (ie. you transform one value from range 0->1 to range A->B for nice smooth transition between A and B.) Even mathematically-complex things like clouds accumulation transforms complex math into just for-loops of addition or multiplication.

Jamir, Sougen, Elysium, Hordes.io (it’s not three, but still webgl that’s structured similarly to three.)

You can’t unless you know exactly what and how should look. Otherwise you just build and optimise as you go. Use stats-gl / stats-js in dev mode and as soon as FPS becomes unstable / drops below 60, figure out why and just optimise / reduce fanciness.

1 Like
3

amazing community as always thank you mj!

4

The Sougen one got really beautiful design. Any chance there’s some samples around for me to gage from how to create such stars and beautiful night light?