之前的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——Shell编程基础

    1. shell 脚本的执行方式 1.1 直接绝对路径执行 1.2 相对路径执行 首先进入到shell脚本所造的目录 PS:用./执行要增加x权限.用bash执行可以不增加x权限 1.3 在当前she ...

  2. Git 创建并管理局域网仓库

    Git 作为当前比较流行的代码管理工具,可以实现多人协作,不同版本代码管理. 本文内容基于Ubuntu. 0. 配置git信息 git config --global user.name XXX # ...

  3. 鼠标移动在屏幕上显示温度Tip提示功能-CToolTipCtrl类的使用

    初学VC++,太多知识不懂,需要不断的查找资料,想通过记录让自己有所积累,主要是怕以后会很快忘记.最近在做一个在屏幕上显示鼠标移动位置的温度值,我利用先缓存一帧图像的温度值,然后,通过鼠标移动消息相应 ...

  4. 笔记-scrapy-selector

    笔记-scrapy-selector scrapy版本:1.5.0 1.总述 scrapy内置selector建立在lxml上. 2.使用 可以使用xpath和css方法来进行解析,两者都返回列表: ...

  5. SSM-CRUD入门项目——删除

    删除 分析 可以进行单个删除,直接点击每条记录后的删除按钮 批量删除,通过勾选checkbox框进行选择删除 单个删除: 通过发送DELETE请求的URL:/emp/{id} 这次我们先从contro ...

  6. 2016-2017-2 20155325实验二《Java面向对象程序设计》实验报告

    实验二 面向对象程序设计-1 答案截图 码云代码链接 链接1 实验遇到的问题和解决过程 问题1:在plugins里搜索不到JUnitGenerator V2.0只能搜到Generste Teats 问 ...

  7. mysql的启动，停止与重启

    启动mysql:方式一:sudo /etc/init.d/mysql start 方式二:sudo start mysql方式三:sudo service mysql start 停止mysql:方式 ...

  8. 【洛谷P2016】战略游戏

    题面 题解 树形\(dp\)(最大独立集) 设\(f_{i,0/1}\)表示\(dp\)到第\(i\)个点,在这个点放了(没放)士兵的最小花费 直接转移即可. 代码 #include<cstdi ...

  9. springboot对security的后端配置

    一.Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架.它提供了一组可以在Spring应用上下文中配置的Bean,充分利用了Spring ...

  10. javaweb(十九)——JSP标签

    一.JSP标签介绍 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. 二.JSP常用标签 ...