这是我参与「第四届青训营 」笔记创作活动的的第12天

1. 基础知识

\

1. 光栅

(Raster):几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。

像素(Px):一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。

帧缓存(Frame Buffer）：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。

CPU(Central Processing Unit):中央处理单元，负责逻辑计算。

GPU(Graphics Processing Unit):图形处理单元，负责图形计算。

2. webGL与OpenGL的关系

2. 开始使用

1. 使用步骤

• 1.创建WebGL上下文

• 2.创建WebGL Program

• 3.将数据存入缓冲区

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

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

2. 建立WebGL文本

const canvas document.querySelector('canvas);
const gl canvas.getContext('webgl');
//导入画布

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

3. 编写着色器Shaders：

1. Vertex Shade定点着色器

attribute vec2 position;
void main(){
gl_Pointsize =1.0;
gl_Position vec4(position,1.0,1.0);
}

2. Fragment Shader片源着色器

precision mediump float;
void main(){
gl=FragCo1or=vec4(1.0,0,0,0.0,1.0);
}

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 gl.createProgram();

gl.attachShader(program,vertexShader);
gl.attachShader(program,fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

4. 坐标系

1. Mesh.js

\

2.移动