Open XXHolic opened 3 years ago
尝试 JavaScript WebGL 绘制一条直线 之后总算是熟悉了一点，但还是有些疑惑，在此集中记录一下。
在绘制直线的示例中，如果按照 Canvas 的大小修改顶点坐标，发现大都看不到对应的点。查资料说每个顶点的 x，y，z 坐标都应该在 -1.0 到 1.0 之间，超出这个坐标范围的顶点都将不可见。原因是整个过程中涉及到多个坐标系统的转换。
多个坐标系转换的优点是，一些操作或运算在特定的坐标系中才有意义且更方便容易。一个顶点到最后展示到屏幕，主要经历了下面一些坐标系转换：
glViewport
缓冲是分类型的，尝试了下 gl.ARRAY_BUFFER 类型每次相同的变量会覆盖之前的数据。
gl.ARRAY_BUFFER
这是基于绘制直线示例，最后只绘制了垂直直线：
let vertices = [-0.5, 0, 0.0, 0.5, 0, 0.0]; // 水平直线 let vertices2 = [0, 0.5, 0.0, 0, -0.5, 0.0]; // 垂直直线 setBuffers(glContext, vertices); setBuffers(glContext, vertices2);
在频繁绘制的场景中，vertexAttribPointer 每次都需要重新解析顶点，还是解析一次就足够了？
在绘制直线示例的基础上尝试发现：
enableVertexAttribArray 方法也是类似。
在频繁绘制的场景中，useProgram 是否需要重新激活？
在绘制直线示例的基础上尝试发现只需要激活一次，这是示例。
基于的坐标系是右手坐标系。
按如下的步骤做：
如果你的动作正确，那么你的大拇指指向正 x 轴方向，食指指向正 y 轴方向，中指指向正 z 轴方向。
摘自官方提供的 WebGL 1.0 卡片索引。
输入：
输出：
目录
引子
尝试 JavaScript WebGL 绘制一条直线 之后总算是熟悉了一点，但还是有些疑惑，在此集中记录一下。
顶点坐标范围为什么要在 -1.0 到 1.0 之间 ？
在绘制直线的示例中，如果按照 Canvas 的大小修改顶点坐标，发现大都看不到对应的点。查资料说每个顶点的 x，y，z 坐标都应该在 -1.0 到 1.0 之间，超出这个坐标范围的顶点都将不可见。原因是整个过程中涉及到多个坐标系统的转换。
多个坐标系转换的优点是，一些操作或运算在特定的坐标系中才有意义且更方便容易。一个顶点到最后展示到屏幕，主要经历了下面一些坐标系转换：
glViewport函数所定义的坐标范围内。变换出来的坐标将会送到光栅器，将其转化为片元。多次缓冲数据是覆盖还是增量 ？
缓冲是分类型的，尝试了下
gl.ARRAY_BUFFER类型每次相同的变量会覆盖之前的数据。这是基于绘制直线示例，最后只绘制了垂直直线：
vertexAttribPointer 解析顶点一次就足够了 ？
在频繁绘制的场景中，vertexAttribPointer 每次都需要重新解析顶点，还是解析一次就足够了？
在绘制直线示例的基础上尝试发现：
enableVertexAttribArray 方法也是类似。
useProgram 函数激活一次就足够了 ？
在频繁绘制的场景中，useProgram 是否需要重新激活？
在绘制直线示例的基础上尝试发现只需要激活一次，这是示例。
基于的坐标系是什么 ？
基于的坐标系是右手坐标系。
按如下的步骤做：
如果你的动作正确，那么你的大拇指指向正 x 轴方向，食指指向正 y 轴方向，中指指向正 z 轴方向。
常见的变量类型有那些？
摘自官方提供的 WebGL 1.0 卡片索引。
存储限定符
基本类型
内置的输入/输出变量有那些 ？
摘自官方提供的 WebGL 1.0 卡片索引。
顶点着色器特殊变量
输入：
片元着色器特殊变量
输入：
输出：
参考资料
:wastebasket:
最近看了芥川龙之介的小说《河童》，里面构建的河童世界真是让我涨了见识。下面是一些摘录。 > 河童分娩也跟我们人类一样，要请医生和产婆帮忙。但临产的时候，做父亲的就像打电话似的对着做母亲的下身大声问到：“你好好考虑一下愿不愿意生到这个世界上来，再回答我。” > 募集遗传义勇队——，健全的雌雄河童们，为了消灭恶性遗传，去和不健全的雌雄河童结婚吧！ 在河童的世界里有一个《职工屠宰法》，被解雇的河童职工会被宰掉，把肉做成各种食物。这样可以保持市场肉价平稳以及解除饿死的境况。