Ever stared at a piece of jewelry on your screen and wondered how the sparkle of a diamond or the vibrant color of a ruby ends up looking so realistic or breathtakingly stunning? Or wonder what’s the technology used behind it? Or you may ask, how did we get here?
Well, this blog post is dedicated to answering the question we get asked all the time, "How did you start?"
It’s a BIG thank you post to the incredible tech companies and some seriously smart people for building the foundation.
The Foundations
1. WebGL (Web Graphics Library)
Firstly, we would like to take a moment to appreciate and salute an incredible pioneer who shaped the digital world as we know it today - WebGL. We can’t even think about real-time 3D graphics on the web without WebGL.
WebGL fostered by the Khronos Group is a low-level Javascript API for rendering 2d/3d graphics on most modern browsers, without the need of installing any plugins.
This means that as an end user, all you need is a device where you can browse!
Essentially, if there was no WebGL, there would be no us, and many companies whose technology revolves around WebGL.
We can’t imagine the hard work put in by 100's of contributors in Khronos group, to make WebGL a reality, creating tremendous opportunities for many starters like us.
And now WebGPU is coming up, which will play a really big role in bringing real-time 3d graphics on the web, with huge performance boosts, and more control and power to developers who want to build innovative 3d solutions on the web.
WebGL is the main technology on which many frameworks like three.js, Babylon.js, playcanvas, and many more are built, and directly or indirectly any company in the world which uses 3D technology on the web, uses WebGL.
Hats off to you guys at the Khronos group!
2. Three.js
If WebGL is the skeleton, then Three.js is the flesh behind any work we have been doing. Without this powerhouse, the brilliant jewelry designs you see dazzling on your screens would have been next to impossible.
It is an open-source 3D library, which enables 1000’s of developers to use 3D graphics in their jobs, starters, and ventures.
Not many developers are familiar with core 3D graphics ideas, and Three.js makes their job much easier by encapsulating and abstracting many core 3D ideas.
This saves a lot of time, or else for building any scalable 3D Software product for the web, one needs to write their own framework on top of WebGL, which can occupy a lot of time, deviating you from your original plan of building your Product.
Special thanks to Ricardo Cabello (mrdoob), the creator of the three.js library! We owe so much to this incredibly versatile and powerful JavaScript library.
And let’s not forget hundreds of contributors and the Three.js community who have spent their valuable time enhancing, adding many many features to the library, fixing bugs, and answering questions on Three.js forums.
Without Three.js, we definitely would be struggling to do things at a fast pace.
The Inspirations
1. Unreal Engine
Unreal Engine has been our inspiration from the beginning. They have set a very high standard for quality, and later also open-sourced their Engine.
Whatever you build in Unreal Engine, by default is Awesome!
We have studied a lot of their code, and have been inspired a lot by that, for many shaders and post-processing effects.
Going by their path, we also decided to make many parts of our SDK open source, and this is already a work in progress.
2. Sketchfab
We truly believe that Sketchfab has the best 3D Web viewer in terms of realistic materials, and post-processing effects. They have paid attention to details, made the usage very simple for 3D artists, and created a great ecosystem for the 3D artists.
We have been inspired a lot by them as a high bar for having quality, and even today we believe that Sketchfab remains the best 3D viewer in terms of pure computer graphics.
3. Blender
We have no words to say on how useful Blender has been in our Journey till now, and from now on, we started leveraging this great open-source tool, to create very useful tools/products for our clients.
Specifically, Blender’s Python API is extremely powerful and lets you have full control as a developer to use their powerful tools, modifiers, and many other features.
4. Unity3D
Unity has been the pioneer in getting 3D graphics to the masses with simplified tools and easy to use user experience.
We have taken a lot of inspiration on editor organization and UI/UX from the Unity editor framework along with working on bringing many Unity concepts like packages and plugins to Three.js.
Individual Inspirations
1. Ricardo Cabello(mrdoob)
He needs no Introduction. Creator of three.js, needless to say, remove Ricardo from the equation, and we would be struggling.
2. Inigo Quilez(iq)
Inigo Quilez’s groundbreaking work on Shadertoy unlocked new dimensions of possibilities. His innovative shader coding techniques inspired us and broadened our horizons in rendering breathtaking visuals.
He has created wonderful tutorials on Ray marching techniques using signed distance functions(SDF), and a few of our algorithms were kind of inspired from his tutorials/blogs.
3. Evan Wallace
Evan Wallace's contributions to Figma, a collaborative interface design tool, might seem distant from our world of jewels, but his really cool work on shaders, and a few very clever shader techniques has been very helpful for us.
4. Morgan Mcguire
We have studied so many wonderful papers in Core Computer graphics from him specifically and many of our screen space post-processing techniques have got ideas from there.
Bottom Line
In conclusion, we would like to say that this article is not enough to thank all the above contributors, and we sincerely owe them.
We think the only way to pay back is to contribute back to the community, create inspiring and high-quality work, and add tremendous value to our customers in the products we are building.
Time will tell how this shapes up!
