学习WebGL:第一个代码

Posted 余之乐

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学习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)

以上是关于学习WebGL:第一个代码的主要内容,如果未能解决你的问题,请参考以下文章

基于WebGL实现矩阵计算

最简WebGL教程,仅需 75 行代码

IOS开发-OC学习-常用功能代码片段整理

WebGL学习系列-第一个程序

ThreeJS学习|创建第一个三维场景

初识webgl--我的webgl学习第一课