Professional WebGL Programming E-Book

Andreas Anyuru

• Herausgeber: John Wiley & Sons
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Seitenzahl: 516

Veröffentlichungsjahr: 2012

Beschreibung

Everything you need to know about developing hardware-accelerated 3D graphics with WebGL! As the newest technology for creating 3D graphics on the web, in both games, applications, and on regular websites, WebGL gives web developers the capability to produce eye-popping graphics. This book teaches you how to use WebGL to create stunning cross-platform apps. The book features several detailed examples that show you how to develop 3D graphics with WebGL, including explanations of code snippets that help you understand the why behind the how. You will also develop a stronger understanding of WebGL development from coverage that: *Provides a comprehensive overview of WebGL and shows how it relates to other graphics-related technologies *Addresses important topics such as the WebGL graphics pipeline, 3D transformations, texturing and lighting *Teaches you how to write vertex shaders and fragment shaders for WebGL *Includes a lot of useful guidelines, tips, and tricks for WebGL performance optimizations Professional WebGL Programming is the first book on the market to delve into this fascinating topic and it puts you on your way to mastering the possibilities that exist with WebGL.

Leseprobe

Contents

Chapter 1: Introducing WEBGL

The Basics of WebGL

So Why is WebGL so Great?

Designing a Graphics API

An Overview of Graphics Hardware

Understanding the WebGL Graphics Pipeline

Comparing WebGL to Other Graphics Technologies

Linear Algebra for 3D Graphics

Summary

Chapter 2: Creating Basic Webgl Examples

Drawing a Triangle

Understanding the WebGL Coding Style

Debugging Your WebGL Application

Using the DOM API to Load Your Shaders

Putting It Together in a Slightly More Advanced Example

Summary

Chapter 3: Drawing

WebGL Drawing Primitives and Drawing Methods

Typed Arrays

Exploring Different Ways to Draw

Interleaving Your Vertex Data for Improved Performance

Using a Vertex Array or Constant Vertex Data

A Last Example to Wind Things Up

Summary

Chapter 4: Compact Javascript Libraries and Transformations

Working with Matrices and Vectors in JavaScript

Using Transformations

Understanding the Complete Transformation Pipeline

Getting Practical with Transformations

Understanding the Importance of Transformation Order

A Complete Example: Drawing Several Transformed Objects

Summary

Chapter 5: Texturing

Understanding Lost Context

Introducing 2D Textures and Cubemap Textures

Loading Your Textures

Defining Your Texture Coordinates

Using Your Textures in Shaders

Working with Texture Filtering

Understanding Texture Coordinate Wrapping

A Complete Texture Example

Using Images for Your Textures

Understanding Same-Origin Policy and Cross-Origin Resource Sharing

Summary

Chapter 6: Animations and User Input

Animating the Scene

Event Handling for User Interaction

Applying Your New Knowledge

Summary

Chapter 7: Lighting

Understanding Light

Working with a Local Lighting Model

Understanding the Phong Reflection Model

Understanding the JavaScript Code Needed for WebGL Lighting

Using Different Interpolation Techniques for Shading

Understanding the Vectors that Must be Normalized

Using Different Types of Lights

Understanding the Attenuation of Light

Understanding Light Mapping

Summary

Chapter 8: WEBGL Performance Optimizations

WebGL under the Hood

WebGL Performance Optimizations

A Closer Look at Blending

Taking WebGL Further

Summary

Introduction

Advertisements

Chapter 1

Introducing WebGL

WHAT’S IN THIS CHAPTER?

The basics of WebGL

Why 3D graphics in the browser offer great possibilities

How to work with an immediate-mode API

The basics of graphics hardware

The WebGL graphics pipeline

How WebGL compares to other graphics technologies

Some basic linear algebra needed for WebGL

In this chapter you will be introduced to WebGL and learn some important theory behind WebGL, as well as general theory behind 3D graphics. You will learn what WebGL is and get an understanding of the graphics pipeline that is used for WebGL.

