WebGL入门教程(一)-初识webgl

时间 2019-11-18

标签 webgl 入门教程繁體版

原文原文链接

1、WebGL和传统网页的区别：javascript

普通网页组成成分：HTML、JavaScript；css

WebGL网页组成成分：HTML五、JavaScript和GLSL ES(着色器语言 OpenGL ES)；html

2、WebGL采用H5中的<canvas>元素来定义绘图区域，而后经过JavaScript内嵌GLSL ES在canvas中绘制三维图形。java

canvas能够同时支持二维图形和三维图形，它不直接提供绘图方法，而是提供一种叫上下文(context)机制来绘制图形，web

2.1使用canvas绘制二维空间步骤：canvas

2.1.1建立HTML5 canvas浏览器

<canvas id="canvas" width="200px" height="200px"></canvas>

2.1.2获取画布 canvas 的 ID和画布的上下文缓存

//获取canvas元素
var canvas = document.getElementById('canvas');
//获取绘制二维上下文
var ctx = canvas.getContext('2d');

2.1.3经过上下文提供的方法进行绘制。yii

属性和方法参考：http://www.w3school.com.cn/tags/html_ref_canvas.aspwebgl

例如：

ctx.fillStyle ='rgba(255,0,0,1.0)';//设置填充色为红色
ctx.fillRect(0,0,200,200);//使用填充色填充为矩形

2.2使用canvas绘制webgl步骤：

2.2.1建立HTML5 canvas（同上）

2.2.2获取画布 canvas 的 ID（同上）

2.2.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 不是强制性的。此参数提供接受布尔值，以下面列出各类选项

Alpha	若是它的值是 true，它提供了一个alpha缓冲区到画布上。默认状况下，它的值是 true
depth	若是它的值是true，会获得一个绘图的缓冲区，其中包含至少16位的深度缓冲。默认状况下，它的值是true
stencil	若是它的值是true，会获得一个绘图的缓冲区，其中包含至少8位的模板缓存。默认状况下，它的值是false
antialias	若是它的值是true，会获得一个绘图缓冲区，执行抗锯齿。默认状况下，它的值是true
premultipliedAlpha	若是它的值是true，会获得一个绘图缓冲区，其中包含的颜色与预乘alpha。默认状况下它的值是true
preserveDrawingBuffer	若是它的值是true，缓冲区将不会被清零，直到被清除或由做者改写将保留它们的值。默认状况下，它的值是false

例如：

//带参数的webgl上下文
var gl = canvas.getContext('webgl', { antialias: false, stencil: true });

2.2.4编译着色器

着色器参考：http://www.yiibai.com/webgl/webgl_shaders.html

　 2.2.4.1存储着色器（顶点着色器和片断着色器）以顶点着色器为例

var VSHADER_SOURCE =
        "void main() { " +
        //设置坐标
        "gl_Position = vec4(0.0, 0.0, 0.0, 1.0); " +
        //设置尺寸
        "gl_PointSize = 10.0; " +
        "} ";

　 2.2.4.2编译着色器，有三步

　 (1)建立Shader对象

Object createShader (enum type)

如观察到的语法，该方法接受预约义的枚举值做为参数。咱们有两种选择这一点：gl.VERTEX_SHADER建立顶点着色器， gl.FRAGMENT_SHADER 建立片断着色器。

//例如：建立定点着色器
var vertShader = gl.createShader(gl.VERTEX_SHADER);

　 (2)将写好的着色器附加到Shader上

oid shaderSource(Object shader, string source)

　其中：shader − 必须建立Shader对象传递做为一个参数，Source − 必须以字符串格式传入着色器程序代码。

(3)编译程序

compileShader(Object shader)

　此方法接受着色器程序对象做为参数。建立着色器程序对象以后，附加源代码，将对象传递给该方法

2.2.5合并程序

(1)建立一个程序对象

createProgram();

(2)附加着色器

attachShader(Object program, Object shader);

其中：Program − 经过建立空的程序对象做为一个参数,Shader − 传递的着色器编译程序中的一个(顶点着色器，片断着色器)

(3)连接着色器

linkProgram(shaderProgram);

(4)使用程序

useProgram(shaderProgram);

案例：

var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);

2.2.6绘制图像

gl.drawArrays(gl.POINTS, 0, 1);

3、完整代码

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);
}

总结：初识webgl，感受还不错，努力吧少年

1. WebGL入门教程(四)-webgl颜色
2. WebGL入门教程(五)-webgl纹理
3. WebGL入门教程(三)-webgl动画
4. webgl入门(2)-初识webgl和着色器
5. 初识 WebGL 小记
6. WebGL入门教程(二)-webgl绘制三角形
7. webgl入门
8. WebGL入门demo
9. WebGL---5.初入3D
10. 从Element3入门WebGL Shader（一）
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Neo4j数据库入门教程 - NoSQL教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用