1. 引言

本文基于JavaScript语言，描述OpenGL(即，WebGL)的绘制流程，这里描述的是OpenGL的核心模式(Core-profile)

笔者这里不过多描述每个名词、函数和细节，更详细的文档可以参考：

2. 流程综述

OpenGL的绘制流程（图形渲染管线，Graphics Pipeline）如下：

  • 顶点着色(vertex shader)阶段将CPU传入的数据进行一定的变换处理
  • 图元装配(shape assembly)阶段的就是上阶段的顶点数据处理成图元（如，三角形）
  • 几何着色(geometry shader)阶段是根据一定规则将输入的图元变更或输出更多的图元（可选）
  • 光栅化(rasterization)阶段的是将上阶段的图元进行计算得到图元占据的屏幕像素列表
  • 片元着色(fragment)阶段是将上阶段生成的片元进行着色处理后
  • 测试与混合阶段计算片元的深度、颜色等从而进行舍弃或保留

绘制流程繁琐，然而，我们能配置的只有三个蓝色的着色器部分。几何着色器可选，一般配置顶点着色器和片段着色器即可，即，以下步骤就是配置顶点着色器和片段着色器

3. 生成顶点数据

生成顶点缓冲对象(Vertex Buffer Objects, VBO)并加载数据：

const vertices = new Float32Array([

    -0.5, -0.5, 0.0,

    0.5, -0.5, 0.0,

    0.0, 0.5, 0.0,

]);

const vertexBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

4. 链接属性数据

顶点数组对象(Vertex Array Object, VAO)与VBO绑定，用于保存属性数据（先绑定VAO，再创建VBO就会绑定到VAO上）：

gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);

gl.enableVertexAttribArray(0)

5. 创建顶点着色器

创建顶点着色器(Vertex Shader)并编译：

const vertexShader = gl.createShader(gl.VERTEX_SHADER);

gl.shaderSource(vertexShader, `

                attribute vec3 aPos;

                void main()

                {

                    gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);

                }

                `);

gl.compileShader(vertexShader);

6. 创建片段着色器

创建片段着色器(Fragment Shader)并编译：

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

gl.shaderSource(fragmentShader, `

                #version 100

                void main()

                {

                    gl_FragColor  = vec4(1.0, 0.5, 0.2, 1.0);

                }

                `);

gl.compileShader(fragmentShader);

7. 链接着色器

着色器程序对象(Shader Program Object)是多个着色器合并之后并最终链接完成的版本：

const shaderProgram = gl.createProgram();

gl.attachShader(shaderProgram, vertexShader);

gl.attachShader(shaderProgram, fragmentShader);

gl.linkProgram(shaderProgram);

8. 绘制

开始绘制：

gl.clearColor(0.2, 0.3, 0.3, 1.0);

gl.clear(gl.COLOR_BUFFER_BIT);

gl.useProgram(shaderProgram);

gl.drawArrays(gl.TRIANGLES, 0, 3);

9. 完整代码

基于浏览器以及Canvas创建OpenGL开发环境，完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <canvas style="width: 800px;height: 600px;"></canvas>

    <script>

        var canvas = document.querySelector('canvas');

        var gl = canvas.getContext('webgl');

        if (!gl) {

            console.log('WebGL not supported, falling back to experimental-webgl');

        }

        const vertices = new Float32Array([

            -0.5, -0.5, 0.0,

            0.5, -0.5, 0.0,

            0.0, 0.5, 0.0,

        ]);

        const vertexBuffer = gl.createBuffer();

        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);

        gl.enableVertexAttribArray(0)

        const vertexShader = gl.createShader(gl.VERTEX_SHADER);

        gl.shaderSource(vertexShader, `

        attribute vec3 aPos;

            void main()

            {

                gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);

            }

        `);

        gl.compileShader(vertexShader);

        if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {

            alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(vertexShader));

            gl.deleteShader(vertexShader);

        }

        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

        gl.shaderSource(fragmentShader, `

            #version 100

            void main()

            {

                gl_FragColor  = vec4(1.0, 0.5, 0.2, 1.0);

            }

        `);

        gl.compileShader(fragmentShader);

        if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {

            alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(fragmentShader));

            gl.deleteShader(fragmentShader);

        }

        const shaderProgram = gl.createProgram();

        gl.attachShader(shaderProgram, vertexShader);

        gl.attachShader(shaderProgram, fragmentShader);

        gl.linkProgram(shaderProgram);

        if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {

                alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));

         }

        gl.clearColor(0.2, 0.3, 0.3, 1.0);

        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.useProgram(shaderProgram);

        gl.drawArrays(gl.TRIANGLES, 0, 3);

    </script>

</body>

</html>

运行结果如下：

10. 参考资料

[1]你好，三角形 - LearnOpenGL CN (learnopengl-cn.github.io)

[2]【Learn OpenGL笔记】三角形(Triangle) - 知乎 (zhihu.com)

[3]Hello GLSL - Web API 接口参考 | MDN (mozilla.org)

[4]WebGL - Web API 接口参考 | MDN (mozilla.org)

