High level questions about BabylonJS, WebGL and learning shaders & complex rendering techniques

Questions
1

For some background context: I’m a software engineer who jumped into BabylonJS a few months ago with zero knowledge of 3D graphics and, the engine has been nothing but amazing, especially in the beginning in terms of abstracting away all the hairier low-level details. This forum/community and the team behind Babylon have all been amazingly helpful and I can’t thank everyone enough for all the support :pray:

I’m working on a game (some of you may have seen my post in the demos forum), originally I was satisfied with having modest graphics, but the direction of the project has changed and I’m now interested in trying to improve the visual quality.

In the past few weeks I’ve done a bunch of learning (went through this Learn WebGL and have started working my way through The Book of Shaders) - so I’ve got a decent understanding of the rendering pipeline, and how the model/view/transform matrices, lighting, textures, and shaders work (at least at a high level). At the same time I’ve gotten the feeling that I’m way in over my head, relative to my goals, so I had a couple of high-level questions;

  1. I’d like to target graphics of a quality comparable to these examples: PuffPals / Animal Crossing - is this level of graphical quality achievable in a browser on WebGL/Babylon (say on a medium-range GPU, targeting 50-60 FPS), or is it still too early for that? (I imagine it would for sure be possible on WebGPU in the future, but that still seems quite a while away from being truly stable and useable?)

  2. My conclusion at the moment is that figuring it all out myself would likely take years, so I’m thinking of finding help from an expert. Would anyone have ideas on the best places to look? I’ve tried Upwork but there seems to be a severe lack of people available with domain expertise in complex rendering techniques and shaders in WebGL, and of those, the majority of them have experience with ThreeJS only. I’m also going to post a topic in the Service Offers/Requests section of this forum, but any other ideas on where I can look?

  3. Related to 2), given the scarcity of Babylon/WebGL experts, how crazy of an idea would it be to look for someone with extensive experience with shaders and complex rendering but not BabylonJS (or even WebGL)? I’m now reasonably comfortable with the fundamentals of BabylonJS and have gone through the Shaders sections of the documentation, and played around with Babylon’s ShaderMaterial with some very rudimentary shaders. Could it feasibly work if I, say, pair-programmed with a seasoned graphics engineer to integrate shaders into Babylon? What would be things to look out for, or any curveballs, that an experienced graphics engineer would run into when working with WebGL or Babylon for the first time? If I’m completely nuts with this idea, please let me know :smile:

  4. Any general advice for my situation? Even if your advice is that I’m out of my depth and either need to re-adjust my expectations with WebGL, or goals relative to my level of experience, please tell me straight up, it’s much better that I get a reality check now rather than spend more time going nowhere.

  5. If I were to focus on learning and eventually implementing these effects myself, any tips on how best to progress? Would it simply be to continue working my way through The Book Of Shaders, spend a lot of time playing around with and practising writing shaders, and looking up tutorials online? Maybe play around with Babylon’s Node Material Editor tool?

Thanks so much for reading through my wall of text, and I’d be super grateful for any nuggets of wisdom thrown my way in this thread :smile:

1 Like
2

Hi @sairens

This is a lot of questions :slight_smile: I can give my opinion/thoughts here. Others’ might differ.

  1. I think it’s possible, on the web, with a bunch of tricks. Rendering doesn’t seem very complex but asset management will be. So, I’d put a lot of work finding a workflow that help reduce the need of complex and different textures. Use mesh instancing a lot. Use tricks like hue variation in shader to put some variations in meshes and textures.
  2. spoiler alert: yes, it takes years. Some frameworks/api will change. Newer techniques will appear but the core math and knowledge will stay the same. Manipulating vectors, understanding how to use quaternions, when to use them, texture sampling, UV un wrapping… these all have been the same for the last decades. Understanding the fundamentals is important and takes time. Read, do tutorials,…no magic. These fundamentals are true for any platform. Try to port a tutorial demo from OpenGL to WebGL can also be worth doing for example.
  3. I’m not sure to understand this question
  4. keep learning, experimenting, failing eventually. Also, share what you learnt across social networks. You will find more people doing the same as you. It helps a lot.
  5. yes, baby steps but steps anyway. Nothing is too trivial or useless to not experiment and learn from. After a while, things will begin to tick. At the end, every 3D engine is processing meshes and renders triangles on the screen.

Hope it helps :slight_smile:

3 Likes
3

Thanks Cedric!!

To clarify 3), I mean would it be a good/bad/crazy idea to try and work with someone who doesn’t have BabylonJS experience, but is an expert with rendering techniques and implementing shaders on other platforms/frameworks.

As I re-type this question out though, I’m starting to think that the answer is likely either that it’s highly situational/contextual, or probably just not a great idea :thinking:

4

you definitely can share technic/knowledge/… with an expert who doesn’t know much about BJS.
BJS didn’t invent shaders, textures,… the way to use them might be different from 1 engine to another but you can definitely learn from others.

2 Likes
5

Hi @sairens, Welcome to the start of your personal BJS journey!

Coming from a similar software engineering background, I feel where you’re coming from keenly. That’s why I think my upcoming book (shameless plug!) might be something you’ll find of interest.

Without committing (much) thread-jacking, understanding in a practical sense how to connect the dots of documentation, examples, and imagination with BJS is the focus of the book. It can be tough to get comfortable (at least for me) with the idea that there’s never a “right” way to do something, and there’s always multiple avenues that BJS provides to accomplish the same result. Which you choose has more to do with your contextual situation than any specific engineering or math skills, generally speaking IME

HTH!

1 Like
6

Thanks @jelster!!

You’ll be glad to know that I already had your book announcement bookmarked and was planning on ordering it - I’ve actually gone ahead and placed a paperback order for it now :smile:

2 Likes