WebGL 月影带练｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 15 天一、本堂课重点内容： W

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

一、本堂课重点内容：

WebGL的概念
webGL的使用

二、详细知识点介绍：

WebGL的概念

WebGL是一种技术，与GPU、3D线缆有关

Modern Graphics System

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

轮廓提取/ meshing
光栅化
帧缓存
渲染

The Pipeline

CPU vs GPU

CPU

图像有许多像素点，绘制图片用CPU不合适

GPU

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

WebGL & OpenGL

webGL的使用

webGL Startup

创建WebGL上下文
创建WebGL Program
将数据存入缓冲区
将缓冲区数据读取到GPU
GPU执行WebGL程序,输出结果

Create WebGL Context

const canvas = document.querySelector( 'canvas');
const gl = canvas. getContext('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) {
        // no-empty}
      if( context){
        break;
      }
   }
   return context;
}

The Shaders

Vertex Shader

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

Fragment Shader

precision mediump float;
void main() {
  gl_FragColor = vec4( 1.0，0.0，0.0，1.0 );
}

Create 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 = gl.createProgram();
gl.attachShader( program,vertexShader);
gl.attachShader( program，fragmentShader);
gl.linkProgram( program );

gl.useProgram( program );