本文程序实现绘制一个三角形的任务，如下图。

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

1. HelloTriangle.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="600" height="600">

        </canvas>

    </body>

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

    </script>

</html>

2. HelloTriangle.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' +

      '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 initVertexBuffers(gl) {

  var vertices = new Float32Array([

    0, 0.5,   -0.5, -0.5,   0.5, -0.5

  ]);

  var n = 3; // The number of vertices

  // Create a buffer object

  var vertexBuffer = gl.createBuffer();

  if (!vertexBuffer) {

    console.log('Failed to create the buffer object');

    return -1;

  }

  // Bind the buffer object to target

  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

  // Write date into the buffer object

  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

  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 -1;

  }

  // Assign the buffer object to a_Position variable

  gl.vertexAttribPointer(a_PosLocation, 2, gl.FLOAT, false, 0, 0);

  // Enable the assignment to a_Position variable

  gl.enableVertexAttribArray(a_PosLocation);

  return n;

}

function startup(){

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

    gl = createGLContext(canvas);

    setupShaders(); 

  // Write the positions of vertices to a vertex shader

  var n = initVertexBuffers(gl);

  if (n < 0) {

    console.log('Failed to set the positions of the vertices');

    return;

  }

  // Specify the color for clearing <canvas>

  gl.clearColor(0, 0, 0, 1);

  // Clear <canvas>

  gl.clear(gl.COLOR_BUFFER_BIT);

  // Draw the rectangle

  gl.drawArrays(gl.TRIANGLES, 0, n);

 }

参考代码

  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/7274033.html

WebGL绘制三角形的更多相关文章

  1. WebGL入门教程(二)-webgl绘制三角形

    前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用web ...

  2. WebGL编程指南案例解析之绘制三角形

    //案例3.绘制三角形,将顶点数据存到缓冲区对象(gl.ARRAY_BUFFER)中,然后顶点着色器从里面读数据(3个顶点) //顶点着色器中去掉gl_PointSize = 10.0,绘制三角不能设 ...

  3. WebGL绘制有端头的线

    关于WebGL绘制线原理不明白的小伙伴,可以看看我之前的文章WebGL绘制有宽度的线.这一篇我们主要来介绍端头的绘制,先看效果图. 端头一般被称为lineCap,主要有以下三种形式: butt最简单等 ...

  4. WebGL绘制有宽度的线

    WebGL中有宽度的线一直都是初学者的一道门槛,因为在windows系统中底层的渲染接口都是D3D提供的,所以无论你的lineWidth设置为多少,最终绘制出来的只有一像素.即使在移动端可以设置有宽度 ...

  5. 一篇文章理清WebGL绘制流程

    转自:https://www.jianshu.com/p/e3d8a244f3d9 目录 初始化WebGL环境 顶点着色器(Vertex Shader)与片元着色器(Fragment Shader) ...

  6. WebGL 绘制Line的bug(二)

    上一篇文章简单介绍了WebGL绘制Line的bug,不少朋友给我发了私信,看来这个问题大家都遇上过哈.今天这篇文章会讲述解决这个问题的work around. 基本思路 上一篇文章结尾简单提了下解决的 ...

  7. WebGL 绘制Line的bug（一）

    今天说点跟WebGL相关的事儿,不知道大家有没有碰到过类似的烦恼. 熟悉WebGL的同学都知道,WebGL绘制模式有点.线.面三种:通过点的绘制可以实现粒子系统等,通过线可以绘制一些连线关系:面就强大 ...

  8. 从0开发3D引擎（九）：实现最小的3D程序-“绘制三角形”

    目录 上一篇博文 运行测试截图 需求分析 目标 特性 头脑风暴 确定需求 总体设计 具体实现 新建Engine3D项目 实现上下文 实现_init 实现"获得WebGL上下文" 实 ...

  9. 纯CCS绘制三角形箭头图案

    用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码: /* create an arrow that points up */ div.ar ...

随机推荐

  1. springCloud学习-服务的注册与发现（Eureka）

    1.小记 这段时间有空,把springcloud的知识整理一下,好记性不如烂笔头,也让自己对springcloud有个清晰的认识.此次的整理记录主要借鉴了这位大佬的博客 https://blog.cs ...

  2. 软件测试之怎么避免Bug漏测？

    一.对需求评审阶段,对业务需求细节理解不明确,未深入挖掘隐含拓展需求 改进措施 需求评审前,我们应该先仔细阅读prd及交互文档,先形成自己对产品的思考,通过脑图的方式列出对产品设计的疑问点,从用户或者 ...

  3. leetcode第一刷_Minimum Window Substring

    好题.字符串.线性时间. 我认为第一次拿到这个题的人应该不会知道该怎么做吧,要么就是我太弱了..先搞清楚这个题要求的是什么.从一个长字符串中找一个字串,这个字串中的字符全然包括了另一个给定目标串中的字 ...

  4. 卸载完百度影音以后天气助手还在，而且总是自己主动打开ie浏览器，解决方式

    今天暴风影音不好用了.我就安装了百度影音,还有意外发现.相同的视频,用百度影音看不清楚,然后我就直接卸载了.结果卸掉以天气小助手还是在,而且总弹白色小框框,各种广告.最忍不了的是还自己主动打开ie浏览 ...

  5. linux驱动由浅入深系列：tinyalsa(tinymix/tinycap/tinyplay/tinypcminfo)音频子系统之一【转】

    本文转载自:http://blog.csdn.net/radianceblau/article/details/64125411 目前linux中主流的音频体系结构是ALSA(Advanced Lin ...

  6. @Transaction 无效

    上班的时候碰到这个问题,看了一些博客写的,都试了一遍解决方案,发现结果还是不行, 最后突然发现我的配置顺序和网上的有些许不同,就改了下,发现成功了,特此打桩纪念一下. 一.先说一下基本用法: 1. @ ...

  7. B1045 糖果传递 数学

    糖果传递,一开始就想到了n^2的模拟贪心算法,但是一看,数据范围太大,好像只有O(N)能过...没啥方法,只好看题解,之后发现,woc,还有这种操作? 这个题直接可以用数学证明... 证明如下: 首先 ...

  8. 杂项：BIM

    ylbtech-杂项:BIM 建筑信息化模型(BIM)的英文全称是Building Information Modeling,是一个完备的信息模型,能够将工程项目在全生命周期中各个不同阶段的工程信息. ...

  9. c++ 数据预处理（数据去噪，归一化）

    正态分布3σ原则,把3倍方差之外的点设想为噪声数据来排除. 归一化,将数据经过处理之后限定到一定的范围内,一般都会将数据限定到[0,1]. #include <iostream>#incl ...

  10. ride关键字

    定义变量:set variable 打印 :log 列表:create list 字符转数字型:evaluate 随机数:evaluate random.randint 日志截图:先导入screens ...