JavaScript|JavaScript WebGL 基础疑惑点
引子
尝试 JavaScript WebGL 绘制一条直线 之后总算是熟悉了一点,但还是有些疑惑,在此集中记录一下。
- Origin
- My GitHub
多个坐标系转换的优点是,一些操作或运算在特定的坐标系中才有意义且更方便容易。一个顶点到最后展示到屏幕,主要经历了下面一些坐标系转换:
文章图片
- 局部空间中的局部坐标(Local Coordinate),是物体的起始坐标。
- 接着通过模型矩阵变换,变为世界空间的世界坐标(World Coordinate)。这些坐标相对于世界的全局原点,它们会和其它物体一起相对于世界的原点进行摆放。
- 接着通过观察矩阵变换,变为观察空间的观察坐标(View Coordinate),使得每个坐标都是从摄像机或者说观察者的角度进行观察的。
- 接着需要将其投影到裁剪空间的裁剪坐标(Clip Coordinate)。裁剪坐标会被处理至 -1.0 到 1.0 的范围内,并判断哪些顶点将会出现在屏幕上。
- 最后,将裁剪坐标变换为屏幕空间的屏幕坐标(Screen Coordinate),使用一个叫做视口变换(Viewport Transform)的过程。视口变换将位于 -1.0 到 1.0 范围的坐标变换到由
glViewport
函数所定义的坐标范围内。变换出来的坐标将会送到光栅器,将其转化为片元。
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 解析顶点一次就足够了 ? 在频繁绘制的场景中,vertexAttribPointer 每次都需要重新解析顶点,还是解析一次就足够了?
在绘制直线示例的基础上尝试发现:
- 要先保证已缓冲了数据,该函数才能有效解析。
- 每次更新了缓冲,需要重新解析才能生效。
useProgram 函数激活一次就足够了 ? 在频繁绘制的场景中,useProgram 是否需要重新激活?
【JavaScript|JavaScript WebGL 基础疑惑点】在绘制直线示例的基础上尝试发现只需要激活一次,这是示例。
基于的坐标系是什么 ? 基于的坐标系是右手坐标系。
文章图片
按如下的步骤做:
- 沿着正 y 轴方向伸出你的右臂,手指着上方。
- 大拇指指向右方。
- 食指指向上方。
- 中指向下弯曲90度。
常见的变量类型有那些? 摘自官方提供的 WebGL 1.0 卡片索引。
存储限定符
- const : 编译时常量,或只读函数参数。
- attribute : 用这个修饰的变量,表示是用于顶点着色器和 OpenGL ES 之间的链接。
- varying : 用这个修饰的变量,表示是用于顶点着色器和片元着色器之间的链接。
- uniform : 用这个修饰的变量,表示全局且唯一的变量,可以在任意阶段访问到,变量的值会一直保存。
类型 | 含义 |
---|---|
void | 没有返回值的函数或空参数列表 |
bool | 布尔值 |
int | 有符号整数 |
float | 浮点标量 |
vec2, vec3, vec4 | 2/3/4 分量的浮点向量 |
bvec2, bvec3, bvec4 | 2/3/4 分量的布尔向量 |
ivec2, ivec3, ivec4 | 2/3/4 分量的有符号整数向量 |
mat2, mat3, mat4 | 2x2, 3x3, 4x4 浮点数矩阵 |
sampler2D | 2D 纹理 |
samplerCube | 立体贴图纹理 |
顶点着色器特殊变量
输入:
变量 | 描述 | 单位或坐标系统 |
---|---|---|
highp vec4 gl_Position; | 转换顶点位置 | 剪切坐标 |
mediump float gl_PointSize; | 变换点大小(仅点光栅化) | 像素 |
输入:
变量 | 描述 | 单位或坐标系统 |
---|---|---|
mediump vec4 gl_FragCoord; | 帧缓冲区内的片元位置 | 窗口坐标 |
bool gl_FrontFacing; | 片元属于前向基本体 | 布尔值 |
mediump vec2 gl_PointCoord; | 点内的片元位置(仅点光栅化) | 每个组件从 0.0 到 1.0 |
变量 | 描述 | 单位或坐标系统 |
---|---|---|
mediump vec4 gl_FragColor; | 片元颜色 | RGBA 颜色 |
mediump vec4 gl_FragData[n] | 颜色附件n的片元颜色 | RGBA 颜色 |
- WebGL lessons
- 坐标系统
推荐阅读
- 事件代理
- 数组常用方法一
- Python基础|Python基础 - 练习1
- Java|Java基础——数组
- Java基础-高级特性-枚举实现状态机
- 营养基础学20180331(课间随笔)??
- iOS面试题--基础
- HTML基础--基本概念--跟着李南江学编程
- typeScript入门基础介绍
- c++基础概念笔记