Discovering the Magic of 3D Visualization
by Aditi Dwivedi in Apps/DevOps, General
We are in the age of visual computing. Much of what we do on computers from mobile phones to computer desktops involves manipulating and displaying visual information. Over the last few years, web browsers have discovered the magic of 3D visualisation. They evolved from simple viewers of HTML & CSS to platforms executing web applications. Now, thanks to the emergence of WebGL a new JavaScript API for rendering interactive 3D graphics in web browsers. Without the help from additional plug-ins its never been easier to bring them all together. With the development of VR and AR applications, brands are increasingly moving towards tactile digital experiences: touchy-feely tech.
First up, what is WebGL?
WebGL– web graphic library, a practical and flexible way to create more immersive 3D content that brings hardware-accelerated 3D graphics to the web browser, without the need for installing additional plugins or downloading extra software. Also, browser support is pretty comprehensive with Chrome, Firefox, IE, Opera and Safari.
WebGL goes some way to solving this issue slow-loading and low-quality graphics, and a hesitance to embrace 3D content. It offers JavaScript plug-in free access to devices graphics hardware via HTML 5 canvas elements, with the 3D visualisation directly into the browser. The result is 3D. The 360-degree result is easier to build by reducing the effort involved in a standalone application or plugin. It is also easier for users to view high quality on the internet.
And what’s Three.js?
Both OpenGL and WebGL are relatively complex. Three.js is here to help you. It’s an open-source library that simplifies the creation of WebGL and environments.Furthermore, it is built on top of WebGL to work as a declarative syntax which makes it easier for designers and developers to manipulate WebGL. It works on the lower level programming involved in developing GPU-accelerated 3D animations.
Let’s do 3D
Let’s start, take a deep breath and open your favorite editor. Now let’s spice it up in a moment and analyze what is happening behind. The first pattern we are going to see in every Three.js app is:
- Creating a Renderer – place where we are going to put our result
- Create a Scene – they can have multiple scenes and each one can have different objects
- Add a Camera – here we pass parameters like the FOV, the Aspect ratio and the near and far plane.
The second pattern is adding objects to the scene:
- Creating a Geometry – a mathematical formula of the vertices of the object we want to add to the scene.
- Adding a Material – a property of an object and its behavior with the light sources of the scene.
- Combining with Mesh – a composition of Geometry and Material
requestAnimationFrame – it allows us to animate the scene.
To conclude, 3D is a large field and running natively in the browser is a lot of fun (think video games, animated movies, virtual reality). Therefore, using an engine like Three.js gives us an easy and fun way to dip our toes in. Furthermore, it takes away our headaches and lets us to make some seriously cool stuff.