之前的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. 5.11-笨办法学python-习题13（argv）

    参考书目<learn python the hard way>——练习13 这个练习在Python上练了很多次,都运行不成功.在网上查了很多资料,发现很多人在练第13个练习的时候都有问题, ...

  2. Tokio，Rust异步编程实践之路

    缘起 在许多编程语言里,我们都非常乐于去研究在这个语言中所使用的异步网络编程的框架,比如说Python的 Gevent.asyncio,Nginx 和 OpenResty,Go 等,今年年初我开始接触 ...

  3. 20155210潘滢昊 2016-2017-2 《Java程序设计》第2周学习总结

    20155210潘滢昊 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 %%:表示字符串中的%. %d:以十进制整数格式输出 %f:以十进制浮点式格式输出 % ...

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

    2017-2018-1 20155319<信息安全技术>实验二--Windows口令破解 实验环境 试验系统:Windows 2003 实验工具:LC5.SuperDic 实验原理 一．口 ...

  5. 安装虚拟机和Linux系统的学习

    安装虚拟机和Linux系统的学习(随笔3) 1.安装虚拟机 首先我按着老师给的链接上的步骤一步一步安装VirtualBox,进行得十分顺利. 接着则是在虚拟机上安装Ubuntu. 然而安装完成以后按要 ...

  6. 20155325《Java程序设计》实验一（Java开发环境的熟悉）实验报告

    实验一Java开发环境的熟悉-1 提交 Linux或Window或macOS中命令行下运行Java的截图 运行结果包含自己学号等证明自己身份的信息 实验一Java开发环境的熟悉-2 提交 Linux或 ...

  7. 虚拟机安装&Linux初探

    学习基于VirtualBox虚拟机安装Ubuntu图文教程在自己笔记本上安装Linux操作系统 安装虚拟机的过程还算顺利.除了在安装增强设备功能时需要将之前的硬盘弹出之外,没有遇到其他的问题. 通过实 ...

  8. combotree -下拉框树异步加载

    问题: 下拉树数据比较多时,全加载会产生页面延迟,需要实现异步加载 方案: 点击事件加载:先加载部分,点击节点时再展开并追加子节点 onBeforeExpand事件:在展开树前加载,感觉这种方式比较优 ...

  9. commons fileupload上传报错

    这个问题困扰我好久了一直没有找到解决方法,先记录下来. 生产环境(简称A)上老是出错,而测试环境(简称B)一切正常. 我们的框架是JAVA语言编写,基于struts1技术总监自己搭的框架,我在stru ...

  10. windows下Mysql安装启动及常用操作

    1.下载mysql https://dev.mysql.com/downloads/ 2.配置环境变量 变量名:MYSQL_HOME 变量值:E:\MySql\mysql-8.0.15-winx64\ ...