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

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

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

    </script>

</html>

2. HelloPoint1.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 = 'void main(){ \n' +

    '    gl_Position = vec4(0.0, 0.0, 0.0, 1.0); \n' + //gl_Position指定了点的位置

    '    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(); 

    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

转载请注明出处：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. Huawei-R&S-网络工程师实验笔记20190608-VLAN划分基础（基于端口、MAC地址、子网地址、协议）

    >Huawei-R&S-网络工程师实验笔记20190608-VLAN划分基础(基于端口.MAC地址.子网地址.协议) >>实验开始,先上拓扑图参考: 一.基于端口划分VLAN ...

  2. 对SHH的公钥和私钥的简单理解

    SSH是在应用层和传输层基础上的安全协议 SSH提供了两种级别的安全验证: 第一基于密码的安全验证:账号.密码,但可能有别的服务器冒充真正的服务器,无法避免被“中间人”攻击(man-in-the-mi ...

  3. java中静态资源处理方法

    方案一:激活Tomcat的defaultServlet来处理静态文件 在 web.xml 中添加: <servlet-mapping> <servlet-name>defaul ...

  4. 使用JConsole观察分析Java程序的运行（转）

    一.JConsole是什么 从Java 5开始 引入了JConsole.JConsole是一个内置Java性能分析器,可以从命令行或在GUI shell中运行.您可以轻松地使用JConsole(或者, ...

  5. 利用Node.js对某智能家居server重构

    原文摘自我的前端博客,欢迎大家来訪问 http://www.hacke2.cn 之前负责过一个智能家居项目的开发,外包重庆一家公司的.我们主要开发server监控和集群版管理. 移动端和机顶盒的远程通 ...

  6. ⭐linux主次设备号介绍

    1.主设备号与次设备号的功能 在Linux内核中,主设备号标识设备对应的驱动程序,告诉Linux内核使用哪一个驱动程序为该设备(也就是/dev下的设备文件)服务:而次设备号则用来标识具体且唯一的某个设 ...

  7. 使用匿名类型做为ComboBox的DataSource

    使用匿名类型做为ComboBox的DataSource   ArrayList list = new ArrayList();            list.Add(new { id = " ...

  8. 2017 Multi-University Training Contest - Team 2&&hdu 6047 Maximum Sequence

    Maximum Sequence Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  9. B1295 [SCOI2009]最长距离 最短路

    就是一道最短路的裸题,直接跑spfa就行了.(spfa死了) 最后在答案处判断是否障碍物太多,然后就直接找最大值就行. (数据特别水,我错误算法60) 题干: Description windy有一块 ...

  10. B1047 理想的正方形 RMQ

    大家吸取我的教训,想好再写.我码了好长时间,最后发现算法处理的是另一个问题,我处理的是正方形情况的,才能用我优化之后的记忆化搜索,然而矩形就凉了. 先看一下题吧: Description 有一个a*b ...