学习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)