之前的webgl 初识1, 初识2 已经介绍了webgl的基本概念，工作原理. 没有理解的自己yy.

现呈上例子一枚

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>helloworld</title>

     <script id="2d-vertex-shader" type="notjs">

         attribute vec4 a_position;

         attribute vec2 a_texCoord;

         varying vec2 v_texCoord;

         void main() {

             gl_Position = a_position;

             v_texCoord = a_texCoord;

         }

     </script>

     <script id="2d-fragment-shader" type="notjs">

         precision mediump float;

         uniform sampler2D u_image;

         varying vec2 v_texCoord;

         void main() {

            gl_FragColor = texture2D(u_image, v_texCoord);

         }

     </script>

     <script type="text/javascript">

         function main(image){

             console.log(image);

             var canvas = document.getElementById("c");

             var gl = canvas.getContext("webgl");

             if (!gl) {

                 return;

             }

             var vertexShaderSource = document.getElementById("2d-vertex-shader").text;

             var fragmentShaderSource = document.getElementById("2d-fragment-shader").text;

             var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);

             var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

             var program = createProgram(gl, vertexShader, fragmentShader);

             var positionAttributeLocation = gl.getAttribLocation(program, "a_position");

             var texCoordAttributeLocation = gl.getAttribLocation(program, "a_texCoord");

             var imageLocation = gl.getUniformLocation(program, "u_image");

             var positionBuffer = gl.createBuffer();

             var positions = [0, 0,

                 0, 0.5,

                 0.7, 0,

                 0.7, 0.5];

             gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

             gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

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

             var uvBuffer = gl.createBuffer();

             var uvs = [0, 0, 0, 1.0, 1.0, 1.0, 1.0, 0];

             gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer);

             gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(uvs), gl.STATIC_DRAW);

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

             var texture = gl.createTexture();

             gl.bindTexture(gl.TEXTURE_2D, texture);

             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);

             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);

             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

             gl.texImage2D(gl.TEXTURE_2D, imageLocation, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

             gl.enableVertexAttribArray(positionAttributeLocation);

             gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

             gl.enableVertexAttribArray(texCoordAttributeLocation);

             // gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer);

             gl.activeTexture(gl.TEXTURE);

             // gl.bindTexture(gl.TEXTURE_2D, texture);

             gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

             gl.useProgram(program);

             gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

         }

         function createShader(gl, type, source) {

             var shader = gl.createShader(type);

             gl.shaderSource(shader, source);

             gl.compileShader(shader);

             var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);

             if (success) {

                 return shader;

             }

             console.log(gl.getShaderInfoLog(shader));

             gl.deleteShader(shader);

         }

         function createProgram(gl, vertexShader, fragmentShader) {

             var program = gl.createProgram();

             gl.attachShader(program, vertexShader);

             gl.attachShader(program, fragmentShader);

             gl.linkProgram(program);

             var success = gl.getProgramParameter(program, gl.LINK_STATUS);

             if (success) {

                 return program;

             }

             console.log(gl.getProgramInfoLog(program));

             gl.deleteProgram(program);

         }

         function onload() {

             var image = new Image();

             image.src = "leaves.jpg";  // MUST BE SAME DOMAIN!!!

             image.onload = function() {

                 main(image);

             }

         }

     </script>

 </head>

 <body onload="onload();">

 <canvas id="c" width="400" height="400"></canvas>

 </body>

 </html>

webgl helloworld的更多相关文章

  1. HTML5 学习总结（四）——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  2. canvas绘图、WebGL、SVG

    目录 一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画 二.WebGL 2.1.HTML ...

  3. HTML5 学习笔记（四）——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  4. 开源免费跨平台opengl opencv webgl gtk blender, opengl贴图程序

    三维图形的这是opengl的强项,大型3D游戏都会把它作为首选.图像处理,是opencv的锁定的目标,大多都是C的api,也有少部分是C++的,工业图像表现,图像识别,都会考虑opencv的.webg ...

  5. HTML学习总结（四）【canvas绘图、WebGL、SVG】

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  6. Cesium案例解析(一)——HelloWorld

    目录 1. 概述 2. 实例 2.1. HelloWorld.html 2.2. HelloWorld.js 3. 结果 1. 概述 感觉网上已经有不少关于cesium的教程了,但是学习一个框架最快的 ...

  7. 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert

    使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...

  8. Idea下用SBT搭建Spark Helloworld

    没用过IDEA工具,听说跟Eclipse差不多,sbt在Idea其实就等于maven在Eclipse.Spark运行在JVM中,所以要在Idea下运行spark,就先要安装JDK 1.8+ 然后加入S ...

  9. Webgl的2D开发方案(一)spritebatcher

    使用TypeScript 和 webgl 开发   第一步:实现了SpriteBatcher 例子如下 http://oak2x0a9v.bkt.clouddn.com/test/index.html ...

随机推荐

  1. Linux入门第一天——基本概述与环境搭建

     一.Linux简介 1.历史 Linux内核最初只是由芬兰人李纳斯·托瓦兹(Linus Torvalds)在赫尔辛基大学上学时出于个人爱好而编写的. Linux是一套免费使用和自由传播的类Unix操 ...

  2. Using a custom AxisRenderer object

    Using a custom AxisRenderer object http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d1 ...

  3. 20155210潘滢昊 Java第二次试验

    20155210潘滢昊 Java第二次试验 实验内容 学会JunitTest的使用 实验代码 MyUtilTest代码: import org.junit.*; import junit.framew ...

  4. 2017-2018-1 《信息安全技术》实验二——Windows口令破解

    2017-2018-1 <信息安全技术>实验二--Windows口令破解 所用工具 系统:能勾起我回忆的Windows 2003 工具:LC5.SuperDic Windows口令破解 口 ...

  5. 20155230 实验二《Java面向对象程序设计》实验报告

    20155230 实验二<Java面向对象程序设计>实验报告 一.单元测试 三种代码 知道了伪代码.产品代码.测试代码的关系和用途,并根据老师的例子,按测试代码调试了产品代码. 值得注意的 ...

  6. 20155327李百乾 Exp3 免杀原理与实践

    20155327李百乾 Exp3 免杀原理与实践 实践guocheng 一.Msfvenom使用编码器 1.利用(virustota)[https://www.virustotal.com/]检测实验 ...

  7. 【BZOJ4566】[HAOI2016]找相同字符

    [BZOJ4566][HAOI2016]找相同字符 题面 给定两个字符串,求出在两个字符串中各取出一个子串使得这两个子串相同的方案数.两个方案不同当且仅当这两个子串中有一个位置不同. 其中\(1\le ...

  8. 2017"百度之星"程序设计大赛 - 初赛（A） 小C的倍数问题

    谢谢帮忙刷访问量! 题解当然下考再发啦 答案为P-1的约数个数 // It is made by XZZ #include<cstdio> #include<algorithm> ...

  9. CentOS 6.5关闭防火墙

    关闭命令:  service iptables stop 永久关闭防火墙:chkconfig iptables off 两个命令同时运行,运行完成后查看防火墙关闭状态 service iptables ...

  10. Android开源的精美日历控件，热插拔设计的万能自定义UI

    Android开源的精美日历控件,热插拔设计的万能自定义UI UI框架应该逻辑与界面实现分离,该日历控件使用了热插拔的设计 ,简单几步即可实现你需要的UI效果,热插拔的思想是你提供你的实现,我提供我的 ...