Book description
If you’re a JavaScript developer who wants to take the plunge into 3D web development, this is the perfect primer. From a basic understanding of WebGL structure to creating realistic 3D scenes, everything you need is here.
- Dive headfirst into 3D web application development using WebGL and JavaScript.
- Each chapter is loaded with code examples and exercises that allow the reader to quickly learn the various concepts associated with 3D web development
- The only software that the reader needs to run the examples is an HTML5 enabled modern web browser. No additional tools needed.
- A practical beginner's guide with a fast paced but friendly and engaging approach towards 3D web development
In Detail
WebGL is a new web technology that brings hardware-accelerated 3D graphics to the browser without installing additional software. As WebGL is based on OpenGL and brings in a new concept of 3D graphics programming to web development, it may seem unfamiliar to even experienced Web developers.
Packed with many examples, this book shows how WebGL can be easy to learn despite its unfriendly appearance. Each chapter addresses one of the important aspects of 3D graphics programming and presents different alternatives for its implementation. The topics are always associated with exercises that will allow the reader to put the concepts to the test in an immediate manner.
WebGL Beginner's Guide presents a clear road map to learning WebGL. Each chapter starts with a summary of the learning goals for the chapter, followed by a detailed description of each topic. The book offers example-rich, up-to-date introductions to a wide range of essential WebGL topics, including drawing, color, texture, transformations, framebuffers, light, surfaces, geometry, and more. With each chapter, you will “level up” your 3D graphics programming skills. This book will become your trustworthy companion filled with the information required to develop cool-looking 3D web applications with WebGL and JavaScript.
Table of contents
-
WebGL Beginner's Guide
- Table of Contents
- WebGL Beginner's Guide
- Credits
- About the Authors
- Acknowledgement
- About the Reviewers
- www.PacktPub.com
- Preface
-
1. Getting Started with WebGL
- System requirements
- What kind of rendering does WebGL offer?
- Structure of a WebGL application
- Creating an HTML5 canvas
- Time for action – creating an HTML5 canvas
- Accessing a WebGL context
- Time for action – accessing the WebGL context
- WebGL is a state machine
- Time for action – setting up WebGL context attributes
- Loading a 3D scene
- Time for action – visualizing a finished scene
- Summary
-
2. Rendering Geometry
- Vertices and Indices
- Overview of WebGL's rendering pipeline
- Rendering geometry in WebGL
- Putting everything together
- Time for action – rendering a square
- Rendering modes
- Time for action – rendering modes
- WebGL as a state machine: buffer manipulation
- Time for action – enquiring on the state of buffers
- Advanced geometry loading techniques: JavaScript Object Notation (JSON) and AJAX
- Time for action – JSON encoding and decoding
- Time for action – loading a cone with AJAX + JSON
- Summary
-
3. Lights!
- Lights, normals, and materials
- Using lights, normals, and materials in the pipeline
- Shading methods and light reflection models
- ESSL—OpenGL ES Shading Language
- Writing ESSL programs
- Time for action – updating uniforms in real time
- Time for action – Goraud shading
- Time for action – Phong shading with Phong lighting
- Back to WebGL
- Bridging the gap between WebGL and ESSL
- Time for action – working on the wall
- More on lights: positional lights
- Time for action – positional lights in action
- Summary
-
4. Camera
- WebGL does not have cameras
- Vertex transformations
- Normal transformations
- WebGL implementation
- The Model-View matrix
- The Camera matrix
- Time for action – exploring translations: world space versus camera space
- Time for action – exploring rotations: world space versus camera space
- Basic camera types
- Time for action – exploring the Nissan GTX
- The Perspective matrix
- Time for action – orthographic and perspective projections
- Structure of the WebGL examples
- Summary
- 5. Action
-
6. Colors, Depth Testing, and Alpha Blending
- Using colors in WebGL
- Use of color in objects
- Time for action – coloring the cube
- Use of color in lights
- Architectural updates
- Time for action – adding a blue light to a scene
- Time for action – adding a white light to a scene
- Time for action – directional point lights
- Use of color in the scene
- Depth testing
- Alpha blending
- Time for action – blending workbench
- Creating transparent objects
- Time for action – culling
- Time for action – creating a transparent wall
- Summary
-
7. Textures
- What is texture mapping?
- Creating and uploading a texture
- Using texture coordinates
- Using textures in a shader
- Time for action – texturing the cube
- Texture filter modes
- Time for action – trying different filter modes
- Texture wrapping
- Time for action – trying different wrap modes
- Using multiple textures
- Time for action – using multitexturing
- Cube maps
- Time for action – trying out cube maps
- Summary
-
8. Picking
- Picking
- Setting up an offscreen framebuffer
- Assigning one color per object in the scene
- Rendering to an offscreen framebuffer
- Clicking on the canvas
- Reading pixels from the offscreen framebuffer
- Looking for hits
- Processing hits
- Architectural updates
- Time for action – picking
- Implementing unique object labels
- Time for action – unique object labels
- Summary
- 9. Putting It All Together
-
10. Advanced Techniques
- Post-processing
- Architectural updates
- Time for action – testing some post-process effects
- Point sprites
- Time for action – using point sprites to create a fountain of sparks
- Normal mapping
- Time for action – normal mapping in action
- Ray tracing in fragment shaders
- Time for action – examining the ray traced scene
- Summary
- Index
Product information
- Title: WebGL Beginner's Guide
- Author(s):
- Release date: June 2012
- Publisher(s): Packt Publishing
- ISBN: 9781849691727
You might also like
book
WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL
Using WebGL®, you can create sophisticated interactive 3D graphics inside web browsers, without plug-ins. WebGL makes …
book
Learning Three.js – the JavaScript 3D Library for WebGL - Second Edition
Create stunning 3D graphics in your browser using the Three.js JavaScript library In Detail Modern browsers …
book
WebGL: Up and Running
Get a quick introduction to WebGL, the new standard for 3D rendering on the Web and …
book
Build Your Own 2D Game Engine and Create Great Web Games: Using HTML5, JavaScript, and WebGL
Build Your Own 2D Game Engine and Create Great Web Games teaches you how to develop …