Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Real-Time 3D Graphics with WebGL 2

You're reading from   Real-Time 3D Graphics with WebGL 2 Build interactive 3D applications with JavaScript and WebGL 2 (OpenGL ES 3.0)

Arrow left icon
Product type Paperback
Published in Oct 2018
Publisher Packt
ISBN-13 9781788629690
Length 500 pages
Edition 2nd Edition
Languages
Tools
Arrow right icon
Authors (2):
Arrow left icon
Farhad Ghayour Farhad Ghayour
Author Profile Icon Farhad Ghayour
Farhad Ghayour
Diego Cantor Diego Cantor
Author Profile Icon Diego Cantor
Diego Cantor
Arrow right icon
View More author details
Toc

Table of Contents (14) Chapters Close

Preface 1. Getting Started FREE CHAPTER 2. Rendering 3. Lights 4. Cameras 5. Animations 6. Colors, Depth Testing, and Alpha Blending 7. Textures 8. Picking 9. Putting It All Together 10. Advanced Techniques 11. WebGL 2 Highlights 12. Journey Ahead 13. Other Books You May Enjoy

What This Book Covers

Chapter 1, Getting Started, introduces the HTML5 canvas element and describes how to obtain a WebGL 2 context for it. After that, it discusses the basic structure of a WebGL application. The virtual car showroom application is presented as a demo of the capabilities of WebGL. This application also showcases the different components of a WebGL application.

Chapter 2, Rendering, presents the WebGL API to define, process, and render objects. This chapter also demonstrates how to perform asynchronous geometry loading using AJAX and JSON.

Chapter 3, Lights, introduces ESSL, the shading language for WebGL. This chapter shows how to implement a lighting strategy for the WebGL scene using ESSL shaders. The theory behind shading and reflective lighting models is covered and put into practice through a variety of examples.

Chapter 4, Cameras, illustrates the use of matrix algebra to create and operate cameras in WebGL. The Perspective and Normal matrices that are used in a WebGL scene are also described here. The chapter also shows how to pass these matrices to ESSL shaders so that they can be applied to every vertex. The chapter contains several examples that show how to set up a camera in WebGL.

Chapter 5, Animations, extends the use of matrices to perform geometrical transformations (move, rotate, scale) on scene elements. In this chapter, the concept of matrix stacks is discussed. It is shown how to maintain isolated transformations for every object in the scene using matrix stacks. Also, the chapter describes several animation techniques using matrix stacks and JavaScript timers. A practical demonstration is provided of each technique.

Chapter 6, Colors, Depth Testing, and Alpha Blending, goes into detail about the use of colors in ESSL shaders. This chapter shows how to define and operate with more than one light source in a WebGL scene. It also explains the concepts of depth testing and alpha blending, and shows how these features can be used to create translucent objects. The chapter contains several practical exercises that put these concepts into practice.

Chapter 7, Textures, shows how to create, manage, and map textures in a WebGL scene. The concepts of texture coordinates and texture mapping are presented here. This chapter discusses different mapping techniques that are presented through practical examples. The chapter also shows how to use multiple textures and cube maps.

Chapter 8, Picking, describes a simple implementation of picking, which is the technical term that describes the selection and interaction of the user with objects in the scene. The method described in this chapter calculates mouse-click coordinates and determines whether the user is clicking on any of the objects being rendered in the canvas. The architecture of the solution is presented with several callback hooks that can be used to implement logic-specific application. A couple of examples of picking are given.

Chapter 9, Putting It All Together, ties in the concepts discussed throughout the book. In this chapter, the architecture of the demos is reviewed and the virtual car showroom application outlined in Chapter 1, Getting Started, is revisited and expanded. Using the virtual car showroom as the case study, this chapter shows how to import Blender models into WebGL scenes and how to create ESSL shaders that support the materials used in Blender.

Chapter 10, Advanced Techniques, provides a sample of a number of advanced techniques, including post-processing effects, point sprites, normal mapping, and ray tracing. Each technique is provided with a practical example. After reading this chapter, you will be able to take on more advanced techniques on your own.

Chapter 11, WebGL 2 Highlights, outlines some of the major features and updates to the WebGL 2 specification. This chapter also provides a migration strategy for converting applications based on WebGL1 to WebGL 2.

Chapter 12, Journey Ahead, concludes Real-Time 3D Graphics with WebGL 2 with recommendations regarding techniques, concepts, tools, and communities that readers can leverage on their journey in mastering real-time 3D graphics.

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at €18.99/month. Cancel anytime