WebGL编程指南入门基础篇

着色器介绍

着色器分为顶点着色器 跟 片元着色器

顶点着色器
描述顶点特性,包括位置,颜色等
片元着色器
进行每个片元的处理过程,如光照等;在三维场景中,仅仅用线条和颜色把图形画出来是远远不够的

从js文件到浏览器渲染结果的处理流程示意图

2019-04-28-15-13-28

webgl初始化流程

/**
 * Create a program object and make current
 * @param gl GL context
 * @param vshader a vertex shader program (string)
 * @param fshader a fragment shader program (string)
 * @return true, if the program object was created and successfully made current 
 */
function initShaders(gl, vshader, fshader) {
  var program = createProgram(gl, vshader, fshader);
  if (!program) {
    console.log('Failed to create program');
    return false;
  }

  gl.useProgram(program);
  gl.program = program;

  return true;
}

2019-04-28-15-32-12

画点

画点关键代码片段

// HelloPoint1.js (c) 2012 matsuda
// Vertex shader program
var VSHADER_SOURCE = 
  'void main() {\n' +
  '  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // Set the vertex coordinates of the point
  '  gl_PointSize = 10.0;\n' +                    // Set the point size
  '}\n';

  
// Fragment shader program
var FSHADER_SOURCE =
  'void main() {\n' +
  '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // Set the point color
  '}\n';
  
// Initialize shaders
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('Failed to intialize shaders.');
    return;
  }
  
// Draw a point
  gl.drawArrays(gl.POINTS, 0, 1);

多基本缓冲区模型
颜色缓冲区: gl.COLOR_BUFFER_BIT
深度缓冲区: gl.DEPTH_BUFFER_BIT
模板缓冲区: gl.STENCIL_BUFFER_BIT

齐次坐标

homogeneous coordinate

2019-04-28-15-44-45

webgl的一个显著特征就是不需要交换颜色缓冲区

传输变量

Using Attribute Variables
顶点相关的数据
必须声明为全局变量
Using uniform variable
顶点无关的数据

所有 attribute 变量都以 a_前缀开始; 所有 uniform 变量都以u_ 前缀开始

获取着色器变量地址

var a_Position = gl.getAttribLocation(gl.program, 'a_Position');

赋值

  gl.vertexAttrib1f(location, v0)   
  gl.vertexAttrib2f(location, v0, v1)   
  gl.vertexAttrib3f(location, v0, v1, v2)   
  gl.vertexAttrib4f(location, v0, v1, v2, v3)

2019-04-28-16-22-10

获取 uniform 变量地址

 gl.getUniformLocation(program, name)

赋值

  gl.uniform1f(location, v0)   
  gl.uniform2f(location, v0, v1)   
  gl.uniform3f(location, v0, v1, v2)   
  gl.uniform4f(location, v0, v1, v2, v3)

绘制和变换三角形

使用缓冲区对象

使用流程

    1.    创建缓冲区对象:Create a buffer object ( gl.createBuffer() ).   
    2.    将缓冲区对象绑定到目标:Bind the buffer object to a target ( gl.bindBuffer() ).   
    3.    向缓冲区对象中写入数据:Write data into the buffer object ( gl.bufferData() ).   
    4.    将缓冲区对象分配给a_Position变量:Assign the buffer object to an attribute variable ( gl.vertexAttribPointer() ).   
    5.    连接a_Position变量与分配给它的缓冲区对象:Enable assignment ( gl.enableVertexAttribArray() ).

2019-04-28-17-10-54

webgl绘制基本图形

2019-04-28-17-35-26

2019-04-28-17-38-03

移动、旋转和缩放

逐顶点操作(per-vertex operation)
平移

2019-04-28-18-10-23
旋转

2019-04-28-18-11-11

 x' = x cos β – y sin β  
 y' = x sin β + y cos β  
 z' = z

变换矩阵
旋转举证

2019-04-28-18-15-38

旋转平移矩阵

2019-04-28-18-17-26

高级变换与动画基础

矩阵操作函数库

2019-04-28-19-16-01

颜色与纹理

将非坐标数据传入顶点着色器

多种顶点数据信息存入顶点着色器

顶点着色器和片元着色器之间的数据传输

图形装配过程/图元装配过程
光栅化过程
varying变量

纹理映射

texture mapping

准备好纹理图像
配置映射方式
加载纹理图像
在片元着色器将纹理的颜色赋给片元

纹理坐标

纹理映射过程主要包括五个部分

顶点着色器中接收顶点的纹理坐标,光栅化后传递给片元着色器
片元着色器根据片元的纹理坐标,从纹理图像中抽取出纹理颜色,赋给当前片元
设置顶点的纹理坐标
准备待加载的纹理图像,在浏览器中读取它
监听纹理图像的加载事件,一旦加载完成,就在Webgl系统中使用纹理

最后编辑于：2019.04.28 22:10:45