nach oben

2012 | Buch

Beginning WebGL for HTML5

verfasst von: Brian Danchilla

Verlag: Apress

Enthalten in: Springer Professional "Wirtschaft+Technik" , Springer Professional "Technik" , Springer Professional "Wirtschaft"

Einloggen, um Zugang zu erhalten

Über dieses Buch

Beginning WebGL for HTML5 gets you rapidly up to speed with WebGL, a powerful new graphics language within the browser. You'll render realistic scenes with advanced lighting models, shadows, blending and textures. You'll also use mathematics to model fractals and particle systems. Going beyond that, Beginning WebGL for HTML5 presents advanced vertex and fragment shader usage for creating stunning, top-end results.

You'll benefit from using modern frameworks to rapidly develop complex scenes, and make use of many tools to help improve rendering performance and debugging. Beginning WebGL for HTML5 builds your critical WebGL development skills while being enjoyable at each step of the way.

Quickly get up to speed with WebGL Render realistic scenes Work faster with frameworks Improve rendering performance

Inhaltsverzeichnis

Frontmatter

Chapter 1. Setting the Scene

Abstract

In this chapter we will go through all the steps of creating a scene rendered with WebGL. We will show you how to

obtain a WebGL context
create different primitive types in WebGL
understand and create vertex buffer objects (VBOs) and attributes
do static two-dimensional rendering
create a program and shaders
set up the view matrices
add animation and movement
render a three-dimensional model

Brian Danchilla

Chapter 2. Shaders 101

Abstract

In this chapter, we will be covering the GL Shading Language (GLSL) in depth. Topics that we will cover include

an overview of the WebGL graphics pipeline
the difference between fixed functionality and modern-day programmable shaders
the role of vertex shaders and fragment shaders within the GLSL
how to create and use shaders within a WebGL application
a detailed overview of the GLSL including its primitive types and built-in functions
examples of procedural fragment shaders

Brian Danchilla

Chapter 3. Textures and Lighting

Abstract

In this chapter we will cover two topics that are fundamental to producing realistic scenes, texture and lighting. Specifically, we will

discuss what textures are and how to apply them
show what texture options are available and how to configure these
use multiple textures in a shader
present a basic lighting model
create a directional light shader

Brian Danchilla

Chapter 4. Increasing Realism

Abstract

In this chapter we will present ways to improve the realism of our scenes. As proper lighting is so fundamental to our visual perception, much of this chapter will build upon the end of the last chapter and focus on improvements to our lighting model. Specifically, we will

discuss the difference between flat and smooth shading
explain the Phong illumination model and then implement it as a shader program
show how to add fog
discuss techniques to generate shadows and add global illumination
blend objects and calculate reflection and refraction

Brian Danchilla

Chapter 5. Physics

Abstract

In this chapter, we will introduce modeling physical interactions among objects in our scene. Topics that we will cover in this chapter are:

Position, velocity, acceleration
Forces such as gravity and friction
Projectile motion
Detecting and reacting to collisions
Elasticity and the conservation of momentum
Potential and kinetic energy

Brian Danchilla

Chapter 6. Fractals, Height Maps, and Particle Systems

Abstract

This chapter presents a hodgepodge of effects that we can achieve with mathematics. Topics that we will cover include:

painting directly with the GPU
an introduction to fractals and the Mandelbrot set
height maps and terrain generation
rotating the camera with the mouse
particle systems

Brian Danchilla

Chapter 7. Three.js Framework

Abstract

There are many WebGL frameworks that are available to abstract away the lower-level application programming interface (API) calls that we have covered in the first six chapters of the book. This abstraction helps to make WebGL development easier and more productive. We will discuss several WebGL frameworks in the next chapter. In this chapter we will concentrate on one of the most widely used frameworks — Three.js. We will cover the following:

A background of the library
How to start development with Three.js
Falling back to a 2D canvas context for rendering if WebGL is not supported
Three.js API calls to easily create cameras, objects, and use lighting models
Show the equivalent Three.js code to some examples found in previous chapters, which used direct low-level WebGL API calls
Introduce tQuery, a library that blends Three.js with jQuery selectors

Brian Danchilla

Chapter 8. Productivity Tools

Abstract

In the previous chapter we looked at the excellent Three.js WebGL framework and showed how it abstracts lowerlevel WebGL API calls. This abstraction simplifies and expedites development. This chapter introduces additional tools that can help your development be productive and enjoyable. Topics that we will cover in this chapter are the following:

The merits of using a WebGL framework and the benefits of learning core WebGL
Currently available frameworks
Basic “Hello World” philoGL and GLGE framework examples
Loading existing meshes and models
File formats and import/export tools
Finding and modifying existing shaders and textures
JavaScript physics frameworks
A physics demo using the physi.js library with Three.js

Brian Danchilla

Chapter 9. Debugging and Performance

Abstract

In this chapter we will show how to troubleshoot errors and improve application performance. We will:

present helpful tools for debugging WebGL code and shaders
go over some common errors and their solutions
show ways to get more performance out of WebGL by optimizing our code to remove common bottlenecks
identify WebGL best practices

Brian Danchilla

Chapter 10. Effects, Tips, and Tricks

Abstract

In this chapter, we will introduce a variety of WebGL effects, tips, and tricks such as these:

Basic image processing
Image processing using convolution filters
Antialiasing
Nonphotorealistic shaders
Framebuffers and renderbuffers
Picking objects from the canvas
Shadow map implementation

Brian Danchilla

Backmatter

Titel: Beginning WebGL for HTML5
verfasst von: Brian Danchilla
Verlag: Apress
Electronic ISBN: 978-1-4302-3997-0
Print ISBN: 978-1-4302-3996-3
DOI: https://doi.org/10.1007/978-1-4302-3997-0