一、WebGL入门的开始

来源：互联网发布：光纤网络测速编辑：程序博客网时间：2024/05/21 09:29

一直对WebGL很感兴趣，但一直没时间学习，现在总算有了点时间。这也是鄙人第一次写博客，写的得不好望指正。

我比较喜欢先看效果，再分析代码。

代码如下：

<html><head><title>webgl-lesson1</title><meta http-equiv="content-type" content="text/html; charset=utf-8"><script type="text/javascript">var webgl = null;function Init(){var canvas = document.getElementById("myCanvas"); //获取canvas对象webgl = canvas.getContext("webgl");//通过canvas创建webgl对象webgl.viewport(0,0,canvas.clientWidth,canvas.clientHeight);//webgl对象在canvas上创建一个视口webgl.clearColor(0.0,0.0,0.0,1.0);//将缓冲区清空为黑色webgl.clear(webgl.COLOR_BUFFER_BIT);//执行清空操作} </script></head><body onload="Init()"><canvas id="myCanvas" style="border:1px solid red;" width="600" height="450"></canvas></body></html>

执行结果如下：

代码分析：

webgl = canvas.getContext("webgl");

通过canvas创建webgl对象，同时默认创建了一个canvas大小的后台帧缓存区FBO（Frame Buffer Object），（相当于一张图片）如下图的红色框框的区域

webgl.viewport(0,0,canvas.clientWidth,canvas.clientHeight);

在canvas上创建一个视口，相当于下图蓝色框框区域，可以与canvas重合

webgl.clearColor(0.0,0.0,0.0,1.0);

将缓冲区清空为黑色

webgl.clear(webgl.COLOR_BUFFER_BIT);

执行清空操作，记住，clearColor操作只是相当于指定了一个黑色的画刷，clear操作才真正执行清空操作

clear函数的参数只有如下三个：

const GLenum DEPTH_BUFFER_BIT = 0x00000100

const GLenum STENCIL_BUFFER_BIT = 0x00000400

const GLenum COLOR_BUFFER_BIT = 0x00004000

当创建了一个webgl的对象时候，在后台会创建帧缓存区，相当于一张二维图片，但是这张图片不是只有一张，有颜色缓冲区COLOR_BUFFER_BIT，控制颜色的，表现出来的是我们看到的结果；深度缓存区DEPTH_BUFFER_BIT，三维物体的先后，有遮挡效果；模板缓冲区STENCIL_BUFFER_BIT，可以帮我们做一些特效，如反射，水，镜面反射，阴影等

本节完

注：官方文档：点击打开链接

0 0