WebGL-shader和GLSL


我们之前提到过着色器和GLSL,但是没有涉及细节,你可能已经对此有所了解, 但以防万一,这里将详细讲解着色器和GLSL。

在工作原理中我们提到,WebGL每次绘制需要两个着色器, 一个顶点着色器和一个片断着色器,每一个着色器都是一个方法。 一个顶点着色器和一个片断着色器链接在一起放入一个着色程序中(或者只叫程序)。 一个典型的WebGL应用会有多个着色程序。[……]

Read more

WebGL-二维矩阵

之前的三篇文章讲了如何对二维物体进行平移, 旋转,和 缩放。 每种变换都改变了着色器并且这些变换还受先后顺序影响。在 前例中我们先缩放,再旋转,最后平移,如果执行顺序不同 结果也不同。
例如,这是缩放 2, 1 ,旋转30度,然后平移 100, 0 的结果:[……]

Read more

WebGL-二维旋转

首先我想向你介绍一个叫做“单位圆”的东西。如果你还记得初中数学的话(别睡着了啊~喂!), 一个圆有一个半径,圆的半径是圆心到圆边缘的距离。单位圆是半径为 1.0 的圆。
这里有个单位圆:[……]

Read more

WebGL-二维平移

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

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

Read more

WebGL-三维透视投影


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

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

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

Read more

WebGL-重置画布尺寸


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

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

Read more

WebGL-工作原理


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

Read more

WebGL 基础篇1/2

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

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

Read more