webgl_001_入门

简介：

WebGL，是一项用来在网页上绘制和渲染复杂三维图形（3D图形），并允许用户与之进行交互的技术。

最短案例：

1、在html中建立canvas画布

<canvas id='webgl'></canvas>

2、在js中获取canvas画布，并设置宽高

const canvas = document.getElementById('webgl');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

3、使用canvas获取webgl上下文

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

4、指定用来清空绘图区的颜色

gl.clearColor(0,0,0,1);

5、使用之前指定的颜色，清空绘图区

gl.clear(gl.COLOR_BUFFER_BIT);

 

完整代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;overflow: hidden;}
        </style>
    </head>
    <body>
      <canvas id='webgl'></canvas>
    </body>
</html>
<script type="text/javascript">
  const canvas = document.getElementById('webgl');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  const gl = canvas.getContext('webgl');
  gl.clearColor(0,0,0,1);
  gl.clear(gl.COLOR_BUFFER_BIT);
</script>

 

详解：

指定绘图区域的背景色
gl.clearColor(red,green,blue,alpha);

red:指定红色值（从0.0到1.0）
green:指定绿色值（从0.0到1.0）
blue:指定蓝色值（从0.0到1.0）
alpha:指定透明度值（从0.0到1.0）

 

将指定缓冲区设定为预定的值
gl.clear(buffer);

buffer: gl.COLOR_BUFFER_BIT 指定要颜色缓存
        gl.DEPTH_BUFFER_BIT 指定深度缓冲区
        gl.STENCIL_BUFFER_BIT 指定模板缓冲区

 

posted @ 2021-03-31 00:07  悟道_ms  阅读(97)  评论(0)  编辑  收藏  举报