WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL, Rough Cuts

Description

• Copyright 2014
• Dimensions: 7" x 9"
• Pages: 600
• Edition: 1st

• Rough Cuts
• ISBN-10: 0-13-336491-7
• ISBN-13: 978-0-13-336491-0

This is the Rough Cut version of the printed book.

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 <canvas> 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.



Sample Content

Table of Contents

Preface     xvii

1. Overview of WebGL     1

Advantages of WebGL     3

   You Can Start Developing 3D Graphics Applications Using Only a Text Editor     3

   Publishing Your 3D Graphics Applications Is Easy     4

   You Can Leverage the Full Functionality of the Browser     5

   Learning and Using WebGL Is Easy     5

Origins of WebGL     5

Structure of WebGL Applications     6

Summary     7

2. Your First Step with WebGL     9

What Is a Canvas?     9

   Using the <canvas> Tag     11

   DrawRectangle.js     13

The World’s Shortest WebGL Program: Clear Drawing Area     16

   The HTML File (HelloCanvas.html)      17

   JavaScript Program (HelloCanvas.js)      18

   Experimenting with the Sample Program      23

Draw a Point (Version 1)     23

   HelloPoint1.html     25

   HelloPoint1.js      25

   What Is a Shader?      27

   The Structure of a WebGL Program that Uses Shaders      28

   Initializing Shaders      30

   Vertex Shader      33

   Fragment Shader      35

   The Draw Operation      36

   The WebGL Coordinate System     38

   Experimenting with the Sample Program      40

Draw a Point (Version 2)      41

   Using Attribute Variables      41

   Sample Program (HelloPoint2.js)      42

   Getting the Storage Location of an Attribute Variable      44

   Assigning a Value to an Attribute Variable      45

   Family Methods of gl.vertexAttrib3f()      47

   Experimenting with the Sample Program      49

Draw a Point with a Mouse Click      50

   Sample Program (ClickedPoints.js)      50

   Register Event Handlers      52

   Handling Mouse Click Events     



Updates

Submit Errata

