本文程序实现画一个点的任务，如下图。其中，点的颜色由Javascript传到片元着色器程序中。

整个程序包含两个文件，分别是：

1. HelloPoint3.html

<!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="startup()">

        <canvas id="myGLCanvas" width="640" height="480">

        </canvas>

    </body>

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

    </script>

</html>

2. HelloPoint3.js

var gl;

function createGLContext(canvas) {

  var names = ["webgl", "experimental-webgl"];

  var context = null;

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

    try {

      context = canvas.getContext(names[i]); //获取webgl context绘图上下文

    } catch(e) {}

    if (context) {

      break;

    }

  }

  if (context) {

    context.viewportWidth = canvas.width;

    context.viewportHeight = canvas.height;

  } else {

    alert("Failed to create WebGL context!");

  }

  return context;

}

function loadShader(type, shaderSource) {

  var shader = gl.createShader(type);

  gl.shaderSource(shader, shaderSource);

  gl.compileShader(shader);

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

      alert("Error compiling shader" + gl.getShaderInfoLog(shader));

      gl.deleteShader(shader);

      return null;

  }

  return shader;

}

function setupShaders() {

    //顶点着色器程序

    var vertexShaderSource =

      'attribute vec4 a_Position;\n' + // attribute variable

      'void main() {\n' +

      '  gl_Position = a_Position;\n' +

      '  gl_PointSize = 10.0;\n' +

      '}\n'; 

    //片元着色器程序

    var fragmentShaderSource =

      'precision mediump float;\n' +

      'uniform vec4 u_FragColor;\n' +  // uniform変量

      'void main() {\n' +

      '  gl_FragColor = u_FragColor;\n' +

      '}\n';                                        

  var vertexShader = loadShader(gl.VERTEX_SHADER, vertexShaderSource);

  var fragmentShader = loadShader(gl.FRAGMENT_SHADER, fragmentShaderSource);

  var shaderProgram = gl.createProgram();

  gl.attachShader(shaderProgram, vertexShader);

  gl.attachShader(shaderProgram, fragmentShader);

  gl.linkProgram(shaderProgram);

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

    alert("Failed to setup shaders");

  }

  gl.useProgram(shaderProgram);

  gl.program= shaderProgram;

}

function startup(){

    var canvas = document.getElementById('myGLCanvas');//获取<canvas>元素

    gl = createGLContext(canvas);

    setupShaders(); 

    // Get the storage location of a_Position

    var a_PosLocation = gl.getAttribLocation(gl.program, 'a_Position');

    if (a_PosLocation < 0) {

      console.log('Failed to get the storage location of a_Position');

      return;

    }

    // Get the storage location of u_FragColor

    var u_FragColorLocation = gl.getUniformLocation(gl.program, 'u_FragColor');

    if (!u_FragColorLocation) {

      console.log('Failed to get the storage location of u_FragColor');

      return;

    }

    // Pass vertex position to attribute variable

    gl.vertexAttrib3f(a_PosLocation, 0.0, 0.0, 0.0);

    // Pass the color of a point to u_FragColor variable

    gl.uniform4f(u_FragColorLocation, 1.0, 1.0, 0.0, 1.0);

    gl.clearColor(0.0, 0.0, 0.0, 1.0);//指定清空<canvas>的颜色

    gl.clear(gl.COLOR_BUFFER_BIT);//清空<canvas>

    gl.drawArrays(gl.POINTS, 0, 1);//从第0个元素开始，在指定位置（gl_Position）画1个点

 }

参考代码

  1. Hello Point——WebGL, http://www.cnblogs.com/idealer3d/p/3513838.html
  2. Professional WebGL Programming: Developing 3D Graphics for the Web,Listing 2-1,http://media.wiley.com/product_ancillary/60/11199688/DOWNLOAD/Listing-2-1.html
  3. WebGL Programming Guide, https://sites.google.com/site/webglbook/

转载请注明出处：http://www.cnblogs.com/opengl/p/7262596.html

