本文程序实现画一个点的任务，如下图。其中，点的位置坐标由Javascript传到着色器程序中，而不是直接给定（“硬编码”）在顶点着色器中。

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

1. HelloPoint2.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="HelloPoint2.js">

    </script>

</html>

2. HelloPoint2.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 =

      'void main(){ \n' +

      '    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); \n' + //gl_FragColor指定像素的颜色

      '} \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;

    }

    // Pass vertex position to attribute variable

    gl.vertexAttrib3f(a_PosLocation, 0.0, 0.0, 0.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/7269809.html

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

  1. WebGL画点程序v3

    本文程序实现画一个点的任务,如下图.其中,点的颜色由Javascript传到片元着色器程序中. 整个程序包含两个文件,分别是: 1. HelloPoint3.html <!DOCTYPE HTM ...

  2. WebGL画点程序v1

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

  3. WebGl 画线

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

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

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

  5. 【Beta】“北航社团帮”测试报告——小程序v2.0与网页端v1.0

    目录 测试计划.过程和结果 后端测试--单元测试与覆盖率 后端测试--压力测试 展示部分数据 平均数据 前端测试--小程序v2.0 授权登录与权限检查 新功能的测试 兼容性测试 性能测试 前端测试-- ...

  6. 【Beta】“北航社团帮”发布声明——小程序v2.0与网页端v1.0

    目录 Beta版本新功能 小程序v2.0新功能 新功能列表 功能详情图 新功能动图展示 网页端v1.0功能 登录方式 社团信息的修改 新闻的录入和修改 活动的录入和修改 这一版修复的缺陷 Beta版本 ...

  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. 精彩的linux shell 命令

      1. Star Wars (telnet) telnet是基于Telnet协议的远程登录客户端程序,经常用来远程登录服务器.除此还可以用它来观看星球大战: telnet towel.blinken ...

  2. OpenStack命令行工具与API

    Openstack命令行工具 我们推荐Openstack命令行工具和Openstack的Dashboard两者结合使用.一些用户由于使用过其他云技术背景的,可能会使用EC2兼容的API,相对于我们需要 ...

  3. fzu 2129

    第i个元素a未出现过:dp[i] = (2 * dp[i-1] + 1) % mod; visit[a]代表a最后出现的位置 第i个元素a出现过:dp[i] = (2 * dp[i-1] - dp[v ...

  4. Vim+xxd=强大的十六进制编辑器

    Vim 是黑客文化中强大的编辑器.利用它调用外部十六进制文件显示命令xxd就可以顺利的编辑二进制文件了. 其中,%在vimComandLine时代表当前文件的路径,xxd是以十六进制显示一个文件,xx ...

  5. hibernate之多对多映射

    目录 第一章 多对多的应用场景 第二章 多对多的映射配置案例 2-1 创建项目和表 2-2 创建持久化类和映射文件 2-3 配置映射文件 2-4 测试 第三章 总结 源码地址:https://gith ...

  6. JDK（Java Development Kit）内置常用自带工具一览（转）

    注意:可能随着JDK的版本升级,工具也会随着增多. JDK(Java Development Kit)是Java程序员最核心的开发工具,没有之一. JDK是一个功能强大的Java开发套装,它不仅仅为我 ...

  7. HDU 4509

    很简单的排序题而已. #include <iostream> #include <cstdio> #include <algorithm> #include < ...

  8. SQL Server高速导入数据分享

    SQL Server高速导入数据,能够尝试的方法例如以下:CTE.OpenRowSet/OpenDataSource.BULK INSERT.bcp.Shell. 以下依次介绍这几种办法. 1.CTE ...

  9. Unable to instantiate Action, xxxAction, defined for &#39;xxx&#39; in namespace &#39;/&#39;xxxAction解决方式

    出现这个问题的解决办法主要有两个 1.假设项目没有使用Spring,则struts.xml配置文件里,这个action的class属性的路径没有写完整,应该是包名.类名 2.假设项目使用了Spring ...

  10. uva 11605 - Lights inside a 3d Grid(概率)

    option=com_onlinejudge&Itemid=8&page=show_problem&problem=2652" style=""& ...