[WebGL入门][001]绘制一个点

着色器

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';

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

function main() {
    
    
  // 获取到canvas元素
  var canvas = document.getElementById('webgl');

  // 获取WebGL上下文
  var gl = getWebGLContext(canvas);
  if (!gl) {
    
    
    console.log('Failed to get the rendering context for WebGL');
    return;
  }

  // 初始化shaders!! 这里使用了书中自己编写的初始化程序,屏蔽了底层差异
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    
    
    console.log('Failed to intialize shaders.');
    return;
  }

  // 设置黑色清空,(设置背景色)
  gl.clearColor(0.0, 0.0, 0.0, 1.0);

  // 清空
  gl.clear(gl.COLOR_BUFFER_BIT);

  // 绘制
  gl.drawArrays(gl.POINTS, 0, 1);
}

执行流程

1. 获取canvas元素
2. 获取WebGL绘图上下文
3. 初始化着色器
4. 设置canvas背景色
5. 清除canvas
6. 绘图

顶点着色器

用来描述顶点的特性的程序,
示例程序中 ,以下代码代表了一个顶点着色器
是使用OpenGL ES着色器语言

  'void main() {\n' +
  '  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // 设置顶点坐标
  '  gl_PointSize = 10.0;\n' +                    // 设置顶点大小
  '}\n';

和C语言一样,必须包含一个main()函数 不能为main()函数指定参数
顶点着色器中 gl_Position和gl_PointSize 是内置在顶点着色器中的,而且有着特殊的含义,分别代表顶点的位置,和顶点的尺寸,
gl_Position必须被赋值,否则无法工作

vec4 vec4(v0,v1,v2,v3)
可以根据值来创建vec4对象,

vec4表示由4个浮点数组成的矢量(x,y,z,w)
w为齐次坐标
(x,y,z,w)等价为(x/w,y/w,z/w)

片元着色器

下面是一个片元着色器

  void main() {
    
     
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 设置顶点颜色
  };

gl_FragColor 是片元着色器的唯一内置变量,控制像素在屏幕上的颜色
类型也是vec4类型的
代表(R,G,B.A)
详细的片元着色器的内容将会在以后介绍.