之前的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. 201552-53 《Java程序设计》第三周问题汇总

    201552-53 <Java程序设计>第三周问题汇总 1. 4.2 基本类型打包器理解不是很好,希望老师讲解一下. 2.vim中怎么用"yyp"复制上一行代码 在按E ...

  2. 20155235 《Java程序设计》 实验一 Java开发环境的熟悉(Linux + Eclipse)

    20155235 <Java程序设计> 实验一 Java开发环境的熟悉(Linux + Eclipse) 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编 ...

  3. mycp 补交作业

    老师好:我昨天做完时已经是11点多了,错过了提交时间,希望用此篇博客弥补一下我的过失. import java.io.; import java.lang.; import java.util.Sca ...

  4. 20155327 2016-2017-2《Java程序设计》课程总结

    20155327 2016-2017-2<Java程序设计>课程总结 每周作业链接汇总 预备作业1:http://www.cnblogs.com/l97----/p/6160983.htm ...

  5. 封印解除：如何在Win10家庭版中启用组策略

    @echo off pushd "%~dp0" *.mum >List.txt *.mum >>List.txt for /f %%i in ('findstr ...

  6. day5 页面布局

    1.主站 <div class='pg-header'> <div style='width:980px;margin:0 auto;'> 内容自动居中 </div> ...

  7. 学习HTML 第一节.小试牛刀

    此贴并非教学,主要是自学笔记,所述内容只是些许个人学习心得的记录和备查积累,难以保证观点正确,也不一定能坚持完成. 如不幸到访,可能耽误您的时间,也难及时回复,贴主先此致歉.如偶有所得,相逢有缘,幸甚 ...

  8. 测试Websocket建立通信，使用protobuf格式交换数据

    接到一个应用测试,应用实现主要使用websocket保持长链接,使用protobuf格式交换数据,用途为发送消息,需要我们测试评估性能,初步评估需要测试长链接数.峰值消息数以及长期运行稳定性 整体需求 ...

  9. 接口自动化·分享·第二篇·你必须了解的HttpRequest和HttpResponse

    完成一个接口调用其实就是完成了一次http请求,所以你必须要清楚一个http请求的组成. 一次完整的请求包含:请求+响应. 一.HttpRequest请求对象 要调用一个接口,首先要准备的是一个请求对 ...

  10. 牛客网暑期ACM多校训练营（第四场）：A Ternary String（欧拉降幂）

    链接:牛客网暑期ACM多校训练营(第四场):A Ternary String 题意:给出一段数列 s,只包含 0.1.2 三种数.每秒在每个 2 后面会插入一个 1 ,每个 1 后面会插入一个 0,之 ...