Programming 3D Applications with HTML5 and WebGL

Programming 3D Applications with HTML5 and WebGL

by Tony Parisi
Released February 2014
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781449362966

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Buy on Amazon Buy on ebooks.com
Start your free trial

Book description

Create high-performance, visually stunning 3D applications for the Web, using HTML5 and related technologies such as CSS3 and WebGL—the emerging web graphics standard. With this book, you’ll learn how to use the tools, frameworks, and libraries for building 3D models and animations, mind-blowing visual effects, and advanced user interaction in both desktop and mobile browsers.

In two parts—Foundations and Application Development Techniques—author Tony Parisi provides a thorough grounding in theory and practice for designing everything from a simple 3D product viewer to immersive games and interactive training systems. Ideal for developers with Javascript and HTML experience.

  • Explore HTML5 APIs and related technologies for creating 3D web graphics, including WebGL, Canvas, and CSS
  • Work with the popular JavaScript 3D rendering and animation libraries Three.js and Tween.js
  • Delve into the 3D content creation pipeline, and the modeling and animation tools for creating killer 3D content
  • Look into several game engines and frameworks for building 3D applications, including the author’s Vizi framework
  • Create 3D environments with multiple objects and complex interaction, using examples and supporting code
  • Examine the issues involved in building WebGL-based 3D applications for mobile browsers

Publisher resources

View/Submit Errata