基于JavaScript的OpenGL 01 之Hello Triangle的更多相关文章

  1. 基于Cocos2d-x学习OpenGL ES 2.0之多纹理

    没想到原文出了那么多错别字,实在对不起观众了.介绍opengl es 2.0的不多.相信介绍基于Cocos2d-x学习OpenGL ES 2.0之多纹理的,我是独此一家吧.~~ 子龙山人出了一个系列: ...

  2. 基于Cocos2d-x学习OpenGL ES 2.0系列——纹理贴图（6）

    在上一篇文章中,我们介绍了如何绘制一个立方体,里面涉及的知识点有VBO(Vertex Buffer Object).IBO(Index Buffer Object)和MVP(Modile-View-P ...

  3. JavaScript基础第01天笔记

    JavaScript基础第01天 1 - 编程语言 1.1 编程 编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的 ...

  4. artDialog是一个基于javascript编写的对话框组件，它拥有精致的界面与友好的接口

    artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应 ...

  5. DalekJS – 基于 JavaScript 实现跨浏览器的自动化测试

    在 Web 项目中,浏览器兼容以及跨浏览器测试是最重要的也是最费劲的工作.DalekJS 是一个基于 JavaScript(或 Node.js) 的免费和开源的自动化测试接口.它能够同时运行测试一组流 ...

  6. 基于JavaScript的REST客户端框架

    现在REST是一个比较热门的概念,REST已经成为一个在Web上越来越常用的应用,基于REST的Web服务越来越多,包括Twitter在内的微博客都是用REST做为对外的API,先前我曾经介绍过“基于 ...

  7. SWFObject: 基于Javascript的Flash媒体版本检测与嵌入模块

    原文地址:http://www.awflasher.com/flash/articles/swfobj.htm SWFObject: 基于Javascript的Flash媒体版本检测与嵌入模块原文:S ...

  8. WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起

    WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTM ...

  9. 构建基于Javascript的移动web CMS——模板

    在上一篇<构建基于Javascript的移动CMS--Hello,World>讲述了墨颀 CMS的大概组成,并进行了一个简单的演示样例,即Hello,World.这一次,我们将把CMS简单 ...

  10. 正则表达式基于JavaScript的入门详解

    关于正则表达式,和很多前辈聊起这个知识点时,他们的反馈都比聊其他技术谦逊,而和很多刚入门的程序员讨论时甚至会有觉得你看不起他. 的确,正则表达式从通常的应用来看,的确不难,比如电话,邮箱等验证.语法, ...

随机推荐

  1. 01-复杂度2 Maximum Subsequence Sum (25分)

    Sample Input: 10 -10 1 2 3 4 -5 -23 3 7 -21 Sample Output: 10 1 4 题目有一个测试点是"最大和前面有一段是0",所以 ...

  2. Python AI小项目打包通关：Pyinstaller和Wix都用上了

    最近有个Python小项目要打个包,项目结构比较简单 main.py(主文件), 以及model_050.hdf5 (在云端训练好的AI模型) 主函数里引用了一些包,如下 需要解决的问题: 将main ...

  3. Nodejs报错记录

    ◉ digital envelope routines::unsupported D:\workspace\vuedemo> npm run dev ... error:0308010C:dig ...

  4. 问一个 Windows 窗口的 Capture 问题

    好久没写了,上来先问一个问题...羞射... 有 A.B 两个窗口,A 是 B 的 Owner,B 不激活不抢焦点.在 B 的 WM_LBUTTONDOWN 的时候,设置 A 窗口为 Capture: ...

  5. python 第一二次教学笔记之数据操作

    对Python 有一个认知 记住这是一个动态类型的,弱类型语言 ds =111.0 #弱类型 前面不用写明是具体什么类型 haobo=10 haobo = ds #类型转换不再有高低之分 hoabo ...

  6. nodejs 升级后， vue+webpack 项目 node-sass 报错的解决方法

    1.npm i node-sass -D 在错误提示里有给出了方案,重新构建 node-sass,命令如下: npm rebuild node-sass --force 如果执行完成后不报错,就可以了 ...

  7. JS循环类数组对象，获得页面所有的某个ClssaName，处理它的属性

    举例:获得所有的某个ClssaName,处理它的第一个子元素中的title赋值给内容 let links = Array.from(document.getElementsByClassName('m ...

  8. angular打包出现JavaScript堆内存不足、启动也会内存溢出解决办法\increase-memory-limit' 不是内部或外部命令,

    ## 打包出现JavaScript堆内存不足 最近打包遇到这种报错 Ineffective mark-compacts near heap limit Allocation failed - Java ...

  9. python处理apiDoc转swagger

    python处理apiDoc转swagger 需要转换的接口 现在我需要转换的接口全是nodejs写的数据,而且均为post传输的json格式接口 apiDoc格式 apiDoc代码中的格式如下: / ...

  10. php 虚拟目录

    问题: 站点的root目录为 /data/web/ ,现在想在www.111.com 下放一个站点,www.111.com/abc/ 但不能直接在/data/web/下创建abc目录,要放在 /dat ...