《WebGL编程指南》阅读笔记（一）

Chlli
164 阅读1分钟

关于WebGL概述性等相关的问题可以参考我这篇文章：计算机图形学中的ThreeJS - 知乎 (zhihu.com)

知识点一：清空绘图区

<div id="webgl"></div>

var canvas = document.getElementById('webgl');
if ( !canvas ) {
    console.error('No WebGL!');
    return;
}

var  webgl = canvas.getContext('webgl');  //获取上下文
webgl.clearColor(0, 0, 1, 0.5);  //清空cavans的颜色，参数为下面准备
webgl.clear(webgl.COLOR_BUFFER_BIT);  //用之前指定的背景色清空canvas（背景色填充）
image.png

知识点二：绘制一个点

// 顶点着色器程序
var VSHADER_SOURCE =  `void main() {
       gl_Position = vec4(0.5, 0.5, 0, 1);  // 设置定位坐标
       gl_PointSize = 10.0;     // 顶点大小
    }`;

// 片元着色器程序
var FSHADER_SOURCE =  `void main() {
       gl_FragColor = vec4(1, 0, 0, 1);   // 设置片元颜色
    }`;

var canvas = document.getElementById('webgl');
var  webgl = canvas.getContext('webgl');
//初始化着色器
var program = initShaders( webgl, VSHADER_SOURCE, FSHADER_SOURCE)  // 需要引入initShaders.js

webgl.clearColor(0, 0, 1, 0.2);
webgl.clear(webgl.COLOR_BUFFER_BIT);

webgl.drawArrays(webgl.POINTS, 0, 1);  // 绘制一个点
image.png

最后单独说一下webgl渲染的核心函数：drawArrays(type, start, end)
要知道Draw Call是CPU调用图形编程接口，WebGL具体的实现函数是drawArrays等，用来命令GPU进行渲染的操作。执行过程如下：

  • 第一步：CPU会把所需的所有数据准备好
  • 第二步：GPU会创建一系列buffer
  • 第三步”：通过drawArrays方法，将数据传输到显存中，然后再进行每一帧的渲染

着色器Shader相关知识请参考我的这篇文章WebGL之ThreeJS的shader整理 - 掘金 (juejin.cn)
GLSL ES 着色器语言请参考郭隆邦的技术博客WebGL电子书《WebGL零基础入门教程》_郭隆邦 (yanhuangxueyuan.com)
WebGL的坐标系统 请参考我这篇文章：终于理清楚啦——三维坐标转换过程 - 掘金 (juejin.cn)

avatar
文章
阅读
粉丝