效果：

代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>WebGl  二维纹理贴图(矩形)</title>

 </head>

 <body>

 <canvas id="myCanvas" width="500" height="300" style='border:1px solid red'></canvas>

 </body>

 <script>

     window.onload = function () {

         //获取上下文

         var canvas = document.getElementById('myCanvas');

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

         //定义矩形数据 并 将其储存在缓存对象

         var vertices = [

             -0.5,0.5,0.0,    0.0,0.0,//(x,y,z)(r,g,b)分别代表坐标和颜色

             -0.5,-0.5,0.0,   1.0,0.0,

             0.5,-0.5,0.0,    0.0,1.0,

             0.5,0.5,0.0,     1.0,1.0,

         ];

         var indices = [3,2,1,3,1,0];

         var vertex_buffer = gl.createBuffer();

         gl.bindBuffer(gl.ARRAY_BUFFER,vertex_buffer);

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

         var Index_Buffer = gl.createBuffer();

         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,Index_Buffer);//注意  是  ELEMENT_ARRAY_BUFFER  不是  ARRAY_BUFFER

         gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

         //创建和编译着色器程序

         var vertCode = 'attribute vec3 coordinates;' +

             'attribute vec2 texCoord;' +

             'varying vec2 vtexCoord;' +

             'void main() {' +

             '   gl_Position = vec4(coordinates, 1.0);' +

             '   vtexCoord = texCoord;' +

             '}';

         var fragCode = 'precision mediump float;' +

             'varying vec2 vtexCoord;' +

             'uniform sampler2D u_Sampler;' +

             'void main() {' +

             '   gl_FragColor = texture2D(u_Sampler, vtexCoord);' +

             '}';

         var vertShader = gl.createShader(gl.VERTEX_SHADER);

         gl.shaderSource(vertShader, vertCode);

         gl.compileShader(vertShader);

         var fragShader = gl.createShader(gl.FRAGMENT_SHADER);

         gl.shaderSource(fragShader, fragCode);

         gl.compileShader(fragShader);

         var shaderProgram = gl.createProgram();

         gl.attachShader(shaderProgram, vertShader);

         gl.attachShader(shaderProgram, fragShader);

         gl.linkProgram(shaderProgram);

         gl.useProgram(shaderProgram);

         //与缓冲区对象相关联着色器程序

         var bytes = new Float32Array(vertices).BYTES_PER_ELEMENT;// vertices中每个元素的字节数 ,这里是 float 类型, 所以是 4 个字节

         var coord = gl.getAttribLocation(shaderProgram, "coordinates");

         gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, bytes*5, 0);

         gl.enableVertexAttribArray(coord);

         var texCoord = gl.getAttribLocation(shaderProgram, "texCoord");

         gl.vertexAttribPointer(texCoord, 2, gl.FLOAT, false, bytes*5, bytes*3) ;

         gl.enableVertexAttribArray(texCoord);

         //创建纹理对象并调用纹理绘制方法

         var texture = gl.createTexture();//创建纹理对象

         var u_Sampler = gl.getUniformLocation(shaderProgram,"u_Sampler");//获取u_Sampler的存储位置

         var image = new Image();//创建image对象

         image.src = "./timg.jpg";

         image.onload = function () {//加载纹理

             //纹理绘制

             gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);//对纹理图像进行y轴反转

             gl.activeTexture(gl.TEXTURE0);//开启0号纹理单元

             gl.bindTexture(gl.TEXTURE_2D,texture);//向target绑定纹理对象

             gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);//配置纹理参数

             gl.texImage2D(gl.TEXTURE_2D,0,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE,image);//配置纹理图像

             gl.uniform1i(u_Sampler,0);//将0号纹理传递给着色器

             //绘制

             gl.clearColor(0.0,0.0,0.0,1.0);

             gl.clear(gl.COLOR_BUFFER_BIT);

             gl.drawElements(gl.TRIANGLE_STRIP, indices.length, gl.UNSIGNED_SHORT,0);

         };

     }

 </script>

 </html>

