探索WebGL：HTML5的3D图形编程入门

需积分: 10 196 浏览量更新于2024-07-24 1 收藏 10.6MB PDF 举报

"Apress.Beginning.WebGL.for.HTML5.Sep.2012.pdf" 是一本关于WebGL技术的入门书籍，适用于HTML5开发，旨在教授读者如何在Web环境中创建强大的3D图形。本书详细介绍了WebGL的基础知识和高级应用，包括以下几个主要章节： 1. **Chapter 1: Setting the Scene** - 这一章可能涵盖了WebGL的基本环境设置，介绍如何在HTML5页面中引入WebGL，并讨论基本的渲染循环和场景构建。 2. **Chapter 2: Shaders 101** - 深入讲解着色器，这是WebGL中的核心概念，用于计算物体的颜色、光照等视觉效果。读者将学习顶点着色器和片段着色器的工作原理以及如何编写它们。 3. **Chapter 3: Textures and Lighting** - 讲解纹理映射和光照模型，这两者对于3D图形的真实感至关重要。读者将学会如何应用不同的纹理和创建复杂的光照效果。 4. **Chapter 4: Increasing Realism** - 进一步提升3D图形的逼真度，可能涵盖高级的渲染技巧，如法线贴图、深度贴图、反射和折射等。 5. **Chapter 5: Physics** - 探索物理模拟在WebGL中的应用，如何实现碰撞检测、重力和其他物理行为，让3D对象动态交互。 6. **Chapter 6: Fractals, Height Maps, and Particle Systems** - 引入分形几何、高度图和粒子系统，这些是创造复杂3D景观和特效的重要工具。 7. **Chapter 7: Three.js Framework** - 介绍Three.js，一个流行的JavaScript库，用于简化WebGL编程。读者将学习如何利用这个库来快速开发3D项目。 8. **Chapter 8: Productivity Tools** - 讨论提高WebGL开发效率的工具和最佳实践，可能包括调试、优化和代码组织策略。 9. **Chapter 9: Debugging and Performance** - 专门讲解WebGL的调试技巧和性能优化，帮助开发者找出并解决性能瓶颈。 10. **Chapter 10: Effects, Tips, and Tricks** - 提供各种特效、技巧和窍门，使3D图形更加引人入胜和专业。 11. **Afterword: The Future of WebGL** - 对WebGL技术的未来进行展望，讨论其发展趋势和潜力。此外，书中有三个附录，分别涵盖了基础的HTML5和JavaScript知识、图形学复习和WebGL规范的相关细节，以及额外的学习资源。这本书是为那些想要利用HTML5和WebGL技术创建交互式3D图形的开发者准备的，无论他们是有经验的程序员还是初学者，都能从中获得宝贵的指导。通过深入学习，读者将能够掌握创建动态、引人入胜的3D Web体验所需的技能。

CHAPTER 1 ■ SETTING THE SCENE

var myBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, myBuffer);

gl.bufferData(gl.ARRAY_BUFFER, data, STATIC_DRAW);

Notice that in the gl.bufferData line, we do not explicitly specify the buer to place the data into. WebGL

implicitly uses the currently bound buer.

When you are done with a buer you can delete it with a call to this:

void deleteBuffer(WebGLBuffer buffer);

As the chapter progresses, we will show how to setup a shader program and pass VBO data into it.

Attributes and Uniforms

As mentioned, vertices have attributes which can be passed to shaders. We can also pass uniform values to

the shader which will be constant for each vertex. Shader attributes and uniforms can get complex and will be

covered in more depth in the next chapter but touched upon here. As the shader is a compiled external program,

we need to be able to reference the location of all variables within the program. Once we obtain the location of a

variable, we can send data to the shader from our web application. To get the location of an attribute or uniform

within the WebGL program, we use these API calls:

GLint getAttribLocation(WebGLProgram program, DOMString name)

WebGLUniformLocation getUniformLocation(WebGLProgram program, DOMString name)

e GLint and WebGLUniformLocation return values are references to the location of the attribute or uniform

within the shader program. e ﬁrst parameter is our WebGLProgram object and the second parameter is the

attribute name as found in the vertex or fragment shader source. If we have an attribute in a shader by the name

of "aVertexPosition", we obtain its position within our JavaScript like this:

var vertexPositionAttribute = gl.getAttribLocation(glProgram, "aVertexPosition");

