WebGL Beginner's Guide
eBook - ePub

WebGL Beginner's Guide

  1. 376 pages
  2. English
  3. ePUB (mobile friendly)
  4. Available on iOS & Android
eBook - ePub

WebGL Beginner's Guide

About this book

In Detail

WebGL is a new web technology that brings hardware-accelerated 3D graphics to the browser without installing additional software. As WebGL is based on OpenGL and brings in a new concept of 3D graphics programming to web development, it may seem unfamiliar to even experienced Web developers.

Packed with many examples, this book shows how WebGL can be easy to learn despite its unfriendly appearance. Each chapter addresses one of the important aspects of 3D graphics programming and presents different alternatives for its implementation. The topics are always associated with exercises that will allow the reader to put the concepts to the test in an immediate manner.

WebGL Beginner's Guide presents a clear road map to learning WebGL. Each chapter starts with a summary of the learning goals for the chapter, followed by a detailed description of each topic. The book offers example-rich, up-to-date introductions to a wide range of essential WebGL topics, including drawing, color, texture, transformations, framebuffers, light, surfaces, geometry, and more. With each chapter, you will "level up" your 3D graphics programming skills. This book will become your trustworthy companion filled with the information required to develop cool-looking 3D web applications with WebGL and JavaScript.

Approach

This book is a step-by-step tutorial that includes complete source code for all of the examples covered. Every chapter builds on top of the previous one thereby giving the reader an immediate feeling of progression. Each block of code is explained, and 3D web development concepts are diagrammed and covered in detail.

Who this book is for

This book is written for JavaScript developers who are interested in 3D web development. A basic understanding of the DOM object model and the jQuery library is ideal but not required. No prior WebGL knowledge is expected.

Trusted by 375,005 students

Access to over 1 million titles for a fair monthly price.

Study more efficiently using our study tools.

Information

Publisher
Packt Publishing
Year
2012
eBook ISBN
9781849691727
Edition
1
Topic
Computer Science
Subtopic
Computer Graphics
Index
Computer Science

WebGL Beginner's 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
ESSL—OpenGL 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
Struc...

Table of contents

  1. WebGL Beginner's Guide

Frequently asked questions

Yes, you can cancel anytime from the Subscription tab in your account settings on the Perlego website. Your subscription will stay active until the end of your current billing period. Learn how to cancel your subscription
No, books cannot be downloaded as external files, such as PDFs, for use outside of Perlego. However, you can download books within the Perlego app for offline reading on mobile or tablet. Learn how to download books offline
Perlego offers two plans: Essential and Complete
  • Essential is ideal for learners and professionals who enjoy exploring a wide range of subjects. Access the Essential Library with 800,000+ trusted titles and best-sellers across business, personal growth, and the humanities. Includes unlimited reading time and Standard Read Aloud voice.
  • Complete: Perfect for advanced learners and researchers needing full, unrestricted access. Unlock 1.4M+ books across hundreds of subjects, including academic and specialized titles. The Complete Plan also includes advanced features like Premium Read Aloud and Research Assistant.
Both plans are available with monthly, semester, or annual billing cycles.
We are an online textbook subscription service, where you can get access to an entire online library for less than the price of a single book per month. With over 1 million books across 990+ topics, we’ve got you covered! Learn about our mission
Look out for the read-aloud symbol on your next book to see if you can listen to it. The read-aloud tool reads text aloud for you, highlighting the text as it is being read. You can pause it, speed it up and slow it down. Learn more about Read Aloud
Yes! You can use the Perlego app on both iOS and Android devices to read anytime, anywhere — even offline. Perfect for commutes or when you’re on the go.
Please note we cannot support devices running on iOS 13 and Android 7 or earlier. Learn more about using the app
Yes, you can access WebGL Beginner's Guide by Diego Cantor, Brandon Jones in PDF and/or ePUB format, as well as other popular books in Computer Science & Computer Graphics. We have over one million books available in our catalogue for you to explore.