学习WebGL：第一个代码

利用canvas和javascript，就可以在页面绘制2d图像，但对于3d的图像，目前是无能为力的。要绘制3d图像，就必须使用WebGL。

以我的理解，WebGL是内嵌在浏览器中，在使用时是通过javascript调用浏览器提供的WebGL API，然后在canvas绘图区绘制图像。刚开始接触WebGL时，没有理解这一点，于是觉得代码怎么会写得这么麻烦，重重复复的写一堆就为一个简单的的功能。

下面是一个最简单的WebGL例子

<!DOCTYPE html>
<html lang='zh-cmn-Hans'>
<head>
<meta charset='utf-8' />
<title>Canvas - WebGL</title>
</head>
<body>
<h1>HTML5 - Canvas - WebGL</h1>
<canvas id='glcanvas' width='500' height='500'></canvas>
<script type="text/javascript">
window.onload = function(){
    init();
}
function init() {
    var canvas, gl;
    canvas = document.getElementById('glcanvas');
    gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); //获取WebGL绘图上下文
    if (!gl) {
        console.log('不支持WebGL！');
        return;
    }
    gl.clearColor(0.0, 0.0, 0.0, 1.0); //设置背景色
    gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); //清空绘图区
}
</script>
</body>
</html>

 需要注意的是，在WebGL中，颜色RGBA中的值是使用浮点数的，其大小是从0.0到1.0，比如红色是：(1.0, 0.0, 0.0, 1.0)

posted on 2017-03-06 18:45  余之乐  阅读(1152)  评论(0)  编辑  收藏  举报

导航