book

WebGL: Up and Running

Name: WebGL: Up and Running
Author: Tony Parisi
ISBN: 9781449323578

by Tony Parisi

August 2012

Beginner

230 pages

6h 4m

English

O'Reilly Media, Inc.

Read now

Unlock full access

WebGL: Up and Running
Foreword
Preface
AudienceHow This Book Is OrganizedConventions Used in This BookThis Book’s Example FilesUsing Code ExamplesSafari® Books OnlineHow to Contact UsAcknowledgments
1. An Introduction to WebGL
WebGL—A Technical Definition3D Graphics—A Primer3D Coordinate SystemsMeshes, Polygons, and VerticesMaterials, Textures, and LightsTransforms and MatricesCameras, Perspective, Viewports, and ProjectionsShadersThe WebGL APIThe Anatomy of a WebGL ApplicationThe Canvas and Drawing ContextThe ViewportBuffers, ArrayBuffer, and Typed ArraysMatricesThe ShaderDrawing PrimitivesChapter Summary
2. Your First WebGL Program
Three.js—A JavaScript 3D EngineSetting Up Three.jsA Simple Three.js PageA Real ExampleShading the SceneAdding a Texture MapRotating the ObjectThe Run Loop and requestAnimationFrame()Bringing the Page to LifeChapter Summary
3. Graphics
Sim.js—A Simple Simulation Framework for WebGLCreating MeshesUsing Materials, Textures, and LightsTypes of LightsCreating Serious Realism with Multiple TexturesTextures and TransparencyBuilding a Transform HierarchyCreating Custom GeometryRendering Points and LinesPoint Rendering with Particle SystemsLine RenderingWriting a ShaderWebGL Shader BasicsShaders in Three.jsChapter Summary
4. Animation
Animation BasicsFrame-Based AnimationTime-Based AnimationInterpolation and TweeningKeyframesArticulated AnimationSkinned AnimationMorphsCreating Tweens Using the Tween.js LibraryCreating a Basic TweenTweens with EasingAnimating an Articulated Model with KeyframesLoading the ModelAnimating the ModelAnimating Materials and LightsAnimating TexturesAnimating Skinned Meshes and MorphsChapter Summary
5. Interaction
Hit Detection, Picking, and ProjectionHit Detection in Three.jsImplementing Rollovers and ClicksImplementing DraggingUsing Tweens with DraggingUsing Hit Point and Normal InformationCamera-Based InteractionImplementing a Model Viewer with Camera InteractionNavigating Within a SceneChapter Summary
6. Integrating 2D and 3D
Combining Dynamic HTML and WebGLCreating Pop Ups with DIV ElementsUsing 2D Screen Positions to Annotate 3D ObjectsAdding a Background Image to the 3D SceneOverlaying 3D Visuals on 2D PagesCreating Dynamic Textures with a Canvas 2DUsing Video As a TextureRendering Dynamically Generated 3D TextWebGL for Ultimate MashupsChapter Summary
7. WebGL in Production
Choosing a Runtime FrameworkLoading 3D ContentCOLLADA: The Digital Asset Exchange FormatThe Three.js JSON Model FormatThe Three.js Binary Model Format3D Model CompressionThe Three.js JSON Scene FormatCreating 3D ContentExporting Art from BlenderConverting OBJ Files to Three.js JSON FormatConverting OBJ Files to Three.js Binary FormatConverting from Other Tools and FormatsBrowser RealitiesDetecting WebGL Support in Your BrowserTurning WebGL On in SafariHandling Context Lost EventsWebGL and SecurityChapter Summary

8. Your First WebGL Game
Building the PiecesCamera, Character, and ControlThe keyboard controlsThe cameraKeyframe animationsTexture animationCollision detectionArt DirectionThe sky backgroundThe heads-up displayChanging textures on the flyThe Model PreviewerCreating a Particle SystemAdding SoundPutting It All TogetherChapter Summary
Afterword
A. WebGL Resources
The WebGL SpecificationOfficial Mailing Lists and ForumsTools and ToolkitsBlogs and Demo SitesCommunity Sites
Index
About the Author
Colophon
Copyright

Overview

Get a quick introduction to WebGL, the new standard for 3D rendering on the Web and a member of HTML5’s family of technologies. With this hands-on guide, you’ll learn essential WebGL development and production concepts, using the JavaScript 3D engine Three.js. At the end of the book, you’ll put everything together and build a full 3D application with WebGL.

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

Publisher Resources

ISBN: 9781449326487Errata

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills