Programming 3D Applications With HTML5 and WebGL by Parisi, Tony -- Read -- Imperial Library of Trantor

Index

Programming 3D Applications with HTML5 and WebGL 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

I. Foundations

1. Introduction

HTML5: A New Visual Medium

The Browser as Platform Browser Realities

3D Graphics Basics

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

2. WebGL: Real-Time 3D Rendering

WebGL Basics The WebGL API The Anatomy of a WebGL Application A Simple WebGL Example

The Canvas Element and WebGL Drawing Context The Viewport Buffers, ArrayBuffer, and Typed Arrays Matrices The Shader Drawing Primitives

Creating 3D Geometry Adding Animation Using Texture Maps Chapter Summary

3. Three.js—A JavaScript 3D Engine

Three.js Flagship Projects An Overview of Three.js

Setting Up Three.js Three.js Project Structure

A Simple Three.js Program

Creating the Renderer Creating the Scene Implementing the Run Loop Lighting the Scene

Chapter Summary

4. Graphics and Rendering in Three.js

Geometry and Meshes

Prebuilt Geometry Types Paths, Shapes, and Extrusions The Geometry Base Class BufferGeometry for Optimized Mesh Rendering Importing Meshes from Modeling Packages

The Scene Graph and Transform Hierarchy

Using Scene Graphs to Manage Scene Complexity Scene Graphs in Three.js Representing Translation, Rotation, and Scale

Materials

Standard Mesh Materials Adding Realism with Multiple Textures

Bump maps Normal maps Environment maps

Lights Shadows Shaders

The ShaderMaterial Class: Roll Your Own Using GLSL Shader Code with Three.js

Rendering

Post-Processing and Multipass Rendering Deferred Rendering

Chapter Summary

5. 3D Animation

Driving Animation with requestAnimationFrame()

Using requestAnimationFrame() in Your Application requestAnimationFrame() and Performance Frame-Based Versus Time-Based Animation

Animating by Programmatically Updating Properties Animating Transitions Using Tweens

Interpolation The Tween.js Library Easing

Using Key Frames for Complex Animations

Keyframe.js—A Simple Key Frame Animation Utility Articulated Animation with Key Frames

Using Curves and Path Following to Create Smooth, Natural Motion Using Morph Targets for Character and Facial Animation Animating Characters with Skinning Animating Using Shaders Chapter Summary

6. CSS3: Advanced Page Effects

CSS Transforms

Using 3D Transforms Applying Perspective Creating a Transform Hierarchy Controlling Backface Rendering A Summary of CSS Transform Properties

CSS Transitions CSS Animations Pushing the Envelope of CSS

Rendering 3D Objects Rendering 3D Environments Using CSS Custom Filters for Advanced Shader Effects Rendering CSS 3D Using Three.js

Chapter Summary

7. Canvas: Universal 2D Drawing

Canvas Basics

The Canvas Element and 2D Drawing Context Canvas API Features

Rendering 3D with the Canvas API Canvas-Based 3D Libraries

K3D The Three.js Canvas Renderer

Using the Three.js Canvas renderer Comparing the Canvas renderer to the WebGL renderer

Chapter Summary

II. Application Development Techniques

8. The 3D Content Pipeline

The 3D Creation Process

Modeling Texture Mapping Animation Technical Art

3D Modeling and Animation Tools

Traditional 3D Software Packages

Autodesk 3ds Max, Maya, and MotionBuilder Blender Trimble SketchUp Poser

Browser-Based Integrated Environments

Verold Sketchfab SculptGL Shadertoy

3D Repositories and Stock Art

3D File Formats

Model Formats

Wavefront OBJ STL

Animation Formats

id Software animation formats: MD2 and MD5 BVH: The motion capture data format

Full-Featured Scene Formats

VRML and X3D COLLADA: The digital asset exchange format glTF: A new format for WebGL, OpenGL ES, and OpenGL applications Autodesk FBX

