webGL 绘制一个点


1、获取<canvas>

document.getElementById(ID)

2、获取WebGL绘图上下文

getWebGLContext(element [, debug])

3、设置<canvas>背景色

gl.clearColor(red, green, blue, alpha)

4、 清空<canvas>

gl.clear(buffer)

gl.COLOR_BUFFER_BIT 指定颜色缓存(0.0, 0.0, 0.0, 0.0)
gl.DEPTH_BUFFER_BIT 指定深度缓冲区1.0
gl.STENCIL_BUFFER_BIT 指定模板缓存区

顶点着色器(Vertex shader)

顶点着色器是用来描述顶点特性的程序(位置,方向,大小)

片元着色器(Fragment shader)

进行逐片元处理过程的程序(光照)

WebGL程序的结构

代码包括三个部分:

  • 顶点着色器程序(GLSL ES 语言)
  • 片元着色器程序(GLSL ES 语言)
  • 主程序(JavaScript语言)

着色器程序代码作为字符串被存储在变量 VSHADER_SOURCE 和 FSHADER_SOURCE 中,主程序将他们给WebGL系统.

// 顶点着色器
var VSHADER_SOURCE =
    'void main() {\n' +
    'gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' +
    'gl_PointSize = 10.0;\n' +
    '}\n';

gl_Position 表示顶点位置
gl_PointSize 表示点的尺寸(像素)

GLSL 中的数据类型

float 浮点数
vec4 表示由四个浮点数组成的

齐次坐标:由4个分量组成的向量.能够提高处理三维数据的效率.
齐次坐标表示为(x, y,z,w),等价于三维坐标(x/w, y/w, z/w),如果W->0,那么它所表示的点将趋近无穷远,为使用矩阵乘法来描述点变换成为可能.

片元着色器

顶点着色器控制点的位置和大小,片元着色器控制点的颜色.
片元着色器的作用是处理片元,使其显示在屏幕上.

// 片元着色器
var FSHADER_SOURCE =
    'void main() {\n' +
    'gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
    '}\n';

片元着色器的内置变量
vuc4 gl_FragColor 指定片元颜色(RGBA格式)

绘制操作

gl.drawArrays(mode, first, count)

参数

mode 指定绘制的方式,可以接受以下常量符号
    gl.POINTS, gl.LINES, gl.LINE_STRIP,
    gl.LINE_LOOP, gl.TRIANGLE,
    gl.TRIANGLE_STRIP,
    gl.TRIANGLE_FAN

first 指定从哪个顶点开始绘制(整数)
count 指定绘制需要用到多少个顶点(整数)

当程序调用 gl.drawArrays() 时,顶点着色器将被count次,每次处理一个顶点

js和着色器之间传输数据

attribute 变量, 传输的那些与顶点相关的数据。
uniform 变量, 传输的那些对于所有顶点都相同(或与顶点无关)的数据

  1. 在顶点着色器中,声明attribute变量;
  2. 将attribute变量赋值给gl_Position变量;
  3. 获取attribute变量内存地址;
  4. 给attribute变量赋值;
// 顶点着色器
var VSHADER_SOURCE =
    // 1. 声明变量
    'attribute vuc4 a_Position;\n'+
    'void main() {\n' +
    // 2. 赋值给gl_Position
    'gl_Position = a_Position;\n' +
    'gl_PointSize = 10.0;\n' +
    '}\n';

获取attribute变量的存储位置

WebGL系统中每个变量都具有一个存储地址,方便通过存储地址向量传输数据. 因此,当我们想要向顶点着色器的a_Position变量传输数据,首先需要向WebGL系统请求该变量的存储地址.

var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if(a_Position < 0){
    console.log('未能获取a_Position的存储位置');
    return;
}
gl.getAttributeLocation(program, name)
// 向 program 请求获取称为name 的 attribute 变量的存储地址.

/* 参数 
**  @program 指定包含顶点着色器和片元着色器的着色器程序对象
**  @name 指定想要获取储存地址的attribute 变量的名称
*/

/* 返回 
**  非负数 attribute变量的存储地址
**  -1 获取失败
*/

向attribute变量赋值

gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);

gl.vertexAttrib3f(location, v0, v1, v2);
/* 参数 
**  @location 指定将要修改的attribute变量的存储位置
**  v0 指定填充attribute变量第一个分量的值
**  v1 指定填充attribute变量第二个分量的值
**  v2 指定填充attribute变量第三个分量的值
*/

改变点的颜色

attribute 变量只有顶点着色器可以使用,使用片元着色器时需要使用uniform变量,或者使用varying变量.

uniform 变量用来从JavaScript程序向顶点着色器和片元着色器传输 “一致的”数据. 向uniform 变量传递数据的方式与向 attribute 变量传递的数据相似:

  • 获取变量的储存地址;
  • 在js中按照地址将数据传递.
// 获取指定名称的uniform变量的存储位置.
gl.getUniformLocation(program, name)

// 将数据(v0, v1, v2, v3)传输给由location参数指定的uniform变量.
gl.uniform4f(location, v0, v1, v2, v3) 

声明:UX|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - webGL 绘制一个点


心无旁骛似明镜