之前的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. 目标反射回波检测算法及其FPGA实现 之一：算法概述

    目标反射回波检测算法及其FPGA实现之一:算法概述 前段时间,接触了一个声呐目标反射回波检测的项目.声呐接收机要实现的核心功能是在含有大量噪声的反射回波中,识别出发射机发出的激励信号的回波.我会分几篇 ...

  2. uni-app 下拉至指定高度固定view

    uni.createSelectorQuery().select(‘#salyt’).boundingClientRect(function(rects){ console.log(rects) va ...

  3. 20155212 2016-2017-2 《Java程序设计》第10周学习总结

    20155212 2016-2017-2 <Java程序设计>第10周学习总结 教材学习内容总结 密码学基础 ava API支持多种加密算法.如MessageDigest类,可以构建MD5 ...

  4. 20155304 2016-2017-2 《Java程序设计》实验二 Java面向对象程序设计

    实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 实验要求 没有Linux ...

  5. ＱＴＣ＋＋监控USB插拔

    #if defined(Q_OS_WIN) #include <qt_windows.h> #include <QtCore/qglobal.h> #include <d ...

  6. Phaser3 场景Scene之间的传值 -- HTML JAVASCRIPT 网页游戏开发

      PHASERJS3 一.首先当然得有至少有二个场景sceneA.js,sceneB.js 二.从场景A传值到场景B二种方法 1)通过事件this.events.emit('event key',{ ...

  7. 3.5星|《哈佛商学院最受欢迎的领导课》：讲给CEO的管理学常识、常见错误和改进方法

    哈佛商学院最受欢迎的领导课 英文版出版于2011年,还不算旧.中信2013年出过一版,这版估计是英文书版权过期后重新购买了再出版. 全书以写给CEO的口吻讲了许多管理常识,包含一些CEO容易犯的问题和 ...

  8. JPA error org.hibernate.AnnotationException: No identifier specified for entity

    错误:org.hibernate.AnnotationException: No identifier specified for entity 原因:JPA所使用的Entity需要标注@Id,在引用 ...

  9. Python基础知识-09-函数

    python其他知识目录 1.函数介绍 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段.函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如pr ...

  10. varnish squid nginx比较

    linux运维中,web cache server方案的部署是一个很重要的环节,选择也有很多种比如:varnish.squid.nginx.下面就对当下常用的这几个web cache server做一 ...