WebGL画点程序v3

本文程序实现画一个点的任务,如下图。其中,点的颜色由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/7269946.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏点滴积累

geotrellis使用(十四)导出定制的GeoTiff

Geotrellis系列文章链接地址http://www.cnblogs.com/shoufengwei/p/5619419.html 目录 前言 需求说...

31660
来自专栏用户2442861的专栏

阿里巴巴2014笔试题详解(9月22北京)

第一部分 单选题(前10题,每题2分;后10题,每题3分。选对得满分,选错倒扣1分,不选得0分)

22510
来自专栏图形学与OpenGL

WebGL画点程序v2

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

12740
来自专栏DT乱“码”

JAVA EE 开发中 常用的API包

API  常见的几个类:lang/util/io/math/net awt --------         用于创建用户界面和绘制图形的所有类。 util -...

25250
来自专栏magicsoar

Effective Modern C++翻译(5)-条款4:了解如何观察推导出的类型

条款4:了解如何观察推导出的类型 那些想要知道编译器推导出的类型的人通常分为两种,第一种是实用主义者,他们的动力通常来自于软件产生的问题(例如他们还在调试解决中...

21280
来自专栏python3

python--time模块

time.localtime([secs])  默认将当前时间戳转成当前时区的struct_time

12010
来自专栏xcywt

编译到底做了什么(***.c -> ***.o的过程)

 (第一次写博客,好激动的说.......) 我们知道,一个程序由源代码到可执行文件往往由这几步构成: 预处理(Prepressing)-> 编译(Compil...

20950
来自专栏FreeBuf

使用Burpsuite扩展Hackvertor绕过WAF并解密XOR

最近,我一直在忙于开发自己的一个Burp扩展Hackvertor。这是一个具有基于标签转换功能的编码器,相比起Burp内置的解码器它的功能要强大的多。通过标签的...

15310
来自专栏大数据智能实战

tensorflow.models.rnn.rnn_cell.linear在tensorflow1.0版本之后找不到(附tensorflow1.0 API新变化)

由于版本更新关系,从原来的tensorflow低版本到升级到tensorflow1.0以上时,发现有很多API函数变化是很正常的事情,大多碰到的如: 如其中tf...

33370
来自专栏mathor

matlab—特殊变量类型与档案存取

这里举个例子,有一个学生structure,包含姓名、邮箱、学号、成绩,应该如何创建这个structure

10940

扫码关注云+社区

领取腾讯云代金券