We live in three dimensions: Many of the 3D configurators we watch are animated. Most games are three-dimensional. And the manufacturers of navigation systems give us the opportunity to virtually explore the places we want to visit. 3D application are now also available on the internet. But what does the term Web 3D mean? What has made Web 3D possible? We bring a little light into the darkness.
Really in Realtime?
The term 3D Web or Web 3D refers to the integration of 3D content calculated in real time into web applications. Just for clarification: Web 3D refers to the rendering of 3D objects in real time with user interaction options. No pre-rendered video clips.
Since browsers are integrated in many end devices today, Web 3D content is plattform-independent and does not require any special operating systems or programs. They work on desktop computers, tablets, smartphones as well as televisions and VR glasses. They can be embedded in websites, apps, VR/AR application, online shops and social media channels. Today, they therefore have just as broad a field of application as text, image and video content. Web 3D content enables the user to enter a virtual scene in which he can move and interact freely.
HTML5: a new medium for visual content.
This was made possible by the development of the new web standard HTML5, the current version of the Hypertext Markup Language (HTML). HTML has undergone a long development process. It all started with static pages, forms and submit buttons. The graphical features were very limited by HTML and CSS. If you wanted to integrate effects and features, you had to rely on third-party plugins like Flash or Quicktime.
With the introduction of HTML5 a lot has changed. It brings syntax improvements, new JavaScript language extensions and interfaces. It also includes – in combination with CSS3 – a set of advanced graphical capabilities and multimedia content support. What most developers understand by HTML5 is a collection of technologies and standards. Some of them have already been ratified by the W3C consortium and are supported by all browsers. Others are not standards, but are supported by most modern browsers. Still other – like WebGL – are widely used standards. However, they are not controlled by the W3C.
What`s WebGL?
WebGL is the abbreviation for Web Graphics Library. It allows 3D graphics to be displayed directly in the browser, without additional plug-ins. WebGL itself is not a 3D engine, but a JavaScript programming interface for web browsers based on OpenGL ES 2.0. WebGL is often called in connection with HTML5, although it is actually not part of it at all. It uses HTML5 canvas elements to display WebGL content and integrate it directly into HTML.
Basically there is the possibility to develop WebGL applications natively. This approach requires a sound knowledge of programming and mathematics in the areas of matrix calculation and spatial geometry. Programmers have to learn the OpenGL Shading Language. However, it is very difficult and expensive to find specialists in this field.
Fortunately, in recent years a number of tools and frameworks have emerged that make programming WebGL applications easier.
Three.js – all good things are 3.
One example is three.js. Three.js is a slim JavaScript library that provides easy access to WebGL. Developers need to write very little code to get results quickly. It has already integrated many standard functions to render complex scenes. While WebGL requires hundreds of lines of code to render a simple 3D object, Three.js only requires a few lines of code. Today, Three.js has become a fixed standard in the development of real time 3D applications with WebGL.
„Three.js is a slim JavaScript library that provides easy access to WebGL.“
Another way to develop lean 3D applications with WebGL is to use Sketchfab. Sketchfab is a commercial service developed on the JavaScript library OSC.js (an alternative API to Three.js). It is a web service used to display, share and embed 3D content in web applications. Like YouTube for videos, Sketchfab is a player for 3D objects, is to speak. Sketchfab uses the WebGL JavaScript API to display 3D models. It provides hosting and player functionality as well as a simple editor to place and highlight 3D models. In contrast to Three.js, however, no complex edits can be made, scripts for sequences can be written, etc. and the Sketchfab player must always be used to display the 3D objects.
In addition to the examples above, there are a number of other tools, editors and frameworks that make working with WebGL easier.
Summary.
The introduction of HTML5 has made it possible to develop web-based applications for the masses. WebGL allows 3D content to be displayed in the browser. They work on smartphones as well as on the tablets, computers, VR glasses or other devices that have a browser. JavaScript frameworks such as Three.js can be used to program Web 3D applications relatively easily and quickly.
Leave A Comment