一个最简单的WebGL编程范例
0 197

WebGL(Web Graphics Library)是HTML5规范中的一部分,可以用来渲染三维场景。
WebGL源自OpenGL ES(OpenGL for Embedded Systems 是OpenGL三维图形API的子集)。

示例代码

// 创建canvas
function createCanvas(width, height) {
    var canvas = document.createElement("canvas");
    canvas.width = width || 300;
    canvas.height = height || 300;
    return canvas;
}

// 创建着色器
function createShader(webGL, source, type) {
    var shader = webGL.createShader(type);
    webGL.shaderSource(shader, source);
    webGL.compileShader(shader);
    return shader;
}
// 初始化webGL
function initWebGL(canvas) {
    var webGL = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
    if (!webGL) {
        console.log("当前浏览器不支持WebGL,请切换到支持WebGL的浏览器,比如Chrome");
        return null;
    } else {
        return webGL;
    }
}

// 创建矩形
function drawRect(webGL, program) {
    var buffer = webGL.createBuffer();
    webGL.bindBuffer(webGL.ARRAY_BUFFER, buffer);
    webGL.bufferData(
        webGL.ARRAY_BUFFER,
        new Float32Array([-1.0, -1.0,
            1.0, -1.0, -1.0, 1.0, -1.0, 1.0,
            1.0, -1.0,
            1.0, 1.0
        ]),
        webGL.STATIC_DRAW
    );

    // vertex data
    var positionLocation = webGL.getAttribLocation(program, "a_position");
    webGL.enableVertexAttribArray(positionLocation);
    webGL.vertexAttribPointer(positionLocation, 2, webGL.FLOAT, false, 0, 0);
}
// 入口函数
function init() {
    var canvas = createCanvas(),
        VER_SHADER_SRC = "attribute vec4 a_position;\n" +
        "void main() {\n" +
          "gl_Position = a_position;\n" +
        "}",
        FRAG_SHADER_SRC = "precision mediump float;\n" +
        "void main() {\n" +
          "gl_FragColor = vec4(1, 0, 0.5, 1);\n" +
        "}";
    document.body.appendChild(canvas);
    var webGL = initWebGL(canvas);
    if (webGL) {
        webGL.clearColor(0.0, 0.0, 0.0, 1.0);
        webGL.clear(webGL.COLOR_BUFFER_BIT | webGL.DEPTH_BUFFER_BIT);
        var vertex = createShader(webGL, VER_SHADER_SRC, webGL.VERTEX_SHADER),
            frag = createShader(webGL, FRAG_SHADER_SRC, webGL.FRAGMENT_SHADER);
        var program = webGL.createProgram();
        webGL.attachShader(program, vertex);
        webGL.attachShader(program, frag);
        webGL.linkProgram(program);
        webGL.useProgram(program);
        drawRect(webGL, program);
        webGL.drawArrays(webGL.TRIANGLES, 0, 6);
    }
}

代码说明

WebGLShader(WebGL着色器),WebGL只关心两件事:位置坐标与颜色,所有WebGL程序都是基于这两个元件来构造的,常用的方法是使用两个着色器来实现:

  • 顶点着色器(vertex shader):返回位置坐标

  • 像素着色器(fragment shader):返回颜色

vec4()构造函数用于生成颜色,示例代码中vec4(1, 0, 0.5, 1)的数字的含义:

  • 第一个1:代表红色

  • 0:代表绿色

  • 0.5: 代表蓝色

  • 第二个1:代表alpha

在WebGL中颜色的取值范围是0到1.

具体方法:

  • createShader:生成相应类型的WebGLShader

  • shaderSource:生成GLSL的回调函数

  • compileShader:编译着色器

WebGLProgram(WebGL环境)着色器编译完后,需要将着色器链接到WebGLProgram:

  • createProgram:创建一个WebGL环境

  • attachShader:附加着色器

  • linkProgram:将着色器连接到WebGL环境中

提供数据:

  • getAttribLocation:从当前环境中寻找定义的属性,即查找示例中初始化顶点着色器时定义的a_position。

  • createBuffer:创建buffer(缓存区)

  • bindBuffer:声明变量,并指向上一步创建的buffer

  • bufferData:赋值数据到指定变量,比如示例中的ARRAY_BUFFER

清空canvas:

  • clearColor:

  • clear:

使用创建的WebGL环境:将当前的WebGL环境告知GPU程序

  • useProgram:

告知WebGL从buffer中获取数据的方式:

  • enableVertexArribArray:激活属性

  • vertexAtrribPointer:获取数据

绘制图形:WebGL执行GLSL程序

  • drawArrays:这是WebGL提供的一个渲染函数

效果

0 197
() 全部评论
所有回复 (0)

最新

  • 插件下载 124 0 1 发布

    使用方法:打开3dmax软件,把砖墙插件拖拽到 视图中。

    3dmax砖墙插件下载地址|点这里

  • 插件下载 176 0 1 发布

    适用版本:  3ds max 2016 - 2022

    使用方法:在3dmax桌面快捷图标,点击鼠标右键打开文件所在位置,找到scripts文件夹下的strapup文件夹,把开孔脚本拖拽到strapup文件夹内。

    3dmax开孔神器下载地址|点这里