If we are sending an array of data to an attribute, we have to enable array data with a call to this:

void enableVertexAttribArray(GLuint index)

Here, the index is the attribute location that we previously obtained and stored. e return value is void

because the function returns no value.

With our previously deﬁned attribute location, this call looks like the following:

gl.enableVertexAttribArray(vertexPositionAttribute);

Now that we have the location of an attribute and have told our shader that we will be using an array of

values, we assign the currently bound ARRAY_BUFFER target to this vertex attribute as we have demonstrated in the

previous section:

gl.bindBuffer(gl.ARRAY_BUFFER, myBuffer);

Finally, we let our shader know how to interpret our data. We need to remember that the shader knows nothing

about the incoming data. Just because we name an array to help us understand what data it contains, such as

myColorData, the shader just sees data without any context. e API call to explain our data format is as follows:

void vertexAttribPointer(GLuint index, GLint size, GLenum type, GLboolean normalized, GLsizei

stride, GLintptr offset)

size is the number of components per attribute. For example, with RGB colors, it would be 3; and with an

alpha channel, RGBA, it would be 4. If we have location data with (x,y,z) attributes, it would be 3; and if we

had a fourth parameter w, (x,y,z,w), it would be 4. Texture parameters (s,t) would be 2. type is the datatype,

stride and offset can be set to the default of 0 for now and will be reexamined in Chapter 9 when we discuss

interleaved arrays.

CHAPTER 1 ■ SETTING THE SCENE

Eventually, we will pass in vertex points that correspond to the two triangles that we are rendering, but right

now nothing is passed in and so we still see only the green clear color. In Listing 1-3 we have also added new

variables that will store our WebGL shading language program, fragment and vertex shaders, vertex position

attribute that will be passed to the vertex shader, and the vertex buer object that will store our triangle vertices

as shown in this code:

var gl = null,

canvas = null,

glProgram = null,

fragmentShader = null,

vertexShader = null;

var vertexPositionAttribute = null,

trianglesVerticeBuffer = null;

Note ■ Our modiﬁed line in Listing 1-3 to get the WebGL context is future compatible. It will check for the “webgl”

context ﬁrst. If this is not supported, it will try the “experimental-webgl” context next, as shown in the following

code:

gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");

Once we successfully obtain a WebGL context, we call four functions:

setupWebGL();

initShaders();

setupBuffers();

drawScene();

We currently have these functions deﬁned as follows:

function setupWebGL()

{

//set the clear color to a shade of green

gl.clearColor(0.1, 0.5, 0.1, 1.0);

gl.clear(gl.COLOR_BUFFER_BIT);

}

function initShaders(){}

function setupBuffers(){}

function drawScene(){}

e ﬁrst function sets the clear color to green, and the other three at this point are stub functions so that

the program runs without error. e next bit of functionality that we will implement is the creation of the shader

program and shaders. is involves using several functions to set up each shader and the program.

For each shader, we call the API function createShader to create a WebGLShader object, in which the type

parameter is either VERTEX_SHADER or FRAGMENT_SHADER for the vertex and fragment shaders, respectively:

WebGLShader createShader(GLenum type)

ese calls look like this:

var vertexShader = gl.createShader(gl.VERTEX_SHADER);

var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

Next we attach the source to each shader with API calls to:

剩余347页未读，继续阅读

ffufeng

粉丝: 2

探索WebGL：HTML5的3D图形编程入门

《Apress.Expert.JavaScript》书籍深度解读

《Apress.Pro.Expression.Blend.4》：精通微软WPF与Silverlight开发的全面指南

精通Web前端：Apress.Pro JavaScript实战指南

Apress.Beginning.WebGL.for.HTML5.2012

apress.Beginning.SQL.Server.2012.for.Developers.3rd.Edition.May.2012

Apress.Beginning.Python.From.Novice.to.Professional.Sep.2005.pdf + 皮大庆 学习笔记

Apress.Beginning.Ubuntu.Linux.5th.Edition.Sep.2010.rar

Apress.Beginning.PhoneGap.Mobile.Web.Framework.for.JavaScript.and.HTML5.2012

Apress.Beginning.ASP.NET.4.in.VB.2010.Sep.2010.rar

Apress.Beginning.C.Sharp.2008.From.Novice.to.Professional.2nd.Sep.2008

最新资源

Apress.Beginning.Python.From.Novice.to.Professional.Sep.2005.pdf + 皮大庆学习笔记