WebGL · Up and Running by Parisi, Tony -- Read -- Imperial Library of Trantor

Index

WebGL: Up and Running Foreword Preface

Audience How This Book Is Organized Conventions Used in This Book This Book’s Example Files Using Code Examples Safari® Books Online How to Contact Us Acknowledgments

1. An Introduction to WebGL

WebGL—A Technical Definition 3D Graphics—A Primer

3D Coordinate Systems Meshes, Polygons, and Vertices Materials, Textures, and Lights Transforms and Matrices Cameras, Perspective, Viewports, and Projections Shaders

The WebGL API

The Anatomy of a WebGL Application The Canvas and Drawing Context The Viewport Buffers, ArrayBuffer, and Typed Arrays Matrices The Shader Drawing Primitives

Chapter Summary

2. Your First WebGL Program

Three.js—A JavaScript 3D Engine Setting Up Three.js A Simple Three.js Page A Real Example

Shading the Scene Adding a Texture Map Rotating the Object The Run Loop and requestAnimationFrame() Bringing the Page to Life

Chapter Summary

3. Graphics

Sim.js—A Simple Simulation Framework for WebGL Creating Meshes Using Materials, Textures, and Lights

Types of Lights Creating Serious Realism with Multiple Textures Textures and Transparency

Building a Transform Hierarchy Creating Custom Geometry Rendering Points and Lines

Point Rendering with Particle Systems Line Rendering

Writing a Shader

WebGL Shader Basics Shaders in Three.js

Chapter Summary

4. Animation

Animation Basics

Frame-Based Animation Time-Based Animation Interpolation and Tweening Keyframes Articulated Animation Skinned Animation Morphs

Creating Tweens Using the Tween.js Library

Creating a Basic Tween Tweens with Easing

Animating an Articulated Model with Keyframes

Loading the Model Animating the Model

Animating Materials and Lights Animating Textures Animating Skinned Meshes and Morphs Chapter Summary

5. Interaction

Hit Detection, Picking, and Projection

Hit Detection in Three.js

Implementing Rollovers and Clicks Implementing Dragging

Using Tweens with Dragging

Using Hit Point and Normal Information Camera-Based Interaction

Implementing a Model Viewer with Camera Interaction Navigating Within a Scene

Chapter Summary

6. Integrating 2D and 3D

Combining Dynamic HTML and WebGL

Creating Pop Ups with DIV Elements Using 2D Screen Positions to Annotate 3D Objects Adding a Background Image to the 3D Scene

Overlaying 3D Visuals on 2D Pages Creating Dynamic Textures with a Canvas 2D Using Video As a Texture Rendering Dynamically Generated 3D Text WebGL for Ultimate Mashups Chapter Summary

7. WebGL in Production

Choosing a Runtime Framework Loading 3D Content

COLLADA: The Digital Asset Exchange Format The Three.js JSON Model Format The Three.js Binary Model Format 3D Model Compression The Three.js JSON Scene Format

Creating 3D Content

Exporting Art from Blender Converting OBJ Files to Three.js JSON Format Converting OBJ Files to Three.js Binary Format Converting from Other Tools and Formats

Browser Realities

Detecting WebGL Support in Your Browser Turning WebGL On in Safari

Handling Context Lost Events WebGL and Security Chapter Summary

8. Your First WebGL Game

Building the Pieces

Camera, Character, and Control

The keyboard controls The camera Keyframe animations Texture animation Collision detection

Art Direction

The sky background The heads-up display Changing textures on the fly

The Model Previewer Creating a Particle System Adding Sound

Putting It All Together Chapter Summary

Afterword A. WebGL Resources

The WebGL Specification Official Mailing Lists and Forums Tools and Toolkits Blogs and Demo Sites Community Sites

Index About the Author Colophon Copyright

← Prev
Back
Next →

← Prev
Back
Next →