qq_24871849的博客

我们建立了上下文，设置了视口，顶点数组、矩阵和着色器也已经设置并初始化完成。我们定义了一个函数draw(),在这个函数中将接管WebGL上下文和我们之前建立的矩阵形象。首先，函数会清理一下画布并用黑色作为背景颜色。然后将顶点数组绑定到上下文中，使用着色器，并把顶点数组和矩阵作为输入传递给着色器。最后我们调用了WebGL的drawArrays()方法来绘制正方形。我们简单地告诉它，图元的类型和图元中有多少顶点，webgl会自动根据我们在上下文中设置的其他值（顶点、矩阵、着色器）完成绘制。 fu

着色器定义了如何将3D物体的像素切实地绘制在屏幕上。WebGL要求开发者为每个需要绘制的物体提供着色器。一个着色器可以同时应用于多个物体。所以在实际情况下，我们经常只提供一个着色器来满足整个应用程序，然后每次用不同的参数多次复用这个着色器。 var vertexShaderSource = " attribute vec3 vertexPos;\n" + " uniform mat4 modelViewMatrix;\n" +

在绘制正方形之前，我们需要两个矩阵。第一个矩阵用来定义正方形在3D坐标系中相对于相机的位置。这个矩阵称为模型视图矩阵，因为它综合了模型的变换和相机之间的关系。在示例中，我们对模型的变换就是将正方形沿着负z轴进行平移（即远离相机-3.333个单位）。我们需要的第二个矩阵就是投影矩阵，这个矩阵将被用于在着色器中将相机空间中模型的3D坐标转换为绘制的视口的2D坐标。 //设置模型视图矩阵和投影矩阵 var projectionMatrix, modelViewMatrix;

现在我们获取到了上下文并设置好了视口，可以准备开始绘制了。这个和2DCanvas还是很像的。WebGL的绘制是由图元组成的，图元的种类包括三角形（三角形数组）、三角形带（triangle strip）、点和线。图元使用的数据数组被称为Buffer,它定义了顶点的位置。下面的示例展示了如何创建一个大小为1*1的正方形的顶点数组。返回的Js对象存储了顶点数组信息、数组中每个顶点所占的尺寸（在这个示例中，包含三个浮点数来存储,x,y,z的值）、需要绘制的顶点的数量以及用于绘制正方形的图元的类型。（在这个示例中，我

一旦成功地从画布中获得了WebGL的绘制上下文，你就可以告诉它在哪里绘制矩形了。在WebGL中，这被称为视口（viewport),在WebGL中设置视口非常简单，只需要调用上下文的viewport()方法即可。 function initViewport(gl, canvas) { gl.viewport(0, 0, canvas.width, canvas.height); } 以下是api链接 https://developer.mozilla.

所有的WebGL渲染都发生在一个上下文中，这是一个JavaScript DOM对象，可以提供完整的WebGL API。这个结构类似于HTML5元素的2D绘制上下文。想要使用WebGLobal，只需要创建一个元素，然后获取与它关联的DOM对象，最后再为其获取一个WebGL上下文即可。 下边的示例展示了如何从画布的DOM对象中获得WebGL上下文。 function initWebGL(canvas) { var gl; try {

想要使用webgl把图形渲染到页面中，一个应用至少需要执行如下步骤。 1.创建一个画布元素。 2.获取画布元素上下文。 3.初始化视口。 4.创建一个或多个包含渲染数据的数组(通常是顶点数组）。 5.创建一个或多个矩阵，将顶点数组变换到屏幕空间中。 6.创建一个或多个着色器来实现绘制算法。 7.使用参数初始化着色器。 8.绘制。 ...

[email protected]:tparisi/WebGLBook.git