WebGL Beginner's Guide. If you’re a JavaScript developer who wants to take the plunge into 3D web development, this is the perfect primer. From a basic understanding of WebGL structure to creating realistic 3D scenes, everything you need is here Diego Cantor, Brandon Jones, Khronos

Spis treści książki

• WebGL Beginners Guide
  • Table of Contents
  • WebGL Beginner's Guide
  • Credits
  • About the Authors
  • Acknowledgement
  • About the Reviewers
  • www.PacktPub.com
    • Support files, eBooks, discount offers, and more
      • Why Subscribe?
      • Free Access for Packt account holders
  • Preface
    • What this book covers
    • What you need for this book
    • Who this book is for
    • Conventions
    • Time for action heading
      • What just happened?
      • Have a go hero heading
    • Reader feedback
    • Customer support
      • Downloading the example code
      • Downloading the color images of this book
      • Errata
      • Piracy
      • Questions
  • 1. Getting Started with WebGL
    • System requirements
    • What kind of rendering does WebGL offer?
    • Structure of a WebGL application
    • Creating an HTML5 canvas
    • Time for action creating an HTML5 canvas
      • What just happened?
      • Defining a CSS style for the border
      • Understanding canvas attributes
      • What if the canvas is not supported?
    • Accessing a WebGL context
    • Time for action accessing the WebGL context
      • What just happened?
    • WebGL is a state machine
    • Time for action setting up WebGL context attributes
      • What just happened?
      • Using the context to access the WebGL API
    • Loading a 3D scene
      • Virtual car showroom
    • Time for action visualizing a finished scene
      • What just happened?
    • Summary
  • 2. Rendering Geometry
    • Vertices and Indices
    • Overview of WebGL's rendering pipeline
      • Vertex Buffer Objects (VBOs)
      • Vertex shader
      • Fragment shader
      • Framebuffer
      • Attributes, uniforms, and varyings
    • Rendering geometry in WebGL
      • Defining a geometry using JavaScript arrays
      • Creating WebGL buffers
        • Operations to manipulate WebGL buffers
      • Associating attributes to VBOs
        • Binding a VBO
        • Pointing an attribute to the currently bound VBO
        • Enabling the attribute
      • Rendering
        • The drawArrays and drawElements functions
          • Using drawArrays
          • Using drawElements
    • Putting everything together
    • Time for action rendering a square
      • What just happened?
      • Have a go hero changing the square color
    • Rendering modes
    • Time for action rendering modes
      • What just happened?
    • WebGL as a state machine: buffer manipulation
    • Time for action enquiring on the state of buffers
      • What just happened?
      • Have a go hero add one validation
    • Advanced geometry loading techniques: JavaScript Object Notation (JSON) and AJAX
      • Introduction to JSON JavaScript Object Notation
        • Defining JSON-based 3D models
        • JSON encoding and decoding
    • Time for action JSON encoding and decoding
      • What just happened?
      • Asynchronous loading with AJAX
        • Setting up a web server
        • Working around the web server requirement
    • Time for action loading a cone with AJAX + JSON
      • What just happened?
      • Have a go hero loading a Nissan GTX
    • Summary
  • 3. Lights!
    • Lights, normals, and materials
      • Lights
      • Normals
      • Materials
    • Using lights, normals, and materials in the pipeline
      • Parallelism and the difference between attributes and uniforms
    • Shading methods and light reflection models
      • Shading/interpolation methods
        • Goraud interpolation
        • Phong interpolation
      • Light reflection models
        • Lambertian reflection model
        • Phong reflection model
    • ESSLOpenGL ES Shading Language
      • Storage qualifier
      • Types
      • Vector components
      • Operators and functions
      • Vertex attributes
      • Uniforms
      • Varyings
      • Vertex shader
      • Fragment shader
    • Writing ESSL programs
      • Goraud shading with Lambertian reflections
    • Time for action updating uniforms in real time
      • What just happened?
      • Have a go hero moving light
      • Goraud shading with Phong reflections
    • Time for action Goraud shading
      • What just happened?
      • Phong shading
    • Time for action Phong shading with Phong lighting
      • What just happened?
    • Back to WebGL
      • Creating a program
      • Initializing attributes and uniforms
    • Bridging the gap between WebGL and ESSL
    • Time for action working on the wall
      • What just happened?
    • More on lights: positional lights
    • Time for action positional lights in action
      • What just happened?
      • Nissan GTS example
    • Summary
  • 4. Camera
    • WebGL does not have cameras
    • Vertex transformations
      • Homogeneous coordinates
      • Model transform
      • View transform
      • Projection transform
      • Perspective division
      • Viewport transform
    • Normal transformations
      • Calculating the Normal matrix
    • WebGL implementation
      • JavaScript matrices
      • Mapping JavaScript matrices to ESSL uniforms
      • Working with matrices in ESSL
    • The Model-View matrix
      • Spatial encoding of the world
        • Rotation matrix
        • Translation vector
        • The mysterious fourth row
    • The Camera matrix
      • Camera translation
    • Time for action exploring translations: world space versus camera space
      • What just happened?
      • Camera rotation
    • Time for action exploring rotations: world space versus camera space
      • What just happened?
      • Have a go hero combining rotations and translations
      • The Camera matrix is the inverse of the Model-View matrix
      • Thinking about matrix multiplications in WebGL
    • Basic camera types
      • Orbiting camera
      • Tracking camera
        • Rotating the camera around its location
        • Translating the camera in the line of sight
        • Camera model
    • Time for action exploring the Nissan GTX
      • What just happened?
      • Have a go hero updating light positions
    • The Perspective matrix
      • Field of view
      • Perspective or orthogonal projection
    • Time for action orthographic and perspective projections
      • What just happened?
      • Have a go hero integrating the Model-view and the projective transform
    • Structure of the WebGL examples
      • WebGLApp
      • Supporting objects
      • Life-cycle functions
        • Configure
        • Load
        • Draw
      • Matrix handling functions
        • initTransforms
        • updateTransforms
        • setMatrixUniforms
    • Summary
  • 5. Action
    • Matrix stacks
    • Animating a 3D scene
      • requestAnimFrame function
      • JavaScript timers
    • Timing strategies
      • Animation strategy
      • Simulation strategy
      • Combined approach: animation and simulation
      • Web Workers: Real multithreading in JavaScript
    • Architectural updates
      • WebGLApp review
      • Adding support for matrix stacks
      • Configuring the rendering rate
      • Creating an animation timer
    • Connecting matrix stacks and JavaScript timers
    • Time for action simple animation
      • What just happened?
      • Have a go hero simulating dropped and frozen frames
    • Parametric curves
      • Initialization steps
      • Setting up the animation timer
      • Running the animation
      • Drawing each ball in its current position
    • Time for action bouncing ball
      • What just happened?
    • Optimization strategies
      • Optimizing batch performance
      • Performing translations in the vertex shader
    • Interpolation
      • Linear interpolation
      • Polynomial interpolation
      • B-Splines
    • Time for action interpolation
      • What just happened?
    • Summary
  • 6. Colors, Depth Testing, and Alpha Blending
    • Using colors in WebGL
    • Use of color in objects
      • Constant coloring
      • Per-vertex coloring
      • Per-fragment coloring
    • Time for action coloring the cube
      • What just happened?
    • Use of color in lights
      • Using multiple lights and the scalability problem
        • How many uniforms can we use?
        • Simplifying the problem
    • Architectural updates
      • Adding support for light objects
        • Improving how we pass uniforms to the program
    • Time for action adding a blue light to a scene
      • What just happened?
      • Have a go hero adding interactivity with JQuery UI
      • Using uniform arrays to handle multiple lights
        • Uniform array declaration
        • JavaScript array mapping
    • Time for action adding a white light to a scene
    • Time for action directional point lights
      • What just happened?
    • Use of color in the scene
      • Transparency
      • Updated rendering pipeline
    • Depth testing
      • Depth function
    • Alpha blending
      • Blending function
      • Separate blending functions
      • Blend equation
      • Blend color
      • WebGL alpha blending API
      • Alpha blending modes
        • Additive blending
        • Subtractive blending
        • Multiplicative blending
        • Interpolative blending
    • Time for action blending workbench
      • What just happened?
    • Creating transparent objects
    • Time for action culling
      • What just happened?
    • Time for action creating a transparent wall
      • What just happened?
    • Summary
  • 7. Textures
    • What is texture mapping?
    • Creating and uploading a texture
    • Using texture coordinates
    • Using textures in a shader
    • Time for action texturing the cube
      • What just happened?
      • Have a go hero try a different texture
    • Texture filter modes
    • Time for action trying different filter modes
      • What just happened?
        • NEAREST
        • LINEAR
      • Mipmapping
        • NEAREST_MIPMAP_NEAREST
        • LINEAR_MIPMAP_NEAREST
        • NEAREST_MIPMAP_LINEAR
        • LINEAR_MIPMAP_LINEAR
      • Generating mipmaps
    • Texture wrapping
    • Time for action trying different wrap modes
      • What just happened?
        • CLAMP_TO_EDGE
        • REPEAT
        • MIRRORED_REPEAT
    • Using multiple textures
    • Time for action using multitexturing
      • What just happened?
      • Have a go hero moving beyond multiply
    • Cube maps
    • Time for action trying out cube maps
      • What just happened?
      • Have a go hero shiny logo
    • Summary
  • 8. Picking
    • Picking
    • Setting up an offscreen framebuffer
      • Creating a texture to store colors
      • Creating a Renderbuffer to store depth information
      • Creating a framebuffer for offscreen rendering
    • Assigning one color per object in the scene
    • Rendering to an offscreen framebuffer
    • Clicking on the canvas
    • Reading pixels from the offscreen framebuffer
    • Looking for hits
    • Processing hits
    • Architectural updates
    • Time for action picking
      • What just happened?
      • Picker architecture
    • Implementing unique object labels
    • Time for action unique object labels
      • What just happened?
      • Have a go hero clearing the scene
    • Summary
  • 9. Putting It All Together
    • Creating a WebGL application
    • Architectural review
    • Virtual Car Showroom application
      • Complexity of the models
      • Shader quality
      • Network delays and bandwidth consumption
    • Defining what the GUI will look like
      • Adding WebGL support
    • Implementing the shaders
    • Setting up the scene
    • Configuring some WebGL properties
      • Setting up the camera
      • Creating the Camera Interactor
      • The SceneTransforms object
      • Creating the lights
      • Mapping the Program attributes and uniforms
      • Uniform initialization
    • Loading the cars
      • Exporting the Blender models
      • Understanding the OBJ format
      • Parsing the OBJ files
      • Load cars into our WebGL scene
    • Rendering
    • Time for action customizing the application
      • What just happened?
      • Have a go Hero flying through the scene
    • Summary
  • 10. Advanced Techniques
    • Post-processing
      • Creating the framebuffer
      • Creating the geometry
      • Setting up the shader
    • Architectural updates
    • Time for action testing some post-process effects
      • What just happened?
      • Have a go hero funhouse mirror effect
    • Point sprites
    • Time for action using point sprites to create a fountain of sparks
      • What just happened?
      • Have a go hero bubbles!
    • Normal mapping
    • Time for action normal mapping in action
      • What just happened?
    • Ray tracing in fragment shaders
    • Time for action examining the ray traced scene
      • What just happened?
      • Have a go hero multiple spheres
    • Summary
  • Index

pokaż cały spis treści

ukryj recenzje