book

Programming 3D Applications with HTML5 and WebGL

Name: Programming 3D Applications with HTML5 and WebGL
Author: Tony Parisi
ISBN: 9781449362966

by Tony Parisi

February 2014

Intermediate to advanced

401 pages

11h 20m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Preface
AudienceHow This Book Is OrganizedConventions Used in This BookThis Book’s Example FilesUsing Code ExamplesSafari® Books OnlineHow to Contact UsAcknowledgments
I. Foundations
1. Introduction
HTML5: A New Visual MediumThe Browser as PlatformBrowser Realities3D Graphics BasicsWhat Is 3D?3D Coordinate SystemsMeshes, Polygons, and VerticesMaterials, Textures, and LightsTransforms and MatricesCameras, Perspective, Viewports, and ProjectionsShaders
2. WebGL: Real-Time 3D Rendering
WebGL BasicsThe WebGL APIThe Anatomy of a WebGL ApplicationA Simple WebGL ExampleThe Canvas Element and WebGL Drawing ContextThe ViewportBuffers, ArrayBuffer, and Typed ArraysMatricesThe ShaderDrawing PrimitivesCreating 3D GeometryAdding AnimationUsing Texture MapsChapter Summary
3. Three.js—A JavaScript 3D Engine
Three.js Flagship ProjectsAn Overview of Three.jsSetting Up Three.jsThree.js Project StructureA Simple Three.js ProgramCreating the RendererCreating the SceneImplementing the Run LoopLighting the SceneChapter Summary
4. Graphics and Rendering in Three.js
Geometry and MeshesPrebuilt Geometry TypesPaths, Shapes, and ExtrusionsThe Geometry Base ClassBufferGeometry for Optimized Mesh RenderingImporting Meshes from Modeling PackagesThe Scene Graph and Transform HierarchyUsing Scene Graphs to Manage Scene ComplexityScene Graphs in Three.jsRepresenting Translation, Rotation, and ScaleMaterialsStandard Mesh MaterialsAdding Realism with Multiple Textures Bump mapsNormal mapsEnvironment mapsLightsShadowsShadersThe ShaderMaterial Class: Roll Your OwnUsing GLSL Shader Code with Three.jsRenderingPost-Processing and Multipass RenderingDeferred RenderingChapter Summary
5. 3D Animation
Driving Animation with requestAnimationFrame()Using requestAnimationFrame() in Your ApplicationrequestAnimationFrame() and PerformanceFrame-Based Versus Time-Based AnimationAnimating by Programmatically Updating PropertiesAnimating Transitions Using TweensInterpolationThe Tween.js LibraryEasingUsing Key Frames for Complex AnimationsKeyframe.js—A Simple Key Frame Animation UtilityArticulated Animation with Key FramesUsing Curves and Path Following to Create Smooth, Natural MotionUsing Morph Targets for Character and Facial AnimationAnimating Characters with SkinningAnimating Using ShadersChapter Summary
6. CSS3: Advanced Page Effects
CSS TransformsUsing 3D TransformsApplying PerspectiveCreating a Transform HierarchyControlling Backface RenderingA Summary of CSS Transform PropertiesCSS TransitionsCSS AnimationsPushing the Envelope of CSSRendering 3D ObjectsRendering 3D EnvironmentsUsing CSS Custom Filters for Advanced Shader EffectsRendering CSS 3D Using Three.jsChapter Summary
7. Canvas: Universal 2D Drawing
Canvas BasicsThe Canvas Element and 2D Drawing ContextCanvas API FeaturesRendering 3D with the Canvas APICanvas-Based 3D LibrariesK3DThe Three.js Canvas RendererUsing the Three.js Canvas rendererComparing the Canvas renderer to the WebGL rendererChapter Summary
II. Application Development Techniques