WebGl 二维纹理贴图(矩形)的更多相关文章

  1. Unity 用户手册用户指南二维纹理 (Texture 2D)

    http://www.58player.com/blog-2327-953.html 二维纹理 (Texture 2D) 纹理 (Textures) 使您的 网格 (Meshes).粒子 (Parti ...

  2. WebGL学习之纹理贴图

    为了使图形能获得接近于真实物体的材质效果,一般会使用贴图,贴图类型主要包括两种:漫反射贴图和镜面高光贴图.其中漫反射贴图可以同时实现漫反射光和环境光的效果. 实际效果请看demo:纹理贴图 2D纹理 ...

  3. CUDA二维纹理内存+OpenCV图像滤波

    CUDA和OpenCV混合编程,使用CUDA的纹理内存,实现图像的二值化以及滤波功能. #include <cuda_runtime.h> #include <highgui/hig ...

  4. matplotlib---插值画二维、三维图

    一.画二维图 1.原始数据(x,y) import matplotlib.pyplot as plt import numpy as np #数据 X = np.array(list(i for i ...

  5. 【二维莫队】【二维分块】bzoj2639 矩形计算

    <法一>二维莫队,对n和m分别分块后,对块从上到下从左到右依次编号,询问以左上角所在块编号为第一关键字,以右下角标号为第二关键字排序,转移时非常厉害. O(q*n*sqrt(n)). #i ...

  6. Codeforces Round #524 (Div. 2)C 二维坐标系求俩矩形面积交

    题:https://codeforces.com/contest/1080/problem/C 题意:给n*m的二维坐标系,每个位置(xi,yi)都表示一个方格,(1,1)的位置是白色,整个坐标系黑白 ...

  7. 北京地铁换乘算法(二维坐标系，图的深度搜索)开源下载Android源码、性能最优解

    距离2012年11月2日下午2:05:31 已经过去158751270这么多秒了,不小心暴露了我的当前时间. java代码贴出来. private static long gettimelong() ...

  8. 二维纹理 Texture 2D

    Textures bring your Meshes, Particles, and interfaces to life! They are image or movie files that yo ...

  9. uint8与double，二维矩阵显示灰度图

    double型0~1对应uint8型0~255,转换用im2double和im2uint8 如果直接用uint8(double型),则为0~1的uint8型数据,图像全黑. 处理数据过程推荐用doub ...

随机推荐

  1. apk 反编译 - 最新版图文教程

    apk 反编译 - 最新版图文教程 结合网上众多教程,整理一篇自己操作的,工具都是目前最新版 apk 反编译也就是将打包后的 apk 反编译为资源文件(图片).layout.样式.相关的实现代码等.( ...

  2. python 反射 动态导入模块 类attr属性

    1.反射 hasattr getattr delattr setattr 优点:事先定义好接口,接口只有在被完成后才能真正执行,这实现了即插即用,这其实是一种“后期绑定”,即先定义好接口, 然后是再去 ...

  3. Java基础之JSONObject的使用

    private static JSONObject createJSONObject() { JSONObject jsonObject = new JSONObject(); jsonObject. ...

  4. [翻译] DXPopover

    DXPopover A Popover mimic Facebook app popover using UIKit. 使用UIKit框架写了一个类似于Facebook的pop效果的动画. The c ...

  5. 荣禄[róng lù]

    荣禄[róng lù] 百科名片 荣禄 荣禄(1836年4月6日-1903年4月11日)清末大臣,晚清政治家.字仲华,号略园,瓜尔佳氏,满洲正白旗人,出身于世代军官家庭,以荫生晋工部员外郎,后任内务府 ...

  6. metasploit 渗透测试笔记(基础篇)

    0x00 背景 笔记在kali linux(32bit)环境下完成,涵盖了笔者对于metasploit 框架的认识.理解.学习. 这篇为基础篇,并没有太多技巧性的东西,但还是请大家认真看啦. 如果在阅 ...

  7. KVO 的进一步理解

    这篇文章讲述了KVO的深入理解 http://blog.csdn.net/kesalin/article/details/8194240 对kvo有了更深入的理解 如下连接的文章讲述了kvo接口的一些 ...

  8. js实现简单的评论和回复功能（数组版）

    var method={ getDate:function (a,b){ //获取当前日期 //a表示年月日直接的分隔符,b表示时分秒之间的分隔符 var dateStr="", ...

  9. python 中的重要思想

  10. Mac Sublime Text3快捷键

    下载地址http://www.sublimetext.com/3 一.安装Package Control 按Ctrl + ` 调出console,粘贴下列安装代码到底部命令行并回车: import u ...