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

背景介绍

图形绘制过程：轮廓提取 - 网格化【eg. 三角剖分】 - 光栅化 - 帧缓存 - 渲染

openGL包含webGL

使用WebGL

着色器 shader

上边为现代浏览器，下边的代码兼容老浏览器

顶点着色器，片源着色器

canvas的中心点为坐标原点，x轴z轴的默认最小-1，最大1；camera看向z的负方向

码上掘金代码

const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl');

const vertex = `
  attribute vec2 position;
  varying vec4 color;

  void main() {
    gl_PointSize = 1.0;
    gl_Position = vec4(position, 1.0, 1.0);
    color = vec4(0.5 * (vec2(1.0) + position), 0.0, 1.0);
  }
`;


const fragment = `
  precision mediump float;
  varying vec4 color;

  void main()
  {
    // gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    gl_FragColor = color;
  }    
`;


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);

const points = new Float32Array([
  -1, -1,
  0, 1,
  1, -1,
]);


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

const vPosition = gl.getAttribLocation(program, 'position');
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);

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

mesh.js

sprite.js

三维空间的齐次矩阵

threejs是目前比较全面的一个库

初识 WebGL | 青训营笔记

背景介绍

使用WebGL

mesh.js

三维空间的齐次矩阵

read more