<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>画一个点</title>

    </head>

    <body onload="main()">

        <canvas id="webgl" width="200" height="200">

        </canvas>

    </body>

    <script type="text/javascript" src="webgl01.js">

    </script>

</html>
function main(){

    var canvas = document.getElementById('webgl');//获得canvas元素

    var param = ['webgl', 'experimental-webgl', 'webkit-3d', 'moz-webgl'];

    var gl;

    for (var i = 0; i < param.length; i++) {

        gl = canvas.getContext(param[i]);//创建webgl context（得到画图区域）

        if (gl) {

            break;

        }

    }

    if (!gl) {

        console.log('浏览器不支持WEBGL!');

    }

    gl.clearColor(0.0, 0.0, 0.0, 1.0);//指定颜色

    gl.clear(gl.COLOR_BUFFER_BIT);//使用指定的颜色清空画图区域

    //编写vertex shader，vertex shader指定特性（位置、大小、颜色等）

    //gl_Position指定了点的位置，在三维空间，有XYZ三个轴的坐标，最后一个是透明度，0-1,1代表完全不透明，0则是完全透明

    //vec4，是表示一个有四个参数的向量，在WebGL中均采用此类名称，vec表示vector类别，4表示接收四个参数

    //每一个参数必须是float类型的，即要加小数点，WebGL采用严格类型，不能使用整型参数

    //gl_PointSize 定义点的大小，同样是float类型

    var vShaderSource = 'void main(){ \n' +

    '    gl_Position = vec4(0.0, 0.0, 0.0, 1.0); \n' +

    '    gl_PointSize = 10.0; \n' +

    '} \n';

    //编写frament shader，可以理解成对每个像素进行处理

    //gl_FragColor接收vec4类型的参数，即RGBA，RGB为三原色，最后代表透明度

    var fShaderSource = 'void main(){ \n' +

    '    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); \n' +

    '} \n';

    //其实这一段非常像C，编写源代码，编译，链接...

    var vShader = gl.createShader(gl.VERTEX_SHADER);//创建shader

    gl.shaderSource(vShader, vShaderSource);//把shader source关联到shader上

    gl.compileShader(vShader);//编译shader

    var vCompiled = gl.getShaderParameter(vShader, gl.COMPILE_STATUS);

    var fShader = gl.createShader(gl.FRAGMENT_SHADER);

    gl.shaderSource(fShader, fShaderSource);

    gl.compileShader(fShader);

    var fCompiled = gl.getShaderParameter(fShader, gl.COMPILE_STATUS);

    var program = gl.createProgram();

    gl.attachShader(program, vShader);//将编译完的vertex shader和fragment shader关联到创建的program上

    gl.attachShader(program, fShader);

    gl.linkProgram(program);//链接program

    var linked = gl.getProgramParameter(program, gl.LINK_STATUS);

    gl.useProgram(program);

    gl.drawArrays(gl.POINTS, 0, 1);//第一个参数POINTS表示画点，第二个参数根据前面指定的gl_Position，从第0个元素开始，因为每个点需要三个坐标，即（0.0, 0.0, 0.0），第三个参数表示画一个

}

其中红色加粗的均为WebGL中的方法，为了方便理解，并未对代码结构作规划，重点在于理解WebGL。

