Basics of WebGL
- Front-end development foundation: familiar with HTML, CSS and JavaScript.
- Mathematical foundation: understand vector, matrix operations, linear algebra and basic geometric concepts.
- Graphics foundation: master basic computer graphics principles, such as lighting, texture, transformation, projection, etc.
- Basic use of WebGL API, including creating canvas, shader, program, buffer, etc.
- Understand the rendering process and pipeline of WebGL, including vertex processing, triangle clipping, lighting, texture mapping, etc.
- Master the commonly used libraries and frameworks in WebGL programming, such as Three.js, Babylon.js, etc.
- Familiar with the browser’s debugging tools, and be able to view and debug the running status and performance issues of WebGL applications.
WebGL application areas:
- Game development: WebGL can be used to create high-quality 3D games. Since it can be implemented in a web browser, users can play games without installing any plug-ins or software.
- Data visualization: WebGL can help developers implement more efficient and interactive data visualization applications on the Web, such as maps, charts, flowcharts, etc.
- Architecture and engineering: WebGL can help architects and engineers create 3D models for designing and simulating buildings and engineering structures.
- Advertising and promotion: WebGL can be used to create rich and eye-catching advertisements, such as interactive product demonstrations and browser game ads.
- Visual arts: WebGL can be used to create artworks and digital exhibitions, such as exhibitions and virtual museums.
- Virtual reality and augmented reality: WebGL can be used to create virtual reality and augmented reality applications, such as virtual tours and real-time guidance.
- E-commerce: WebGL can be used to build immersive product displays where users can rotate, zoom, and view products to better understand them.
- Education and training: WebGL can be used to create education and training applications, such as simulators and virtual laboratories.
WebGL library
Three.js (https://threejs.org/)
- Introduction: One of the most widely used WebGL libraries, providing a rich and easy-to-use API, supporting various 3D objects, materials, textures, lighting, animation, physical simulation, post-processing effects, etc.
- Advantages: Highly modular, with a large ecosystem, a large number of plug-ins, examples and tutorials; supports VR/AR development; has good support for WebGL 2.0.
- Applicable scenarios: Suitable for rapid development of complex 3D scenes, games, data visualization applications, especially for developers who are not familiar with graphics programming.
Babylon.js (https://www.babylonjs.com/)
- Introduction: Another powerful WebGL library that emphasizes ease of use and performance, with rich 3D functions and tool chains.
- Advantages: Powerful scene editor (Babylon.js Playground), intuitive resource management and loading system, good support for WebXR (VR/AR), rich documentation and tutorials.
- Applicable scenarios: Suitable for developing interactive 3D applications, games, educational software, CAD visualization, etc., especially for developers who want fast iteration and visual programming.
PixiJS (https://pixijs.com/)
- Introduction: Focusing on 2D rendering, providing efficient WebGL and Canvas2D rendering backends, suitable for high-performance HTML5 games and interactive applications.
- Advantages: Excellent performance optimization, good cross-platform compatibility, intuitive API design, support for sprite animation, filters, particle systems, skeletal animation, etc.
- Applicable scenarios: Suitable for developing 2D games, advertising, animation, data visualization, especially high-performance applications that need to take into account both desktop and mobile devices.
PhiloGL (https://github.com/senchalabs/philogl)
- Introduction: An earlier WebGL library that provides a simplified API and rich graphics functions, while integrating some scientific computing and data visualization tools.
- Advantages: Built-in data analysis and visualization tools, suitable for scientific research and education scenarios; provides a complete set of WebGL development workflows.
- Applicable scenarios: Suitable for applications that require the combination of graphics and data processing, such as scientific computing, data visualization, and educational presentations.
A-Frame (https://aframe.io/)
- Introduction: A VR/AR framework built on Three.js that uses HTML-like syntax to declaratively create virtual reality experiences.
- Advantages: Easy to learn, no need for in-depth knowledge of JavaScript or WebGL to quickly develop VR content; good community support and expansion ecology.
- Applicable scenarios: Suitable for quickly creating WebVR experiences and simple 3D content display, especially for non-professional developers and designers.
regl (https://github.com/regl-project/regl)
- Introduction: A low-level WebGL encapsulation library that emphasizes performance and flexibility and provides an imperative programming style.
- Advantages: Extremely high performance optimization, suitable for scenarios that require fine control of the graphics rendering process; the API design is simple and easy to understand.
- Applicable scenarios: Suitable for developers with extremely high performance requirements, who need a custom rendering pipeline, or who have a deep understanding of WebGL.
OGL (https://github.com/oframe/ogl)
- Introduction: A small and sophisticated WebGL library that provides a simple and efficient interface for developers who like to write shaders directly.
- Advantages: Zero dependency, lightweight, good exposure to the underlying WebGL, suitable for learning WebGL principles and practices.
- Applicable scenarios: Suitable for developers who have a certain understanding of WebGL and pursue simplicity and control, as well as small, high-performance 3D projects.
luma.gl (https://luma.gl/)
- Introduction: A WebGL library focusing on big data visualization and GPU computing, providing high-level APIs and optimized data processing pipelines.
- Advantages: High performance, large-scale data rendering, closely integrated with deck.gl (geospatial visualization library), and support for WebGPU.
- Applicable scenarios: 3D visualization of large data sets, GIS applications, and front-end rendering components of big data analysis platforms.
WebGL learning materials
MDN Web Docs: WebGL: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API
WebGL Fundamentals: https://webglfundamentals.org/webgl/lessons/zh_cn/
WebGL Academy: https://www.webglacademy.com/
WebGL Chinese website (http://www.hewebgl.com/): It is the leading WebGL learning website in China, providing WebGL introductory tutorials, practical cases, book recommendations and other resources.
webgl3d (http://www.webgl3d.cn/): This website provides a wealth of WebGL tutorials and cases, including basic knowledge, renderers, models, animations and other aspects.
Front-end Luan Dun (https://www.html5rocks.com/zh/tutorials/webgl/webgl_fundamentals/): It is a front-end developer community that provides basic knowledge and practical experience about WebGL.
NetEase Cloud Classroom (https://study.163.com/courses-search?keyword=webgl): provides multiple video courses on WebGL, suitable for beginners and advanced users.
MOOC (https://www.imooc.com/search/?words=webgl): This website provides multiple video courses and practical projects on WebGL, suitable for beginners and advanced users.
Three.js (https://threejs.org/)
WebGL Studio [Online Tool]: https://www.webglstudio.org/ An online WebGL development environment that provides a visual editor and real-time preview functions, suitable for beginners to quickly get started.
Large WebGL Applications
Maps
The most well-known example of WebGL is the topographic view of Google Maps (https://goo.gl/maps/1Q1YxF4zckJ2). Regardless of the form of topographical maps or spatial arrangements, they can benefit from 3D representation.
Medicine
Many complex three-dimensional objects, with their overlapping and intertwined parts, are difficult to grasp. The best example is biology. In an interactive WebGL application, BioDigital Human (https://www.biodigital.com/) brings to life thousands of medically accurate anatomical objects and health conditions.
E-commerce
3D graphics have many uses in online stores, from simple product demonstrations to product customization and realistic previews of different materials.
ThreeKit (https://threekit.com/) builds product configurations and integrates into web stores. They provide 360° images and full WebGL presentations.
Xbox Design Lab (https://xboxdesignlab.xbox.com/en-US/customize) allows you to configure a custom Xbox controller in your browser. The 3D preview automatically focuses on the part you are currently editing and can also be rotated freely.
Meisterschmuck (https://www.meisterschmuck.de/shop/trauringe/) provides highly complex 3D renderings of their wedding rings. Unfortunately, complex renderings can quickly overwhelm your computer or phone.
Floor Planning
FloorPlanning is one of many architectural use cases for 3D graphics that is rapidly transitioning from traditional desktop applications to easily distributed web applications.
Archiogic (https://spaces.archilogic.com/) generates 3D models from existing floor plans. You can choose from a library of furniture and materials to plan your interior.
Roomle (https://www.roomle.com/en/floorplanner) focuses more on the furniture itself and its configuration, but can also arrange and decorate floor plans. Archiogic and Roomle both support interactive tours and WebVR (virtual reality) for exploration.
Architecture Visualization
The boundaries between various architectural solutions are fluid, as most offer a range of features. Therefore, I want to show you two services, one tailored for existing buildings, and one for planned buildings.
Matterport (https://matterport.com/) scans existing houses and apartments and turns them into 3D/VR tours, mixing 360° images with actual models texture-mapped to the scans.
Shapespark (https://www.shapespark.com/) provides real-time architectural visualization for planned or current projects, a significant improvement over the usual pre-rendered static images.
WebVR Showroom (http://showroom.littleworkshop.fr/) is not an actual client project for Little Workshop, but it showcases a mix of furniture customization and architectural visualization, summarizing architectural examples.
Humanitarian Activism
NGOs have successfully used WebGL/WebVR without commercial goals in mind. Amnesty International and Syrian media activists have come together to create a project called Fear of the Sky (http://www.360syria.com/) that uses 360° imagery and Virtual Reality to create an immersive experience showing the devastation caused by barrel bombs in Syria.
Environmental Protection
From human rights activism to environmental protection, the Save the Rainforest (http://rainforest.arkivert.no/) project, a joint effort by the Norwegian Rainforest Foundation and public broadcaster NRK, allows visitors to explore rainforests through WebGL and 360° imagery.
3D Printing Marketplace
If you are a publisher of 3D models, you want to present them in real 3D so that people can see how neat and detailed your models are.
For example, the Thingiverse 3D (https://www.thingiverse.com/) printing platform has an interactive viewer for user models.
However, large commercial companies Pinshape and Sculpteo use streaming solutions to render their interactive viewers on a server. I guess they are concerned about their models being decompiled and stolen and have not yet found a secure solution. This brings me to the next company, which seems to have found the answer.
3D Model Marketplace
Most 3D models are not intended for printing, but for real-time applications.
Sketchfab (https://sketchfab.com/) started out as a real-time 3D viewer and model inspector that allowed artists to properly display their models, including all the shading and post-processing features one might expect from a modern game engine.
Sketchfab now also provides a store for artists to sell their models. Potential buyers trust that the models will work just as well as advertised because they are displayed in real time, rather than screenshots, which can be easily retouched.
Game Engines
Games are the first example of WebGL that comes to mind, which is why I wanted to name two of the most popular game engines for the web platform.
Unity (https://beta.unity3d.com/jonas/AngryBots/) is the most popular game development platform and offers a WebGL build option. However, development is disconnected from any web technology. They also recently dropped support for JavaScript to focus on work in C#.
PlayCanvas (https://playcanvas.com/) is another open source engine for making games and interactive 3D content. Unlike Unity, its applications are written in HTML and JavaScript. This, along with its smaller application size and faster loading times, makes it a popular alternative to Unity, especially on low-end and mobile devices.
Magazines and Newspapers
The applicability of 3D graphics is not limited to highly interactive applications. They can also be used to enhance magazine or newspaper articles.
National Geographic (https://www.nationalgeographic.com/magazine/graphics/nodosaur-3d-interactive-dinosaur-fossil) (National Geographic) magazine often uses 3D technology to enhance the readability of their articles, just as they did with dinosaur fossils. It is shown in different perspectives, with various annotations as you scroll, and can be explored freely at the end of the article.
The New York Times used WebGL to show the challenge of the first climb of El Capitan’s Dawn Wall, a vertical, almost smooth piece of granite that many consider to be the world’s toughest climb.
3D Modeling
In addition to advanced demonstrations of 3D models, scenes and walkthroughs, there are also digital content creation tools on the web.
SculptGL (https://stephaneginier.com/sculptgl/) is an online sculpting application similar to Pixologic ZBrush or Autodesk Mudbox. Sketchfab has forked the application and created the similar Sculptfab. (https://labs.sketchfab.com/sculptfab/)
Google’s SketchUp (https://app.sketchup.com/app?hl=en) is a 3D modeling software that is easy for beginners to learn and has a web version since November 2017.
CAD
To complete the 3D modeling options on the web, there are also computer-aided design (CAD) applications for precision engineering.
Onshape (https://www.onshape.com/) is a CAD solution provided via SaaS (Software as a Service). The editor uses WebGL, performing complex processing and rendering on their servers.
Car Configurator
Apart from the construction and real estate industries, the automotive industry is probably the industry that uses WebGL the most.
Luxury high-performance wheel manufacturer Vossen offers the Vossen3D (http://vossen3d.com/) configurator. It has a large selection of wheels and cars to choose from. The underlying software was developed by Andari Systems.
Many car manufacturers try to attract large automakers and sell configuration solutions, like Xymatic’s BMW 7 Series configurator, which is also optimized for smartphones.
With advances in WebGL implementations of complex shading, realistic depictions of car paint options are becoming feasible, like VisCircle’s Volkswagen Polo configurator.
Marketing
However, if you want to understand the appeal of WebGL to the automotive industry, you don’t have to think about configuration. There are a lot of marketing and product landing pages that could be greatly enhanced with 3D graphics.
Inside Renault Kadjar, (http://kadjar-vr.littleworkshop.fr/) is a collaborative project between Renault, Little Workshop, and Oculus that lets you explore and customize the interior of a car using WebGL and WebVR.
Finally, WebGL isn’t limited to building complex experiences. It can also be used in subtle ways to add style and visual fluff. For example, the Transmit (https://panic.com/transmit/) product page features an interactive 3D version of the app’s truck logo.
