效果：

代码：

 <!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. 上海ctf2017 pwn100 && pwn200

    前言 分析的 idb 文件在这: https://gitee.com/hac425/blog_data/tree/master/shanghaictf pwn100 程序是一个经典的 堆管理程序,基本 ...

  2. Redis的基本操作语句

    注:以下出现的key.value都需要具体 1.String类型的数据存储获取 set key value:设置key的值为value,若存在则覆盖,不存在则自动创建decrby get key:获取 ...

  3. 线性表接口的实现_Java

    线性表是其组成元素间具有线性关系的一种线性结构,对线性表的基本操作主要有插入.删除.查找.替换等,这些操作可以在线性表的任何位置进行.线性表可以采用顺序存储结构和链式存储结构表示. 本接口的类属于da ...

  4. vuex（数据商店实现思想）day06

    安装创建Vue项目

  5. centors7 elasticsearch6.3安装以及问题记录

    1.安装elasticsearch . 安装系统:centors7 1.下载安装包 官网地址:https://www.elastic.co/downloads/past-releases 2.mac文 ...

  6. Django基础之form操作

    Form表单的功能 自动生成HTML表单元素 检查表单数据的合法性 如果验证错误,重新显示表单(数据不会重置) 数据类型转换(字符类型的数据转换成相应的Python类型) Form相关的对象包括 Wi ...

  7. CentOS随笔 - 6.CentOS7安装Git服务器

    前言 转帖请注明出处: http://www.cnblogs.com/Troy-Lv5/ 版本管理当然是选择git..反正我是被svn坑怕了... 这次安装的是git 2.18.0 点击下载 准备安装 ...

  8. Python学习---django之Model语法180124

    django之Model语法[Models] 1    django默认支持sqlite,mysql, oracle,postgresql数据库. <1> sqlite django默认使 ...

  9. Bearer Token的加密解密规则（OAuth中间件）

    在OAuthBearerAuthenticationMiddleware中使用Microsoft.Owin.Security.DataHandler. SecureDataFormat<TDat ...

  10. 延期年金（deferred annuity）

    含义:推迟m个时期后才开始付款的年金. 延期年金现值为 二.永续年金(Perpetuity) 永续年金:无限期支付下去的年金. 为期末付永续年金(perpetuity-immediate)的现值 表示 ...