Table of contents

  1. Preface
    1. Audience
    2. How This Book Is Organized
    3. Conventions Used in This Book
    4. This Book’s Example Files
    5. Using Code Examples
    6. Safari® Books Online
    7. How to Contact Us
    8. Acknowledgments
  2. I. Foundations
    1. 1. Introduction
      1. HTML5: A New Visual Medium
        1. The Browser as Platform
        2. Browser Realities
      2. 3D Graphics Basics
        1. What Is 3D?
        2. 3D Coordinate Systems
        3. Meshes, Polygons, and Vertices
        4. Materials, Textures, and Lights
        5. Transforms and Matrices
        6. Cameras, Perspective, Viewports, and Projections
        7. Shaders
    2. 2. WebGL: Real-Time 3D Rendering
      1. WebGL Basics
      2. The WebGL API
      3. The Anatomy of a WebGL Application
      4. A Simple WebGL Example
        1. The Canvas Element and WebGL Drawing Context
        2. The Viewport
        3. Buffers, ArrayBuffer, and Typed Arrays
        4. Matrices
        5. The Shader
        6. Drawing Primitives
      5. Creating 3D Geometry
      6. Adding Animation
      7. Using Texture Maps
      8. Chapter Summary
    3. 3. Three.js—A JavaScript 3D Engine
      1. Three.js Flagship Projects
      2. An Overview of Three.js
        1. Setting Up Three.js
        2. Three.js Project Structure
      3. A Simple Three.js Program
        1. Creating the Renderer
        2. Creating the Scene
        3. Implementing the Run Loop
        4. Lighting the Scene
      4. Chapter Summary
    4. 4. Graphics and Rendering in Three.js
      1. Geometry and Meshes
        1. Prebuilt Geometry Types
        2. Paths, Shapes, and Extrusions
        3. The Geometry Base Class
        4. BufferGeometry for Optimized Mesh Rendering
        5. Importing Meshes from Modeling Packages
      2. The Scene Graph and Transform Hierarchy
        1. Using Scene Graphs to Manage Scene Complexity
        2. Scene Graphs in Three.js
        3. Representing Translation, Rotation, and Scale
      3. Materials
        1. Standard Mesh Materials
        2. Adding Realism with Multiple Textures
          1.  
            1. Bump maps
            2. Normal maps
            3. Environment maps
      4. Lights
      5. Shadows
      6. Shaders
        1. The ShaderMaterial Class: Roll Your Own
        2. Using GLSL Shader Code with Three.js
      7. Rendering
        1. Post-Processing and Multipass Rendering
        2. Deferred Rendering
      8. Chapter Summary
    5. 5. 3D Animation
      1. Driving Animation with requestAnimationFrame()
        1. Using requestAnimationFrame() in Your Application
        2. requestAnimationFrame() and Performance
        3. Frame-Based Versus Time-Based Animation
      2. Animating by Programmatically Updating Properties
      3. Animating Transitions Using Tweens
        1. Interpolation
        2. The Tween.js Library
        3. Easing
      4. Using Key Frames for Complex Animations
        1. Keyframe.js—A Simple Key Frame Animation Utility
        2. Articulated Animation with Key Frames
      5. Using Curves and Path Following to Create Smooth, Natural Motion
      6. Using Morph Targets for Character and Facial Animation
      7. Animating Characters with Skinning
      8. Animating Using Shaders
      9. Chapter Summary
    6. 6. CSS3: Advanced Page Effects
      1. CSS Transforms
        1. Using 3D Transforms
        2. Applying Perspective
        3. Creating a Transform Hierarchy
        4. Controlling Backface Rendering
        5. A Summary of CSS Transform Properties
      2. CSS Transitions
      3. CSS Animations
      4. Pushing the Envelope of CSS
        1. Rendering 3D Objects
        2. Rendering 3D Environments
        3. Using CSS Custom Filters for Advanced Shader Effects
        4. Rendering CSS 3D Using Three.js
      5. Chapter Summary
    7. 7. Canvas: Universal 2D Drawing
      1. Canvas Basics
        1. The Canvas Element and 2D Drawing Context
        2. Canvas API Features
      2. Rendering 3D with the Canvas API
      3. Canvas-Based 3D Libraries
        1. K3D
        2. The Three.js Canvas Renderer
          1. Using the Three.js Canvas renderer
          2. Comparing the Canvas renderer to the WebGL renderer
      4. Chapter Summary
  3. II. Application Development Techniques
    1. 8. The 3D Content Pipeline
      1. The 3D Creation Process
        1. Modeling
        2. Texture Mapping
        3. Animation
        4. Technical Art
      2. 3D Modeling and Animation Tools
        1. Traditional 3D Software Packages
          1. Autodesk 3ds Max, Maya, and MotionBuilder
          2. Blender
          3. Trimble SketchUp
          4. Poser
        2. Browser-Based Integrated Environments
          1. Verold
          2. Sketchfab
          3. SculptGL
          4. Shadertoy
        3. 3D Repositories and Stock Art
      3. 3D File Formats
        1. Model Formats
          1. Wavefront OBJ
          2. STL
        2. Animation Formats
          1. id Software animation formats: MD2 and MD5
          2. BVH: The motion capture data format
        3. Full-Featured Scene Formats
          1. VRML and X3D
          2. COLLADA: The digital asset exchange format
          3. glTF: A new format for WebGL, OpenGL ES, and OpenGL applications
          4. Autodesk FBX
      4. Loading Content into WebGL Applications
        1. The Three.js JSON Format
        2. The Three.js Binary Format
        3. Loading a COLLADA Scene with Three.js
        4. Loading a glTF Scene with Three.js
      5. Chapter Summary
    2. 9. 3D Engines and Frameworks
      1. 3D Framework Concepts
        1. What Is a Framework?
        2. WebGL Framework Requirements
      2. A Survey of WebGL Frameworks
        1. Game Engines
        2. Presentation Frameworks
          1. tQuery
          2. Voodoo.js
          3. PhiloGL
      3. Vizi: A Component-Based Framework for Visual Web Applications
        1. Background and Design Philosophy
        2. The Vizi Architecture
        3. Getting Started with Vizi
        4. A Simple Vizi Application
          1. Adding interaction
          2. Adding multiple behaviors
      4. Chapter Summary
    3. 10. Developing a Simple 3D Application
      1. Designing the Application
      2. Creating the 3D Content
        1. Exporting the Maya Scene to COLLADA
        2. Converting the COLLADA File to glTF
      3. Previewing and Testing the 3D Content
        1. A Vizi-Based Previewer Tool
        2. The Vizi Viewer Class
        3. The Vizi Loader Class
      4. Integrating the 3D into the Application
      5. Developing 3D Behaviors and Interactions
        1. Vizi Scene Graph API Methods: findNode() and map()
        2. Animating Transparency with Vizi.FadeBehavior
        3. Auto-Rotating the Content with Vizi.RotateBehavior
        4. Implementing Rollovers Using Vizi.Picker
        5. Controlling Animations from the User Interface
        6. Changing Colors Using the Color Picker
      6. Chapter Summary
    4. 11. Developing a 3D Environment
      1. Creating the Environment Art
      2. Previewing and Testing the Environment
        1. Previewing the Scene in First-Person Mode
        2. Inspecting the Scene Graph
        3. Inspecting Object Properties
        4. Displaying Bounding Boxes
        5. Previewing Multiple Objects
        6. Using the Previewer to Find Other Scene Issues
      3. Creating a 3D Background Using a Skybox
        1. 3D Skyboxes
        2. The Vizi Skybox Object
      4. Integrating the 3D Content into the Application
        1. Loading and Initializing the Environment
        2. Loading and Initializing the Car Model
      5. Implementing First-Person Navigation
        1. Camera Controllers
        2. First-Person Controller: The Math
        3. Mouse Look
        4. Simple Collision Detection
      6. Working with Multiple Cameras
      7. Creating Timed and Animated Transitions
      8. Scripting Object Behaviors
        1. Implementing Custom Components Based on Vizi.Script
        2. A Controller Script to Drive the Car
          1. Detecting collisions between the car and scene
          2. Implementing collision response
          3. Implementing terrain following
      9. Adding Sound to the Environment
      10. Rendering Dynamic Textures
      11. Chapter Summary
    5. 12. Developing Mobile 3D Applications
      1. Mobile 3D Platforms
      2. Developing for Mobile Browsers
        1. Adding Touch Support
          1. Implementing touch-based model rotation in the viewer
          2. Implementing multitouch-based model zoom
          3. Turning off user scaling in the web page
          4. Adding Vizi.Picker touch events to the Futurgo model
        2. Debugging Mobile Functionality in Desktop Chrome
      3. Creating Web Apps
        1. Web App Development and Testing Tools
        2. Packaging Web Apps for Distribution
      4. Developing Native/HTML5 “Hybrid” Applications
        1. CocoonJS: A Technology to Make HTML Games and Applications for Mobile Devices
        2. Assembling an Application with CocoonJS
          1. Creating the main and overlay views
          2. Managing communication between the canvas and overlay views
        3. Hybrid WebGL Development: The Bottom Line
      5. Mobile 3D Performance
      6. Chapter Summary
  4. A. Resources
    1. WebGL Resources
      1. The WebGL Specification
      2. WebGL Mailing Lists and Forums
      3. WebGL Blogs and Demo Sites
      4. WebGL Community Sites
    2. CSS3 Resources
      1. CSS3 Specifications
      2. CSS3 Blogs and Demo Sites
    3. Canvas Resources
      1. Canvas 2D Context Specification
      2. Canvas 2D Tutorials
    4. Frameworks, Libraries, and Tools
      1. 3D Development Libraries
      2. 3D Game Engines
      3. 3D Presentation Frameworks
      4. 3D Authoring Tools
        1. Traditional modeling and animation packages
        2. Browser-based integrated environments
      5. Animation Frameworks
      6. Debugging and Profiling WebGL Applications
      7. Mobile 3D Development Resources
    5. 3D File Format Specifications
      1. Model Formats
      2. Animation Formats
      3. Full-Scene Formats
    6. Related Technologies
      1. Pointer Lock API
      2. Page Visibility API
      3. WebSockets and WebRTC
      4. Web Workers
      5. IndexedDB and Filesystem APIs
  5. Index
  6. Colophon
  7. Copyright

Product information

  • Title: Programming 3D Applications with HTML5 and WebGL
  • Author(s): Tony Parisi
  • Release date: February 2014
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449362966