WebGL

  1. 现在不再支持立即绘制
  2. 支持GPU

用回调函数构造显示函数

基本结构

  • 描述页面（HTML）
  • 定义着色器（HTML）
  • 计算或指定数据（JS）
  • 发送数据至GPU（JS）
  • 绘制（JS）

HTML

<!DOCTYPE html>
<html>
<head>
<script id=“webgl”>
</script>
</head>
<body>
<canvas id=“glcanvas” width=“512”>
FUCK IE
</canvas>
</body>
</html>

WebGL 照相机

正交视图：x、y、z三轴在[-1, 1]间的立方体内默认投影到z=0的投影屏幕上。

视窗

glViewport(x, y, w, h);//

着色器

应用程序定义vPosition

  1. 顶点着色器
  2. 片元着色器

数据类型

基础：int，float，bool

数组：vec3

矩阵：mat3

结构体：

修饰符

const：

attribute：由应用程序传入，可以逐顶点

uniform：着色器中无法修改

命名规范

传入到顶点着色器的：v开头

Varying变量：f开头