<!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. 【实战Java高并发程序设计 4】数组也能无锁:AtomicIntegerArray

    除了提供基本数据类型外,JDK还为我们准备了数组等复合结构.当前可用的原子数组有:AtomicIntegerArray.AtomicLongArray和AtomicReferenceArray,分别表 ...

  2. Hibernate框架中Criteria语句

    在Hibernate中有一种查询语句是Criteria查询(QBC查询),今天呢 我们就一个个的详细的跟大家一起探讨Criteria语句的相关知识点 案例前的准备 //插入测试数据,构建数据库 pub ...

  3. Python之路第一课Day1--随堂笔记

    课堂大纲: 一.Python介绍 二.发展史 三.Python 2 or 3? 四.安装 五.Hello World程序 六.变量 七.用户输入 八.模块初识 九..pyc是个什么鬼? 十.数据类型初 ...

  4. 编写可维护的JavaScript代码

    1.  1)for-in循环用来遍历对象属性.不仅遍历对象的实例属性,还遍历从原型继承来的属性. 所以最好使用hasOwnProperty()方法来过滤. 2) for in循环遍历出的对象属性不能保 ...

  5. redis/php redis扩展 安装

    作者:silenceper 日期:2013-10-03 原文地址: http://silenceper.com/archives/952.html 我是在CentOS 6.3 中进行的. 使用到的软件 ...

  6. MS SQL Server带有时间的记录怎样查询

    比如某一张表[A]有一个保存日期包含时间字段[B],如果以这个段[B]作查询条件对数据记录进行查询.也我们得花些心思才能查询到我们想得到的记录. 现在我们需要查询这天2014-06-21的所有记录: ...

  7. 一个ORM的实现(附源代码)

    1 前言 经过一段时间的编写,终于有出来一个稳定的版本,期间考虑了多种解决方案也偷偷学了下园子里面大神们的作品. 已经有很多的ORM框架,为什么要自己实现一个?我的原因是在遇到特殊需求时,可以在ORM ...

  8. ExtAspNet和FineUI未将对象引用设置到对象的实例

    要在web.config中加入 <configSections> <section name="ExtAspNet" type="ExtAspNet.C ...

  9. Oracle User Calls 和 Executions 两个概念的区别

    User calls = (User session Login + Parsing within a session + Executions of sql's/Cursors ) per seco ...

  10. 让jar程序在linux上一直执行

    当我们把java程序打成jar包后,放到linux上通过putty或其它终端执行的时候,如果按照:java -jar xxxx.jar执行,当我们退出putty或终端的时候,xxxx.jar这个程序也 ...