Websites are are widely used among all the ages. People from all over the world know the standard form of websites (like the one you are visiting now), but the coming generation is full of surprising things that'll never be expected. So, 3D amazing graphics are the most exciting things ever, and they become available online with lots of features that blows the mind. No one expected that browsers will render 3D! But not even this, they are also able to work with AR & VR. Anyway, what are these technologies and how they work? Keep on to know that.

@pixabay.com

What Is WebGL?

As mentioned in Wikipedia, it is the abbreviation of the phrase Web Graphics Library which allows users to render 2D and 3D graphics in the site. It is a Javascript API that will render "3D" into any suitable browser. The browser's fully featuring WebGL are nearly every new version of any browser with the consideration of a good graphics card, but also mobile devices are supporting WebGL which means that you don't need to worry about your graphics card.

How Can Website Developers Use It?

Of course, you are thinking how can people use it, and how the results look like. This is why I am writing this article. Mainly, WebGL API is hard to deal with as a Javascript developer, but there are always some great people who work to let us use those techniques easily (i.e. they create libraries). After all, the well-known libraries and programs used for making a 3D web app are:

Three.js

@Three.js Official Site

This library is a simple visualization library (as Visartech cited in Medium), but, anyhow, I prefer it the most between others. It offers some great abilities that can be used to make many unique 3D renders inside the web app. I used it in many of my own projects, and many others, like Bruno, made an outstanding sites with Three.js. Ricardo Cabello (Mr.doob) is the main author or developer of this great library. It was first published to Github in 2010, and until today, it is in the same place. It's an open source library under the MIT License, and it's completely free. It has many great features, and those are some of them.

A screenshot for Three.js editor

Features

• Effects: like anaglyph, cross-eyed, and parallax barrier,
• Scenes: to manage your 3D elements under one scene or more,
• Cameras: and it really offers some great types such as perspective and orthographic cameras with amazing controllers,
• Animation: where it has armatures, forward kinematics, inverse kinematics, morph, and keyframes,
• Lights: ambient, direction, point, and spot lights, and it is able to cast shadow,
• Materials: Lambert, Phong, smooth shading, textures, and many more,
• Shaders: lens flare, depth pass, and extensive post-processing library with the full accessibility to OpenGL Shading Language (GLSL),
• Objects: meshes, particles, sprites, lines, ribbons, many others,
• Geometry: plane, cube, sphere, torus, and many of other 3D geometries,
• Utilities: full set of time and 3D math functions including frustum, matrix, quaternion, UVs, and more,
• Export and import: utilities to create Three.js-compatible JSON files from within: Blender, openCTM, FBX, Max, OBJ, and some others,
• Virtual and Augmented Reality (VR & AR) via WebXR, and
• Many many other features.

PlayCanvas

@PlayCanvas Official Site

PlayCanvas (as mentioned in Wikipedia) is an open-source 3D game engine/ interactive 3D application engine alongside a proprietary cloud-hosted creation platform that allows for simultaneous editing from multiple computers via a browser-based interface. It is mainly used for games, which is not that strong in three.js, and sophisticated web interactivity UX. It is a well-made library that is more likely to be used as a standalone software. And, like three.js, it works with only Javascript and WebGL API. I didn't really used this library, but others used it and made some amazing games.

How it looks while working.

Features

As it can be described in easy way. It has every feature Three.js has, but this one works more likely as a standalone software (as mentioned above). It has something called "Collaborative Real-Time Editor". So, this way, you will be enforced to have a good graphic card to work on, but fortunately, the final result works on any device depending on the graphics settings you set in your project. It is made for teamwork. So if you are planning to work with a team, PlayCanvas is the best for you. This one was used from many big companies like Disney, but you should bear in mind that it charges for 50$ monthly. Any way it is an open source project hosted in Github, too which is great since you'll be able to learn it first then invest in it.

Babylon.js

@Babylon.js Official Site

It is a real time 3D engine using a JavaScript library for displaying 3D graphics in a web browser via HTML5 (as cited in Wikipedia). It is very comparable to PlayCanvas, but it has a bit less advanced user Interface in their editor. On the other hand, it is free and that is why many people use it. I think I can't say more about this library/program since it has all the features mentioned above, and it is free.

Unity

@Unity Technologies Official Site

It is a separated software made by C# & C++. It is mainly used for multiple platform games development, which allows developers to make one game and just render it for IOS, Android, Console, Windows and Mac. It used to support Javascript, but it is better for you to learn C# with tons of tutorials online. It is well-known all over the world because of its simple nature. Anyone can make something great form the first week of learning. Additionally, it has a free version with no limitations on its abilities alongside the Plus and Pro versions. It can make nearly anything with 3D, and I include it here since it can render an HTML5 game/app that can be published online, but as it can create a high-quality 3D renderer, it can't work on mobile devices.

Note that Unity WebGL content is not currently supported on mobile devices. It may still work, especially on high-end devices, but many current devices are not powerful enough and don’t have enough memory to support Unity WebGL content well. For this reason, Unity WebGL shows a warning message when trying to load content on mobile browsers (which can be disabled if needed). @Unity Manual

But all this is not a big deal. You can build your app and then just render it in every device alone with a better experience for the user whether it is for flat screen or AR & VR.

Unity's Work

Its features are countless since it is a high-quality game engine, but once you know the games made with it, you may feel different about it. Games like The Room, Fall Gays, Monument Valley, and 12 Minutes. Those are only the ones I remember while there are million other great games over there. If you are interested to know more about it you can check their website. They have a list of the best games of the year made with Unity.

Final Thoughts

After mentioning those libraries and programs, I can't say more than that my choice were Three.js and Unity since they really fulfilled all my needs. I'm already working on a project using Three.js while Unity was my main door to enter the world of programming and web development. But even PlayCanvas is a good choice that I can recommend you to go forward to it. Babylon.js is a good option, but you may find some difficulties on the way you use it.