学习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：第一个代码的主要内容，如果未能解决你的问题，请参考以下文章