SPECIAL OFFERS
Keep up with new releases and promotions. Sign up to hear from us.
Rough Cuts are manuscripts that are developed but not yet published, available through Safari. Rough Cuts provide you access to the very latest information on a given topic and offer you the opportunity to interact with the author to influence the final publication.
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.
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