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

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

1. HelloPoint1.html

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.         <title>画一个点</title>
  6.     </head>
  7.     <body onload="startup()">
  8.         <canvas id="myGLCanvas" width="640" height="480">
  9.         </canvas>
  10.     </body>
  11.     <script type="text/javascript" src="HelloPoint1.js">
  12.     </script>
  13. </html>

2. HelloPoint1.js

  1. var gl;
  2. function createGLContext(canvas) {
  3.   var names = ["webgl", "experimental-webgl"];
  4.   var context = null;
  5.   for (var i=0; i < names.length; i++) {
  6.     try {
  7.       context = canvas.getContext(names[i]); //获取webgl context绘图上下文
  8.     } catch(e) {}
  9.     if (context) {
  10.       break;
  11.     }
  12.   }
  13.   if (context) {
  14.     context.viewportWidth = canvas.width;
  15.     context.viewportHeight = canvas.height;
  16.   } else {
  17.     alert("Failed to create WebGL context!");
  18.   }
  19.   return context;
  20. }
  22. function loadShader(type, shaderSource) {
  23.   var shader = gl.createShader(type);
  24.   gl.shaderSource(shader, shaderSource);
  25.   gl.compileShader(shader);
  27.   if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
  28.       alert("Error compiling shader" + gl.getShaderInfoLog(shader));
  29.       gl.deleteShader(shader);
  30.       return null;
  31.   }
  32.   return shader;
  33. }
  35. function setupShaders() {
  36.     //顶点着色器程序
  37.     var vertexShaderSource = 'void main(){ \n' +
  38.     '    gl_Position = vec4(0.0, 0.0, 0.0, 1.0); \n' + //gl_Position指定了点的位置
  39.     '    gl_PointSize = 10.0; \n' +
  40.     '} \n';
  42.     //片元着色器程序
  43.     var fragmentShaderSource = 'void main(){ \n' +
  44.     '    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); \n' + //gl_FragColor指定像素的颜色
  45.     '} \n';                                         
  47.   var vertexShader = loadShader(gl.VERTEX_SHADER, vertexShaderSource);
  48.   var fragmentShader = loadShader(gl.FRAGMENT_SHADER, fragmentShaderSource);
  50.   var shaderProgram = gl.createProgram();
  51.   gl.attachShader(shaderProgram, vertexShader);
  52.   gl.attachShader(shaderProgram, fragmentShader);
  53.   gl.linkProgram(shaderProgram);
  55.   if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
  56.     alert("Failed to setup shaders");
  57.   }
  59.   gl.useProgram(shaderProgram);
  60.   gl.program= shaderProgram;
  61. }
  63. function startup(){
  64.     var canvas = document.getElementById('myGLCanvas');//获取<canvas>元素
  65.     gl = createGLContext(canvas);
  66.     setupShaders(); 
  68.     gl.clearColor(0.0, 0.0, 0.0, 1.0);//指定清空<canvas>的颜色
  69.     gl.clear(gl.COLOR_BUFFER_BIT);//清空<canvas>
  70.     gl.drawArrays(gl.POINTS, 0, 1);//从第0个元素开始，在指定位置（gl_Position）画1个点
  71.  }

参考代码

  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

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

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

  1. WebGL画点程序v3

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

  2. WebGL画点程序v2

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

  3. WebGl 画线

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

  4. SQL防注入程序 v1.0

    /// ***************C#版SQL防注入程序 v1.0************ /// *使用方法: /// 一.整站防注入(推荐) /// 在Global.asax.cs中查找App ...

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

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

  6. sphider 丁廷臣简体中文完美汉化版带蜘蛛搜索引擎程序 v1.3.4

    sphider 丁廷臣简体中文完美汉化版带蜘蛛搜索引擎程序 v1.3.4是最官方的新版,免费开源,用官方最新发布原版汉化.未更改任何内核文件. Sphider 是一个完美的带有蜘蛛的搜索引擎程序. S ...

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

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

  8. 画线代码V1.0.0

    画线代码: 最终效果图: 优点: 1.效果还行,计算量也不大(就一点2维直线一般式能有多少运算量). 缺点: 1.每条线怎么也是建模,可能会有点开销. 2.编辑起来很是麻烦. 代码部分: /***** ...

  9. webgl画个点

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

随机推荐

  1. Android DynamicGrid：拖曳交换位置

     Android DynamicGrid:拖曳交换位置 Android DynamicGrid是一个第三方开源项目,DynamicGrid在github上的项目主页是:https://github ...

  2. CentOS的free命令

    https://blog.csdn.net/for_tech/article/details/53044610 https://www.58jb.com/html/145.html

  3. 【ACM】hdu_zs3_1006_AB_201308101123

    A/B Time Limit : 1000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other)Total Submission ...

  4. Spring MVC-表单（Form）标签-文件上传（File Upload）示例（转载实践）

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_upload.htm 说明:示例基于Spring MVC 4.1.6. 以下示例显 ...

  5. [Tools] Using colours in a NodeJS terminal - make your output pop

    Use can use colour and styles to make it easy to spot errors and group common functionality into blo ...

  6. XMPP基本内容简单介绍

    即时通讯技术简单介绍 即时通讯技术(IM)支持用户在线实时交谈.假设要发送一条信息,用户须要打开一个小窗体,以便让用户及其朋友在当中输入信息并让交谈两方都看到交谈的内容.有很多的IM系统,如AOL I ...

  7. Hdu oj 1012 u Calculate e

    分析:注意格式. #include<stdio.h> int main() { int i,j,k; double sum=0; printf("n e\n- --------- ...

  8. 使用同步适配器（sync adapter）数据传输

    在android设备与webserver之间实现数据同步能显著提高你的应用的有用性.让你的应用更受用户的欢迎. 比方说.你的数据上传给webserver,这就有了一个有用的备份.当用户的设备离线工作时 ...

  9. 抽象类（Abstract）和接口的不同点、共同点（Interface）。

    同样点: (1) 都能够被继承 (2) 都不能被实例化 (3) 都能够包括方法声明 (4) 派生类必须实现未实现的方法 区 别: (1) 抽象基类能够定义字段.属性.方法实现.接口仅仅能定义属性.索引 ...

  10. 【Linux】Linux下配置apache

    一.获取软件: http://httpd.apache.org/   httpd-2.4.10.tar.gz 二.安装步骤: 解压源文件: 1) tar zvxf  httpd-2.4.10.tar. ...