Skip to main content
Updated date:

The Next Generation of Websites Development

Author:

Kebsi is an expert Full-Stack Websites & Games Developer. He worked with all aspects of programming for more than 5+ years.

What Is The Next Generation of Web?

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.

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.

Three.js

The main logo for three.js

The main logo for three.js

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 Simon, 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 of three.js 3D editor

A screenshot of three.js 3D editor

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:

PlayCanvas

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 I am sure once you search for it, you ganna see some great examples.

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

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, and it also serves great features. I think I can't say more about this library/program since it has all the features mentioned above, and it is free.

Unity

The new logo for Unity or Unity3d as known in the past

The new logo for Unity or Unity3d as known in the past

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.

The first thing you ganna see on Unity's official website

The first thing you ganna see on Unity's official website

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.

This content reflects the personal opinions of the author. It is accurate and true to the best of the author’s knowledge and should not be substituted for impartial fact or advice in legal, political, or personal matters.

© 2021 Kebsi

Related Articles