You will also be given an overview of some other related graphics standards that will give you a broader understanding of WebGL and how it compares to these other technologies.

The chapter concludes with a review of some basic linear algebra that is useful to understand if you really want to master WebGL on a deeper level.

THE BASICS OF WEBGL

WebGL is an application programming interface (API) for advanced 3D graphics on the web. It is based on OpenGL ES 2.0, and provides similar rendering functionality, but in an HTML and JavaScript context. The rendering surface that is used for WebGL is the HTML5 canvas element, which was originally introduced by Apple in the WebKit open-source browser engine. The reason for introducing the HTML5 canvas was to be able to render 2D graphics in applications such as Dashboard widgets and in the Safari browser on the Apple Mac OS X operating system.

Based on the canvas element, Vladimir Vukićević at Mozilla started experimenting with 3D graphics for the canvas element. He called the initial prototype Canvas 3D. In 2009 the Khronos Group started a new WebGL working group, which now consists of several major browser vendors, including Apple, Google, Mozilla, and Opera. The Khronos Group is a non-profit industry consortium that creates open standards and royalty-free APIs. It was founded in January 2000 and is behind a number of other APIs and technologies such as OpenGL ES for 3D graphics for embedded devices, OpenCL for parallel programming, OpenVG for low-level acceleration of vector graphics, and OpenMAX for accelerated multimedia components. Since 2006 the Khronos Group has also controlled and promoted OpenGL, which is a 3D graphics API for desktops.

The final WebGL 1.0 specification was frozen in March 2011, and WebGL support is implemented in several browsers, including Google Chrome, Mozilla Firefox, and (at the time of this writing) in the development releases of Safari and Opera.

For the latest information about which versions of different browsers support WebGL, visitwww.khronos.org/webgl/.

SO WHY IS WEBGL SO GREAT?

In the early days of the web, the content consisted of static documents of text. The web browser was used to retrieve and display these static pages. Over time the web technology has evolved tremendously, and today many websites are actually full-featured applications. They support two-way communication between the server and the client, users can register and log in, and web applications now feature a rich user interface that includes graphics as well as audio and video.

The fast evolution of web applications has led to them becoming an attractive alternative to native applications. Some advantages of web applications include the following:

They are cheap and easy to distribute to a lot of users. A compatible web browser is all that the user needs.

Maintenance is easy. When you find a bug in your application or when you have added some nice new features that you want your users to benefit from, you only have to upgrade the application on the web server and your users are able to benefit from your new application immediately.

At least in theory, it is easier to have cross-platform support (i.e., to support several operating systems such as Windows, Mac OS, Linux, and so on) since the application is executing inside the web browser.

However, to be honest, web applications also have had (and still have) some limitations compared to native applications. One limitation has been that the user interface of web applications has not been as rich as for their native application counterparts. This changed a lot with the introduction of the HTML5 canvas tag, which made it possible to create really advanced 2D graphics for your web applications. But the initial HTML5 canvas tag only specified a 2D context that does not support 3D graphics.

With WebGL, you get hardware-accelerated 3D graphics inside the browser. You can create 3D games or other advanced 3D graphics applications, and at the same time have all the benefits that a web application has. In addition to these benefits, WebGL also has the following attractive characteristics:

WebGL is an open standard that everyone can implement or use without paying royalties to anyone.

WebGL takes advantage of the graphics hardware to accelerate the rendering, which means it is really fast.

WebGL runs natively in the browsers that support it; no plug-in is needed.

Since WebGL is based on OpenGL ES 2.0, it is quite easy to learn for many developers who have previous experience with this API, or even for developers who have used desktop OpenGL with shaders.

The WebGL standard also offers a great way for students and others to learn and experiment with 3D graphics. There is no need to download and set up a toolchain like you have to do for most other 3D APIs. To create your WebGL application, you only need a text editor to write your code, and to view your creation you can just load your files into a web browser with WebGL support.