|
背景：
很多时候大家会听到做webGL项目，但是很多同学对于WebGL不太了解，下面就简单介绍一下 一、WebGL概念（来自MDN:https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API） WebGL (Web图形库) 是一种JavaScript API，用于在任何兼容的Web浏览器中呈现交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0紧密相符合的API，可以在HTML5 <canvas> 元素中使用。 目前支持 WebGL 的浏览器有：Firefox 4+, Google Chrome 9+, Opera 12+, Safari5.1+ 和 Internet Explorer 11+；然而, WebGL一些特性也需要用户的硬件设备支持。 二、WebGL和传统网页的区别： 普通网页组成成分：HTML、JavaScript； WebGL网页组成成分：HTML5、JavaScript和GLSL ES(着色器语言 OpenGL ES) 三、WebGL示例 WebGL采用H5中的<canvas>元素来定义绘图区域，然后通过JavaScript内嵌GLSL ES在canvas中绘制三维图形 canvas可以同时支持二维图形和三维图形，它不直接提供绘图方法，而是提供一种叫上下文(context)机制来绘制图形， 3.1使用canvas绘制webgl步骤： 3.1.1创建HTML5 canvas <canvas id="canvas" width="200px" height="200px"></canvas> 3.1.2获取画布 canvas 的 ID //获取canvas元素
var canvas = document.getElementById('canvas');3.1.3获取WebGL //获取webgl上下文
var gl = canvas.getContext('webgl');解释：为了得到 WebGLRenderingContext 对象(或图形的WebGL上下文对象或只在WebGL的情况下)，调用当前 HTMLCanvasElement 的getContext()方法。getContext()的语法如下 ：canvas.getContext(contextType, contextAttributes);通过"webgl"字符串或"experimental-webgl" 作为 contentType。contextAttributes参数是可选的。 (虽然在进行这一步，请确保您的浏览器实现了WebGL 1.0版本(OpenGL ES 2.0))。其中WebGL的参数 ContextAttributes 不是强制性的。此参数提供接受布尔值,具体参数可以查看官方手册。 3.1.4编译着色器 着色器参考：http://www.yiibai.com/webgl/webgl_shaders.html 完整代码： html: <!DOCTYPE html>
<html>
<head>
<meta lang="en">
<meta charset="UTF-8">
<title>WebGL study</title>
<link href="style/style.css">
<script type="text/javascript" src="js/js.js"></script>
</head>
<body>
<canvas id="canvas" width="200px" height="200px"></canvas>
</body>
</html>javascript:/**
* Created by houbingshuai on 2016/12/3.
*/
window.onload = function () {
//顶点着色器程序
var VSHADER_SOURCE =
"void main() {" +
//设置坐标
"gl_Position = vec4(0.0, 0.0, 0.0, 1.0); " +
//设置尺寸
"gl_PointSize = 10.0; " +
"} ";
//片元着色器
var FSHADER_SOURCE =
"void main() {" +
//设置颜色
"gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +
"}";
//获取canvas元素
var canvas = document.getElementById('canvas');
//获取绘制二维上下文
var gl = canvas.getContext('webgl');
if (!gl) {
console.log("Failed");
return;
}
//编译着色器
var vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader, VSHADER_SOURCE);
gl.compileShader(vertShader);
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, FSHADER_SOURCE);
gl.compileShader(fragShader);
//合并程序
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);
//绘制一个点
gl.drawArrays(gl.POINTS, 0, 1);
}参考：https://www.cnblogs.com/bsman/p/6128447.html |
|
|
公众号
