WebGL入门指南：打造HTML5中的3D图形

4星 · 超过85%的资源需积分: 10 32 浏览量更新于2024-07-23 4 收藏 10.71MB PDF 举报

"Beginning.WebGL.for.HTML5.pdf" 是一本介绍WebGL开发的书籍，适合初学者，旨在帮助读者理解并掌握在HTML5环境中创建3D图形的技术。 WebGL是一种在网页浏览器中实现强大3D图形渲染的开放标准技术。它基于OpenGL标准，通过JavaScript API与HTML5结合，无需任何插件即可在现代浏览器上运行。本书通过详细的章节结构，逐步引导读者深入WebGL的世界。 1. **第1章：设置场景** (Chapter1: Setting the Scene) - 本章介绍了WebGL的基础概念，包括如何初始化WebGL上下文，以及在HTML5 Canvas元素上绘制3D图形的基本步骤。 - 讲解了坐标系统、视口和投影的概念，帮助读者理解3D图形在2D屏幕上的表示方式。 2. **第2章：着色器基础** (Chapter2: Shaders101) - 着色器是WebGL中的核心组件，用于计算像素的颜色和位置。本章详细解释了顶点着色器和片段着色器的作用，以及如何编写和使用GLSL（OpenGL Shading Language）程序。 - 还可能涵盖了向量、矩阵运算以及如何进行基本的几何变换。 3. **第3章：纹理与光照** (Chapter3: Textures and Lighting) - 学习如何将纹理应用到3D模型上，提高视觉效果。讲解了纹理坐标、纹理映射以及不同类型的纹理格式。 - 光照是增强真实感的关键，本章可能涉及光照模型，如环境光、漫反射光和镜面高光，以及光照计算的方法。 4. **第4章：增加现实感** (Chapter4: Increasing Realism) - 探讨更高级的图形技术，如法线贴图、镜面反射、阴影投射等，以提升3D场景的真实感和深度感。 5. **第5章：物理模拟** (Chapter5: Physics) - 介绍如何在WebGL中实现简单的物理模拟，如碰撞检测和刚体动力学，使3D对象能动态交互。 6. **第6章：分形、高度图和粒子系统** (Chapter6: Fractals, HeightMaps, and Particle Systems) - 分形用于创建复杂且自相似的几何形状；高度图则常用于地形渲染；粒子系统常用于模拟火、烟雾等效果，这些都是3D场景中的常见元素。 7. **第7章：Three.js框架** (Chapter7: Three.js Framework) - Three.js是一个流行的JavaScript库，简化了WebGL的使用。本章会介绍Three.js的基本用法，包括对象创建、相机控制、动画制作等。 8. **第8章：生产力工具** (Chapter8: ProductivityTools) - 讨论提高WebGL开发效率的各种工具和技巧，如预处理器、调试器、优化方法等。 9. **第9章：调试和性能** (Chapter9: Debugging and Performance) - 教授如何调试WebGL代码，找出性能瓶颈，并提供优化策略以确保在各种设备上流畅运行。 10. **第10章：效果、提示和技巧** (Chapter10: Effects, Tips, and Tricks) - 展示一些高级技巧，如后期处理效果、抗锯齿、多通道渲染等，以及如何利用WebGL实现独特视觉效果。 11. **附录** 包括HTML5和JavaScript基础回顾、图形学复习、WebGL规范的细节以及更多资源推荐，帮助读者巩固基础，扩展知识。本书通过丰富的实例和清晰的解释，旨在让读者能够掌握WebGL编程的核心技能，从而能够创建出令人印象深刻的3D网页应用程序。对于想要进入WebGL领域的开发者来说，是一份宝贵的参考资料。

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页未读，继续阅读

zhudaijie12

粉丝: 0
资源: 21

WebGL入门指南：打造HTML5中的3D图形

HTML5.Games.Creating.Fun.with.HTML5.CSS3.and.WebGL.pdf

Learning.Three.js.The.JavaScript.3D.Library.for.WebGL

Laya.init webgl

http://www.webgl3d.cn/

pdf.js pdf.worker.js

unity打包webgl，文字不显示

Unity版本2021.3.36 WebGL Build Windows操作系统 sendfile

设置Firefox支持webgl

three.js webgl 机房 机柜

webgl接口测试工具

最新资源

three.js webgl 机房机柜