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

整个程序包含两个文件,分别是:

1. HelloTriangle.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="600" height="600">
  9. </canvas>
  10. </body>
  11. <script type="text/javascript" src="HelloTriangle.js">
  12. </script>
  13. </html>

2. HelloTriangle.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. }
  21. function loadShader(type, shaderSource) {
  22. var shader = gl.createShader(type);
  23. gl.shaderSource(shader, shaderSource);
  24. gl.compileShader(shader);
  25. if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
  26. alert("Error compiling shader" + gl.getShaderInfoLog(shader));
  27. gl.deleteShader(shader);
  28. return null;
  29. }
  30. return shader;
  31. }
  32. function setupShaders() {
  33. //顶点着色器程序
  34. var vertexShaderSource =
  35. 'attribute vec4 a_Position;\n' +
  36. 'void main() {\n' +
  37. ' gl_Position = a_Position;\n' +
  38. ' gl_PointSize = 10.0;\n' +
  39. '}\n';
  40. //片元着色器程序
  41. var fragmentShaderSource =
  42. 'void main(){ \n' +
  43. ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); \n' + //gl_FragColor指定像素的颜色
  44. '} \n';
  45. var vertexShader = loadShader(gl.VERTEX_SHADER, vertexShaderSource);
  46. var fragmentShader = loadShader(gl.FRAGMENT_SHADER, fragmentShaderSource);
  47. var shaderProgram = gl.createProgram();
  48. gl.attachShader(shaderProgram, vertexShader);
  49. gl.attachShader(shaderProgram, fragmentShader);
  50. gl.linkProgram(shaderProgram);
  51. if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
  52. alert("Failed to setup shaders");
  53. }
  54. gl.useProgram(shaderProgram);
  55. gl.program= shaderProgram;
  56. }
  57. function initVertexBuffers(gl) {
  58. var vertices = new Float32Array([
  59. 0, 0.5, -0.5, -0.5, 0.5, -0.5
  60. ]);
  61. var n = 3; // The number of vertices
  62. // Create a buffer object
  63. var vertexBuffer = gl.createBuffer();
  64. if (!vertexBuffer) {
  65. console.log('Failed to create the buffer object');
  66. return -1;
  67. }
  68. // Bind the buffer object to target
  69. gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  70. // Write date into the buffer object
  71. gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
  72. var a_PosLocation = gl.getAttribLocation(gl.program, 'a_Position');
  73. if (a_PosLocation < 0) {
  74. console.log('Failed to get the storage location of a_Position');
  75. return -1;
  76. }
  77. // Assign the buffer object to a_Position variable
  78. gl.vertexAttribPointer(a_PosLocation, 2, gl.FLOAT, false, 0, 0);
  79. // Enable the assignment to a_Position variable
  80. gl.enableVertexAttribArray(a_PosLocation);
  81. return n;
  82. }
  83. function startup(){
  84. var canvas = document.getElementById('myGLCanvas');//获取<canvas>元素
  85. gl = createGLContext(canvas);
  86. setupShaders();
  87. // Write the positions of vertices to a vertex shader
  88. var n = initVertexBuffers(gl);
  89. if (n < 0) {
  90. console.log('Failed to set the positions of the vertices');
  91. return;
  92. }
  93. // Specify the color for clearing <canvas>
  94. gl.clearColor(0, 0, 0, 1);
  95. // Clear <canvas>
  96. gl.clear(gl.COLOR_BUFFER_BIT);
  97. // Draw the rectangle
  98. gl.drawArrays(gl.TRIANGLES, 0, n);
  99. }

参考代码

  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. webpack-dev-server和webpack

    指导小伙伴在webstorm+nodejs环境下新建项目时,小伙伴出现了一个很神奇的问题:没有执行webpack-dev-server情况下,即使执行npm init,也不会出现package.jso ...

  2. 【hiho一下 第145周】智力竞赛

    [题目链接]:http://hihocoder.com/contest/hiho145/problem/1 [题意] [题解] 设f[i][j]表示做对i道题,做错j道题能够到达的最好状态是什么; 这 ...

  3. 【ACM】nyoj_132_最长回文子串_201308151713

    最长回文子串 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 输入一个字符串,求出其中最长的回文子串.子串的含义是:在原串连续出现的字符串片段.回文的含义是:正着看和 ...

  4. 使用markdown和gitblog搭建自己的博客

    GitBlog官网 GitBlog文档 Gitblog官方QQ群:84692078 GitBlog是一个简单易用的Markdown博客系统.它不须要数据库,没有管理后台功能,更新博客仅仅须要加入你写好 ...

  5. jsonArray和Java List对象互转,日期处理

    List转jsonArray : // 格式化日期 JsonConfig jsonConfig = new JsonConfig(); DSHJsonDateValueProcessor dshJso ...

  6. android中的back键处理

    Back键是手机上的后退键,一般的软件不捕获相关信息可能导致你的程序被切换到后台,而回到桌面的尴尬情况,在Android上有两种方法来获取该按钮的事件. 1.直接获取按钮按下事件,此方法兼容Andro ...

  7. Android按键添加和处理的方案【转】

    本文转载自:http://www.cnblogs.com/skywang12345/p/3142851.html Android按键添加和处理的方案  版本号 说明 作者 日期  1.0  Andro ...

  8. linux patch 命令小结【转】

    本文转载自:http://blog.csdn.net/wh_19910525/article/details/7515540 说到patch命令,就不得不提到diff命令,也就是制作patch的必要工 ...

  9. POJ 2976(01分数划分+二分)

                                                                                                  Droppi ...

  10. hdoj--1418--抱歉(水题)

     抱歉 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...