WebGL-二维平移

平移就是普通意义的“移动”物体。 用第一篇文章中的代码,你可以改变传递给 setRectangle 的值,移动矩形的位置。这里有个例子基于前一个例子。

首先我们来定义一些变量存储矩形的平移,宽,高和颜色。[……]

继续阅读

WebGL-三维透视投影


透视投影? 通俗的讲就是 近大远小。

在上方的示例中,远处的物体会变小,想要实现例子中近大远小的效果, 简单的做法就是将裁减空间中的 X 和 Y 值除以 Z 值。

你可以这么想:如果一个线段是 (10, 15) 到 (20,15), 它长度为十个单位,在当前的代码中它就是 10 个像素长, 但是如果我们将它除以 Z ,且 Z 值 为 1[……]

继续阅读

WebGL-重置画布尺寸


每个画布都有两个尺寸,一个是 drawingbuffer 的尺寸, 这个表示画布中有多少个像素。另一是画布显示的尺寸, CSS决定画布显示的尺寸。

你可以通过两种方式设置画布的 drawingbuffer尺寸。一种是使用HTML:[……]

继续阅读

WebGL-工作原理


此文上接WebGL 基础概念。 在继续学习之前,我们需要探讨一下WebGL在GPU上究竟做了什么。 WebGL在GPU上的工作基本上分为两部分,第一部分是将顶点(或数据流)转换到裁剪空间坐标, 第二部分是基于第一部分的结果绘制像素点。[……]

继续阅读

WebGL 基础篇2/2

  在绘制之前我们应该调整画布(canvas)的尺寸以匹配它的显示尺寸。画布就像图片一样有两个尺寸。 一个是它拥有的实际像素个数,另一个是它显示的大小。CSS决定画布显示的大小。 你应该尽可能用CSS设置所需画布大小 ,因为它比其它方式灵活的多。

  为了使画布的像素数和显示大小匹配[……]

继续阅读

WebGL 基础篇1/2

着色器获取数据的4种方法。

  1. 属性(Attributes)和缓冲缓冲是发送到GPU的一些二进制数据序列,通常情况下缓冲数据包括位置,法向量,纹理坐标,顶点颜色值等。 你可以存储任何数据。属性用来指明怎么从缓冲中获取所需数据并将它提供给顶点着色器。 例如你可能在缓冲中用三个32位的浮点型数[……]

    继续阅读