WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL

WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL

by Kouichi Matsuda, Rodger Lea
Released July 2013
Publisher(s): Addison-Wesley Professional
ISBN: 9780133364903

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.

Start your free trial

Book description

Using WebGL®, you can create sophisticated interactive 3D graphics inside web browsers, without plug-ins. WebGL makes it possible to build a new generation of 3D web games, user interfaces, and information visualization solutions that will run on any standard web browser, and on PCs, smartphones, tablets, game consoles, or other devices. WebGL Programming Guide will help you get started quickly with interactive WebGL 3D programming, even if you have no prior knowledge of HTML5, JavaScript, 3D graphics, mathematics, or OpenGL.

You’ll learn step-by-step, through realistic examples, building your skills as you move from simple to complex solutions for building visually appealing web pages and 3D applications with WebGL. Media, 3D graphics, and WebGL pioneers Dr. Kouichi Matsuda and Dr. Rodger Lea offer easy-to-understand tutorials on key aspects of WebGL, plus 100 downloadable sample programs, each demonstrating a specific WebGL topic.

You’ll move from basic techniques such as rendering, animating, and texturing triangles, all the way to advanced techniques such as fogging, shadowing, shader switching, and displaying 3D models generated by Blender or other authoring tools. This book won’t just teach you WebGL best practices, it will give you a library of code to jumpstart your own projects.

Coverage includes:

  • WebGL’s origin, core concepts, features, advantages, and integration with other web standards

  • How and basic WebGL functions work together to deliver 3D graphics

  • Shader development with OpenGL ES Shading Language (GLSL ES)

  • 3D scene drawing: representing user views, controlling space volume, clipping, object creation, and perspective

  • Achieving greater realism through lighting and hierarchical objects

  • Advanced techniques: object manipulation, heads-up displays, alpha blending, shader switching, and more

  • Valuable reference appendixes covering key issues ranging from coordinate systems to matrices and shader loading to web browser settings

    • This is the newest text in the OpenGL Technical Library, Addison-Wesley’s definitive collection of programming guides an reference manuals for OpenGL and its related technologies. The Library enables programmers to gain a practical understanding of OpenGL and the other Khronos application-programming libraries including OpenGL ES and OpenCL. All of the technologies in the OpenGL Technical Library evolve under the auspices of the Khronos Group, the industry consortium guiding the evolution of modern, open-standards media APIs.

    Table of contents

    1. About This eBook
    2. Title Page
    3. Copyright Page
    4. Dedication Page
    5. Contents
    6. Preface
      1. Who the Book Is For
      2. What the Book Covers
      3. How the Book Is Structured
      4. WebGL-Enabled Browsers
      5. Sample Programs and Related Links
      6. Style Conventions
    7. Acknowledgments
    8. About the Authors
    9. Chapter 1. Overview of WebGL
      1. Advantages of WebGL
      2. Origins of WebGL
      3. Structure of WebGL Applications
      4. Summary
    10. Chapter 2. Your First Step with WebGL
      1. What Is a Canvas?
      2. The World’s Shortest WebGL Program: Clear Drawing Area
      3. Draw a Point (Version 1)
      4. Draw a Point (Version 2)
      5. Draw a Point with a Mouse Click
      6. Change the Point Color
      7. Summary
    11. Chapter 3. Drawing and Transforming Triangles
      1. Drawing Multiple Points
      2. Hello Triangle
      3. Moving, Rotating, and Scaling
      4. Summary
    12. Chapter 4. More Transformations and Basic Animation
      1. Translate and Then Rotate
      2. Animation
      3. Summary
    13. Chapter 5. Using Colors and Texture Images
      1. Passing Other Types of Information to Vertex Shaders
      2. Experimenting with the Sample Program
      3. Color Triangle (ColoredTriangle.js)
      4. Pasting an Image onto a Rectangle
      5. Pasting Multiple Textures to a Shape
      6. Summary
    14. Chapter 6. The OpenGL ES Shading Language (GLSL ES)
      1. Recap of Basic Shader Programs
      2. Overview of GLSL ES
      3. Hello Shader!
      4. Data (Numerical and Boolean Values)
      5. Variables
      6. GLSL ES Is a Type Sensitive Language
      7. Basic Types
      8. Vector Types and Matrix Types
      9. Structures
      10. Arrays
      11. Samplers
      12. Precedence of Operators
      13. Conditional Control Flow and Iteration
      14. Functions
      15. Built-In Functions
      16. Global Variables and Local Variables
      17. Storage Qualifiers
      18. Preprocessor Directives
      19. Summary
    15. Chapter 7. Toward the 3D World
      1. What’s Good for Triangles Is Good for Cubes
      2. Specifying the Viewing Direction
      3. Sample Program (LookAtRotatedTriangles.js)
      4. Experimenting with the Sample Program
      5. Specifying the Visible Range (Box Type)
      6. Specifying the Visible Range Using a Quadrangular Pyramid
      7. Sample Program (PerspectiveView_mvp.js)
      8. Correctly Handling Foreground and Background Objects
      9. Hello Cube
      10. Summary
    16. Chapter 8. Lighting Objects
      1. Lighting 3D Objects
      2. Lighting the Translated-Rotated Object
      3. Using a Point Light Object
      4. Summary
    17. Chapter 9. Hierarchical Objects
      1. Drawing and Manipulating Objects Composed of Other Objects
      2. Shader and Program Objects: The Role of initShaders()
      3. Summary
    18. Chapter 10. Advanced Techniques
      1. Rotate an Object with the Mouse
      2. Select an Object
      3. HUD (Head Up Display)
      4. Fog (Atmospheric Effect)
      5. Make a Rounded Point
      6. Alpha Blending
      7. Switching Shaders
      8. Use What You’ve Drawn as a Texture Image
      9. Display Shadows
      10. Load and Display 3D Models
      11. Handling Lost Context
      12. Summary
    19. Appendix A. No Need to Swap Buffers in WebGL
    20. Appendix B. Built-In Functions of GLSL ES 1.0
      1. Angle and Trigonometry Functions
      2. Exponential Functions
      3. Common Functions
      4. Geometric Functions
      5. Matrix Functions
      6. Vector Functions
      7. Texture Lookup Functions
    21. Appendix C. Projection Matrices
      1. Orthogonal Projection Matrix
      2. Perspective Projection Matrix
    22. Appendix D. WebGL/OpenGL: Left or Right Handed?
      1. Sample Program CoordinateSystem.js
      2. Hidden Surface Removal and the Clip Coordinate System
      3. The Clip Coordinate System and the Viewing Volume
      4. What Is Correct?
      5. Summary
    23. Appendix E. The Inverse Transpose Matrix
    24. Appendix F. Load Shader Programs from Files
    25. Appendix G. World Coordinate System Versus Local Coordinate System
      1. The Local Coordinate System
      2. The World Coordinate System
      3. Transformations and the Coordinate Systems
    26. Appendix H. Web Browser Settings for WebGL
    27. Glossary
    28. References
    29. Index

    Product information

    • Title: WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL
    • Author(s): Kouichi Matsuda, Rodger Lea
    • Release date: July 2013
    • Publisher(s): Addison-Wesley Professional
    • ISBN: 9780133364903