logo资料库

webgl up and running 3D(three.js).pdf

发布时间：2022-05-29 发布人：admin 分类：说明书 资料大小：25.17M 资料格式：pdf 举报 版权申诉
第1页 / 共231页
第2页 / 共231页
第3页 / 共231页
第4页 / 共231页
第5页 / 共231页
第6页 / 共231页
第7页 / 共231页
第8页 / 共231页
资料共231页，剩余部分请下载后查看
    Copyright
    Table of Contents
    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
    Chapter 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
    Chapter 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
    Chapter 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
    Chapter 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
    Chapter 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
    Chapter 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
    Chapter 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
    Chapter 8. Your First WebGL Game
    Building the Pieces
    Camera, Character, and Control
    Art Direction
    The Model Previewer
    Creating a Particle System
    Adding Sound
    Putting It All Together
    Chapter Summary
    Afterword
    Appendix A. WebGL Resources
    The WebGL Specification
    Official Mailing Lists and Forums
    Tools and Toolkits
    Blogs and Demo Sites
    Community Sites
    Index
    About the Author
    WebGL: Up and Running Tony Parisi
    WebGL: Up and Running by Tony Parisi Copyright © 2012 Tony Parisi. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/ institutional sales department: 800-998-9938 or corporate@oreilly.com. Editor: Mary Treseler Production Editor: Iris Febres Copyeditor: Audrey Doyle Proofreader: Jasmine Kwityn Indexer: Jay Marchand Cover Designer: Karen Montgomery Interior Designer: David Futato Illustrators: Robert Romano and Rebecca Demarest August 2012: First Edition Revision History for the First Edition: 2012-08-02 First release See http://oreilly.com/catalog/errata.csp?isbn=9781449323578 for release details. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. WebGL: Up and Running, the image of a chrysaora, and related trade dress are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trade­ mark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein. ISBN: 978-1-449-32357-8 [LSI]
    Table of Contents Foreword. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix 1. An Introduction to WebGL. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 WebGL—A Technical Definition 2 3D Graphics—A Primer 4 3D Coordinate Systems 4 Meshes, Polygons, and Vertices 4 Materials, Textures, and Lights 5 Transforms and Matrices 6 Cameras, Perspective, Viewports, and Projections 7 Shaders 7 The WebGL API 9 The Anatomy of a WebGL Application 10 The Canvas and Drawing Context 10 The Viewport 11 Buffers, ArrayBuffer, and Typed Arrays 12 Matrices 13 The Shader 13 Drawing Primitives 14 Chapter Summary 15 2. Your First WebGL Program. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Three.js—A JavaScript 3D Engine 17 Setting Up Three.js 19 A Simple Three.js Page 20 A Real Example 22 Shading the Scene 26 Adding a Texture Map 27 Rotating the Object 28 iii
    The Run Loop and requestAnimationFrame() 28 Bringing the Page to Life 29 Chapter Summary 30 3. Graphics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Sim.js—A Simple Simulation Framework for WebGL 32 Creating Meshes 33 Using Materials, Textures, and Lights 38 Types of Lights 38 Creating Serious Realism with Multiple Textures 41 Textures and Transparency 46 Building a Transform Hierarchy 46 Creating Custom Geometry 50 Rendering Points and Lines 54 Point Rendering with Particle Systems 54 Line Rendering 56 Writing a Shader 57 WebGL Shader Basics 57 Shaders in Three.js 59 Chapter Summary 64 4. Animation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Animation Basics 67 Frame-Based Animation 67 Time-Based Animation 68 Interpolation and Tweening 69 Keyframes 70 Articulated Animation 70 Skinned Animation 71 Morphs 71 Creating Tweens Using the Tween.js Library 72 Creating a Basic Tween 73 Tweens with Easing 76 Animating an Articulated Model with Keyframes 79 Loading the Model 79 Animating the Model 81 Animating Materials and Lights 84 Animating Textures 86 Animating Skinned Meshes and Morphs 89 Chapter Summary 89 5. Interaction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 iv | Table of Contents
    Hit Detection, Picking, and Projection 91 Hit Detection in Three.js 92 Implementing Rollovers and Clicks 95 Implementing Dragging 98 Using Tweens with Dragging 102 Using Hit Point and Normal Information 102 Camera-Based Interaction 103 Implementing a Model Viewer with Camera Interaction 104 Navigating Within a Scene 106 Chapter Summary 108 6. 109 Integrating 2D and 3D. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Combining Dynamic HTML and WebGL 110 Creating Pop Ups with DIV Elements 110 Using 2D Screen Positions to Annotate 3D Objects 114 Adding a Background Image to the 3D Scene 116 Overlaying 3D Visuals on 2D Pages 116 Creating Dynamic Textures with a Canvas 2D 119 Using Video As a Texture 127 Rendering Dynamically Generated 3D Text 132 WebGL for Ultimate Mashups 134 Chapter Summary 136 7. WebGL in Production. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 Choosing a Runtime Framework 138 Loading 3D Content 139 COLLADA: The Digital Asset Exchange Format 140 The Three.js JSON Model Format 145 The Three.js Binary Model Format 148 3D Model Compression 150 The Three.js JSON Scene Format 150 Creating 3D Content 151 Exporting Art from Blender 152 Converting OBJ Files to Three.js JSON Format 154 Converting OBJ Files to Three.js Binary Format 154 Converting from Other Tools and Formats 154 Browser Realities 155 Detecting WebGL Support in Your Browser 156 Turning WebGL On in Safari 157 Handling Context Lost Events 159 WebGL and Security 162 Table of Contents | v
    Chapter Summary 164 8. Your First WebGL Game. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 Building the Pieces 167 Camera, Character, and Control 167 Art Direction 174 The Model Previewer 177 Creating a Particle System 179 Adding Sound 182 Putting It All Together 184 Chapter Summary 197 Afterword. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . cxcix A. WebGL Resources. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201 Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 vi | Table of Contents
    分享到：
    赞 收藏

    相关推荐

    资料库

    开发技术

    共收录19306份资料，累计14个分类，关注成员有19位，主要包括：Actionscript,Javascript,PHP,VB,Perl,Delphi,Python,C#,C,Java,C++,Web开发,硬件开发,其它

    热门标签

    Actionscript Javascript PHP VB Perl Delphi Python C# C Java C++ Web开发 硬件开发 其它

    最新资料