学习WebGL：第一个代码

时间 2019-11-12

标签学习 webgl 第一个代码繁體版

原文原文链接

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

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

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

<!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)web