您的位置：首页 > Web前端 > JavaScript

WebGL学习笔记(1)

2016-01-22 02:42 501 查看

最近正在学习WebGL，为了能够更好地理解它，所以决定写博客记录自己学习的过程。本文可能并不是十分专业，若是其中有错误希望大家及时指正。由于WegGL是基于 OpenGL ES 2.0 的，如果有基础的同学相信会学的相当快。当然咱没有基础就是了。。。

准备工作

WebGL文档：https://www.khronos.org/registry/webgl/specs/1.0/

MDN学习资料（建议）：https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API

配置开发环境，我用的是WebStrom。用它打开WebGL提示功能会非常好用。

【file】-【setting】-【Languages & Frameworks】-【Javascript】-【Libraries】-勾选【WebGL】（没有webGL选项的可以点击右边download，有惊喜哦~）

第一个WebGL程序

test01.html

<!DOCTYPE html>
<html>
<head lang="zh-cn">
<meta charset="UTF-8">
<title></title>
<style>
#canvas{
width:800px;
height: 600px;
background: #333;;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="js/test01.js" type="text/javascript"></script>
</body>
</html>

test01.js

// 取得canvas的dom节点
var canvas=document.getElementById('canvas');

// 取得WebGL实例
var gl=canvas.getContext('webgl')|| canvas.getContext("experimental-webgl");

// 设置一个类型为Float32Array的颜色到颜色缓冲区COLOR_BUFFER_BIT
//  void gl.clearColor(red, green, blue, alpha); 四个参数都是0~1的浮点数，因此如果用的是PS的RGB值，应当除以255
gl.clearColor(255/255,150/255,10/255,1.0);

//使用颜色缓冲区COLOR_BUFFER_BIT的颜色填充
gl.clear(gl.COLOR_BUFFER_BIT);

最终效果

canvas被填充成了橘黄色

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： webgl opengl es javascript html5 canvas

相关文章推荐

新的分享

章节导航