WebGL画点程序v3的更多相关文章

  1. WebGL画点程序v2

    本文程序实现画一个点的任务,如下图.其中,点的位置坐标由Javascript传到着色器程序中,而不是直接给定("硬编码")在顶点着色器中. 整个程序包含两个文件,分别是: 1. H ...

  2. WebGL画点程序v1

    本文程序实现画一个点的任务,如下图.其中,点的位置直接给定("硬编码")在顶点着色器中. 整个程序包含两个文件,分别是: 1. HelloPoint1.html <!DOCT ...

  3. WebGl 画线

    效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. 【Gamma】“北航社团帮”测试报告——小程序v3.0

    目录 测试计划.过程和结果 后端测试--单元测试与覆盖率 后端测试--压力测试 展示部分数据 平均数据 前端测试--小程序v3.0 新功能 各页面均可正常打开,跳转,回退 授权登录与权限检查 页面数据 ...

  5. Java编写画图板程序细节-保存已画图形

    没有Java编写画图板程序细节-保存已画图形   一.为何我们要保存画图板上已画图形呢? 有很多人会问,为什么我们一定要保存画图板上已经画好了的图形呢?原因很简单.当我们在画图板上画完自己想画的图形后 ...

  6. 【Gamma】“北航社团帮”发布说明——小程序v3.0

    目录 Gamma版本新功能 小程序v3.0新功能 新功能列表 新功能展示 这一版修复的缺陷 Gamma版本的已知问题和限制 小程序端 网页端 运行.安装与发布 运行环境的要求 安装与发布 小程序 网页 ...

  7. WebGL画一个10px大小的点

    WebGL程序在屏幕上同时使用HTML和javascript来创建和显示三维图形.WebGL中新引入的<canvas>元素标签,它定义了网页上的绘图区域. 由于<canvas> ...

  8. webgl画个点

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

  9. matlab画棋盘格程序

    转载请注明出处:zhouyelihua**http://blog.csdn.net/zhouyelihua/article/details/46674191** 意义 在摄像机标定过程中经常须要打印棋 ...

随机推荐

  1. 并发通信Manage，队列， 互斥锁

    目录 Manage 队列  先入先出 互斥锁 Manage 进程间的通信是被限制的 from multiprocessing import Process a = 1 def func(): glob ...

  2. GeoTrust 企业(OV)型 SSL证书

      GeoTrust True BusinessID SSL证书属于企业验证(OV)级别的SSL证书,验证域名所有权,验证企业单位信息,提供40位/56位/128位,最高支持256位自适应加密,被20 ...

  3. CODEVS2144 砝码称重2 (哈希表)

    由于m很大,所以不能使用DP. 注意到n≤30,直接暴力2^n会TLE. 所以,将砝码平均分成两份,对一份进行一次暴力,用哈希表存下可能的结果. 对下一份再进行一次暴力,在哈希表中搜索剩余的砝码重量是 ...

  4. Servlet中使用getInputStream进行文件上传

    据说古老了点,所以代码比较繁琐,主要用于处理文件的地方太多. 下节用SERVLET3.0的Part进行操作一下. form.html: <!DOCTYPE html> <html&g ...

  5. [bzoj1342][Baltic2007]Sound静音问题_单调队列

    Sound静音问题 bzoj-1342 Baltic-2007 题目大意:给定一个n个数的序列,求所有的长度为m的区间,使得区间内最大值减去最小值不超过阈值c. 注释:$1\le n \le 10^6 ...

  6. [bzoj3037/2068]创世纪[Poi2004]SZP_树形dp_并查集_基环树

    创世纪 SZP bzoj-3037/2068 Poi-2004 题目大意:给你n个物品,每个物品可以且仅可以控制一个物品.问:选取一些物品,使得对于任意的一个被选取的物品来讲,都存在一个没有被选取的物 ...

  7. ASP.NET MVC 源码分析（二） —— 从 IRouteBuilder认识路由构建

    我们来看IRouteBuilder的定义: public interface IRouteBuilder { IRouter DefaultHandler { get; set; } IService ...

  8. [转]十五天精通WCF——第八天 对“绑定”的最后一点理解

    转眼已经中断10几天没有写博客了,也不是工作太忙,正好碰到了端午节,然后最近看天津台的爱情保卫战入迷了...太好看了,一直都是回味无穷...而且 涂磊老师话说的真是tmd的经典,然后就这样耽搁了,好了 ...

  9. Openfire：访问Servlet时绕开Openfire的身份验证

    假设有如下的场景,当我们开发一个允许Servlet访问的OF插件时,如果不需要身份验证的话,或者有其它的安全机制的话,我们会不希望每次都做一次OF的身份验证,而是能够直接访问Servlet.绕开身份验 ...

  10. 腾讯面试题：A.txt和B.txt两个文件，A有1亿个qq号，B有100万个，用代码实现交、并、差

    在STL中关于有序序列有这么四个算法: set_union(beg, end, beg, end2, dest);                    //求并集A∪B set_union(beg, ...