Hello Point——WebGL的更多相关文章

  1. Webgl的2D开发方案(一)spritebatcher

    使用TypeScript 和 webgl 开发   第一步:实现了SpriteBatcher 例子如下 http://oak2x0a9v.bkt.clouddn.com/test/index.html ...

  2. HTML5 学习总结（四）——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  3. 数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇

    <数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>一文让读者了解了 HT的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT ...

  4. 基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（二）

    我们上一篇<基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)>主要讲解了如何搭建一个实时数据通讯服务器,客户端与服务端是如何通讯的,相信通过上一篇的讲解,再配 ...

  5. 基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（一）

    今天没有延续上一篇讲的内容,穿插一段小插曲,WebSocket 实时数据通讯同步的问题,今天我们并不是很纯粹地讲 WebSocket 相关知识,我们通过 WebGL 3D 拓扑图来呈现一个有趣的 De ...

  6. 基于HTML5的WebGL应用内存泄露分析

    上篇(http://www.hightopo.com/blog/194.html)我们通过定制了CPU和内存展示界面,体验了HT for Web通过定义矢量实现图形绘制与业务数据的代码解耦及绑定联动, ...

  7. 基于WebGL 的3D呈现A* Search Algorithm

    http://www.hightopo.com/demo/astar/astar.html 最近搞个游戏遇到最短路径的常规游戏问题,一时起兴基于HT for Web写了个A*算法的WebGL 3D呈现 ...

  8. 20个不可思议的 WebGL 示例和演示

    WebGL 是一项在网页浏览器呈现3D画面的技术,有别于过去需要安装浏览器插件,通过 WebGL 的技术,只需要编写网页代码即可实现3D图像的展示.WebGL 可以为 Canvas 提供硬件3D加速渲 ...

  9. webgl 循环传参画10个点

    function main(){ var canvas = document.getElementById("webgl"); var gl = getWebGLContext(c ...

  10. webstorm对WebGL自动提示

    默认竟然没有勾选上,怪不得提示的时候,有很多webgl接口找不到方法(虽然可以运行).

随机推荐

  1. canvas学习笔记：canvas对图片的像素级处理--ImageData的应用

    学习了canvas的基本绘图功能后,惊喜的发现canvas对图片数据也有相当强大的处理功能,能够从像素级别操作位图,当然[lte ie8]不支持. 主要的函数有三个: ctx.createImageD ...

  2. Web前端开发规范手册

    一.规范目的 1.1  概述 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发.  ...

  3. 基于SQL Server 2008 Service Broker构建企业级消息系统

    注:这篇文章是为InfoQ 中文站而写,文章的地址是:http://www.infoq.com/cn/articles/enterprisemessage-sqlserver-servicebroke ...

  4. Lyft押重注于苹果编程语言Swift

    Lyft押重注于苹果编程语言Swift 1年后获得丰厚回报BI中文站 8月22日报道 一年多以前,打车应用Lyft做出重大决定,决心押重注于苹果开发的编程语言Swift,用这种编程语言重写其所有iPh ...

  5. java筛选法求素数

    这本身没什么,代码一堆 发来纪念下而已 本来刚学习java,编写输出100以内的素数 对于我这个有代码运行性能洁癖的人(但是本身又不懂算法)来说,不能忍 于是看了些资料 参考: http://blog ...

  6. Redis设计与实现（一~五整合版）【搬运】

    Redis设计与实现(一~五整合版) by @飘过的小牛 一 前言 项目中用到了redis,但用到的都是最最基本的功能,比如简单的slave机制,数据结构只使用了字符串.但是一直听说redis是一个很 ...

  7. iOS 支付宝第三方使用步骤

    使用支付宝进行一个完整的支付功能,大致有以下步骤: 1 与支付宝进行签约,获得商户ID(partner)和账号ID(seller) 2 下载相应的公钥私钥文件(加密签名用) 3 下载支付宝SDK 4 ...

  8. Windows下QT Creator工程中添加文件夹

    在QT项目,常常会有很多头文件和源文件,但是QT Creator中却没有添加文件夹的功能,造成项目代码混乱.   下面是建立文件的步骤: 1.打开工程目录,在目录下建立文件夹,如建立文件SerialP ...

  9. Graphics2D字符串根据文本框缩小字体自动换行

    /** * *描述: 长字符串缩小字体自动换行 *@param g  *@param text 字符串 *@param lineWidth 单元格宽度 *@param cellHeight 单元格高度 ...

  10. centos7安装nginx

    一般我们都需要先装pcre, zlib,前者为了重写rewrite,后者为了gzip压缩. 一:安装 pcre 1.下载地址:百度云盘 http://pan.baidu.com/s/1dFusO3v ...