WebGL | 青训营笔记

今天是我参与「第五届青训营 」伴学笔记创作活动的第 13 天.

Modern Graphics System

• ·光栅(Raster)∶几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。·像素(Pixel):一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
• ·帧缓存(Frame Buffer)︰在绘图过程中，像素信息被存放于帧缓存中,帧缓存是一块内存地址。.CPU (Central Processing Unit):中央处理单元，负责逻辑计算。
• .GPU(Graphics Processing Unit):图形处理单元,负责图形计算。

GPU VS CPU

• GPU由大量的小运算单元构成
• 每个运算单元只负责处理很简单的计算每个运算单元彼此独立,因此所有计算可以并行处理

WebGL Startup

1. 创建WebGL上下文

function create3DContext( canvas, options) {
const names = [ 'webgl', 'experimental-webgl ', 'webkit-3d ', 'moz-webgl'];if( options.webgl2) names.unshift( 'webgl2 ' );
let context = null;
for( let ii = 0; ii< names.length; ++ii) {try {
context = canvas.getContext( names[ii], options );}catch (e) {
/ l no-empty}
if( context) {
break;
}

}
return context;}

2. 创建WebGL Program

const vertexShader = gl.createShader( gl.VERTEX_SHADER );gl.shaderSource( vertexShader, vertex );
gl.compileShader( vertexShader );
const fragmentShader = gl.createShader(gl. FRAGMENT_SHADER);gl.shaderSource( fragmentShader, fragment );
gl.compileShader( fragmentShader ) ;
const program = al.createDrov-m( gl.attachShader( program，vertexShader ) ;
gl.attachShader( program，fragmentShader );
gl.linkProgram( program ) ;
gl.useProgram( program );

3. 将数据存入缓冲区

const bufferId = gl.createBuffer( );
gl.bindBuffer( gl.ARRAY_BUFFER，bufferId );
gl.bufferData( gl. ARRAY_BUFFER， points, gl.STATIC_DRAW );

4. 将缓冲区数据读取到GPU

const vPosition = gl.getAttribLocation( program, ' position');
gl.vertexAttribPointer( vPosition，2，gl.FLOAT, false，q，0);
gl.enableVertexAttribArray( vPosition);//激活这个变量

5. GPU 执行WebGL程序,输出结果

l.clear( gl.COLOR_BUFFER_BIT);
gl.drawArrays( gl.TRIANGLES，0，points.length / 2 );

2D VS WebGL

2D:

const canvas = document.querySelector( ' canvas ' );const ctx = canvas.getContext( '2d ' );
ctx.beginPath( );
ctx.moveTo( 250，0 );ctx.lineTo( 500，500 ) ;
ctx.lineTo(0，500 );
ctx.fillStyle = 'red ' ;ctx.fill( );

WebGL:

const {Renderer,Figure2D，Mesh2D} = meshjs ;
const canvas = document.querySelector( 'canvas ' );
const renderer = new Renderer( canvas ) ;
const figure = new Figure2D( );
figure.beginPath( );
figure.moveTo( 250，0 );
figure.lineTo( 500，500 );figure.lineTo(0，500 );
const mesh = new Mesh2D( figure,canvas ) ;mesh. setFill({
color: [1，0，0，1]，
});
renderer.drawMeshes( [mesh] );

3D Matrix

3D标准模型的四个齐次矩阵

1. 投影矩阵 Projection Matrix
2. 模型矩阵Model Matrix
3. 视图矩阵View Matrix
4. 法向量矩阵Normal Matrix