Loading Content into WebGL Applications

The Three.js JSON Format The Three.js Binary Format Loading a COLLADA Scene with Three.js Loading a glTF Scene with Three.js

Chapter Summary

9. 3D Engines and Frameworks

3D Framework Concepts

What Is a Framework? WebGL Framework Requirements

A Survey of WebGL Frameworks

Game Engines Presentation Frameworks

tQuery Voodoo.js PhiloGL

Vizi: A Component-Based Framework for Visual Web Applications

Background and Design Philosophy The Vizi Architecture Getting Started with Vizi A Simple Vizi Application

Adding interaction Adding multiple behaviors

Chapter Summary

10. Developing a Simple 3D Application

Designing the Application Creating the 3D Content

Exporting the Maya Scene to COLLADA Converting the COLLADA File to glTF

Previewing and Testing the 3D Content

A Vizi-Based Previewer Tool The Vizi Viewer Class The Vizi Loader Class

Integrating the 3D into the Application Developing 3D Behaviors and Interactions

Vizi Scene Graph API Methods: findNode() and map() Animating Transparency with Vizi.FadeBehavior Auto-Rotating the Content with Vizi.RotateBehavior Implementing Rollovers Using Vizi.Picker Controlling Animations from the User Interface Changing Colors Using the Color Picker

Chapter Summary

11. Developing a 3D Environment

Creating the Environment Art Previewing and Testing the Environment

Previewing the Scene in First-Person Mode Inspecting the Scene Graph Inspecting Object Properties Displaying Bounding Boxes Previewing Multiple Objects Using the Previewer to Find Other Scene Issues

Creating a 3D Background Using a Skybox

3D Skyboxes The Vizi Skybox Object

Integrating the 3D Content into the Application

Loading and Initializing the Environment Loading and Initializing the Car Model

Implementing First-Person Navigation

Camera Controllers First-Person Controller: The Math Mouse Look Simple Collision Detection

Working with Multiple Cameras Creating Timed and Animated Transitions Scripting Object Behaviors

Implementing Custom Components Based on Vizi.Script A Controller Script to Drive the Car

Detecting collisions between the car and scene Implementing collision response Implementing terrain following

Adding Sound to the Environment Rendering Dynamic Textures Chapter Summary

12. Developing Mobile 3D Applications

Mobile 3D Platforms Developing for Mobile Browsers

Adding Touch Support

Implementing touch-based model rotation in the viewer Implementing multitouch-based model zoom Turning off user scaling in the web page Adding Vizi.Picker touch events to the Futurgo model

Debugging Mobile Functionality in Desktop Chrome

Creating Web Apps

Web App Development and Testing Tools Packaging Web Apps for Distribution

Developing Native/HTML5 “Hybrid” Applications

CocoonJS: A Technology to Make HTML Games and Applications for Mobile Devices Assembling an Application with CocoonJS

Creating the main and overlay views Managing communication between the canvas and overlay views

Hybrid WebGL Development: The Bottom Line

Mobile 3D Performance Chapter Summary

A. Resources

WebGL Resources

The WebGL Specification WebGL Mailing Lists and Forums WebGL Blogs and Demo Sites WebGL Community Sites

CSS3 Resources

CSS3 Specifications CSS3 Blogs and Demo Sites

Canvas Resources

Canvas 2D Context Specification Canvas 2D Tutorials

Frameworks, Libraries, and Tools

3D Development Libraries 3D Game Engines 3D Presentation Frameworks 3D Authoring Tools

Traditional modeling and animation packages Browser-based integrated environments

Animation Frameworks Debugging and Profiling WebGL Applications Mobile 3D Development Resources

3D File Format Specifications

Model Formats Animation Formats Full-Scene Formats

Related Technologies

Pointer Lock API Page Visibility API WebSockets and WebRTC Web Workers IndexedDB and Filesystem APIs

Index Colophon Copyright

← Prev
Back
Next →

← Prev
Back
Next →