8. The 3D Content Pipeline
The 3D Creation ProcessModelingTexture MappingAnimationTechnical Art3D Modeling and Animation ToolsTraditional 3D Software PackagesAutodesk 3ds Max, Maya, and MotionBuilderBlenderTrimble SketchUpPoserBrowser-Based Integrated EnvironmentsVeroldSketchfabSculptGLShadertoy3D Repositories and Stock Art3D File FormatsModel FormatsWavefront OBJSTLAnimation Formatsid Software animation formats: MD2 and MD5BVH: The motion capture data formatFull-Featured Scene FormatsVRML and X3DCOLLADA: The digital asset exchange formatglTF: A new format for WebGL, OpenGL ES, and OpenGL applicationsAutodesk FBXLoading Content into WebGL ApplicationsThe Three.js JSON FormatThe Three.js Binary FormatLoading a COLLADA Scene with Three.jsLoading a glTF Scene with Three.jsChapter Summary
9. 3D Engines and Frameworks
3D Framework ConceptsWhat Is a Framework?WebGL Framework RequirementsA Survey of WebGL FrameworksGame EnginesPresentation FrameworkstQueryVoodoo.jsPhiloGLVizi: A Component-Based Framework for Visual Web ApplicationsBackground and Design PhilosophyThe Vizi ArchitectureGetting Started with ViziA Simple Vizi ApplicationAdding interactionAdding multiple behaviorsChapter Summary
10. Developing a Simple 3D Application
Designing the ApplicationCreating the 3D ContentExporting the Maya Scene to COLLADAConverting the COLLADA File to glTFPreviewing and Testing the 3D ContentA Vizi-Based Previewer ToolThe Vizi Viewer ClassThe Vizi Loader ClassIntegrating the 3D into the ApplicationDeveloping 3D Behaviors and InteractionsVizi Scene Graph API Methods: findNode() and map()Animating Transparency with Vizi.FadeBehaviorAuto-Rotating the Content with Vizi.RotateBehaviorImplementing Rollovers Using Vizi.PickerControlling Animations from the User InterfaceChanging Colors Using the Color PickerChapter Summary
11. Developing a 3D Environment
Creating the Environment ArtPreviewing and Testing the EnvironmentPreviewing the Scene in First-Person ModeInspecting the Scene GraphInspecting Object PropertiesDisplaying Bounding BoxesPreviewing Multiple ObjectsUsing the Previewer to Find Other Scene IssuesCreating a 3D Background Using a Skybox3D SkyboxesThe Vizi Skybox ObjectIntegrating the 3D Content into the ApplicationLoading and Initializing the EnvironmentLoading and Initializing the Car ModelImplementing First-Person NavigationCamera ControllersFirst-Person Controller: The MathMouse LookSimple Collision DetectionWorking with Multiple CamerasCreating Timed and Animated TransitionsScripting Object BehaviorsImplementing Custom Components Based on Vizi.ScriptA Controller Script to Drive the CarDetecting collisions between the car and sceneImplementing collision responseImplementing terrain followingAdding Sound to the EnvironmentRendering Dynamic TexturesChapter Summary
12. Developing Mobile 3D Applications
Mobile 3D PlatformsDeveloping for Mobile BrowsersAdding Touch SupportImplementing touch-based model rotation in the viewerImplementing multitouch-based model zoomTurning off user scaling in the web pageAdding Vizi.Picker touch events to the Futurgo modelDebugging Mobile Functionality in Desktop ChromeCreating Web AppsWeb App Development and Testing ToolsPackaging Web Apps for DistributionDeveloping Native/HTML5 “Hybrid” ApplicationsCocoonJS: A Technology to Make HTML Games and Applications for Mobile DevicesAssembling an Application with CocoonJSCreating the main and overlay viewsManaging communication between the canvas and overlay viewsHybrid WebGL Development: The Bottom LineMobile 3D PerformanceChapter Summary
A. Resources
WebGL ResourcesThe WebGL SpecificationWebGL Mailing Lists and ForumsWebGL Blogs and Demo SitesWebGL Community SitesCSS3 ResourcesCSS3 SpecificationsCSS3 Blogs and Demo SitesCanvas ResourcesCanvas 2D Context SpecificationCanvas 2D TutorialsFrameworks, Libraries, and Tools3D Development Libraries3D Game Engines3D Presentation Frameworks3D Authoring ToolsTraditional modeling and animation packagesBrowser-based integrated environmentsAnimation FrameworksDebugging and Profiling WebGL ApplicationsMobile 3D Development Resources3D File Format SpecificationsModel FormatsAnimation FormatsFull-Scene FormatsRelated TechnologiesPointer Lock APIPage Visibility APIWebSockets and WebRTCWeb WorkersIndexedDB and Filesystem APIs
Index
Colophon
Copyright

Overview

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

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Programming 3D Applications in HTML5 and WebGL

Publisher Resources

ISBN: 9781449363918Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills