效果：

代码：

 <!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. 客户端和服务端如何使用Token和Session

    一.我们先解释一下他的含义:    1.Token的引入:Token是在客户端频繁向服务端请求数据,服务端频繁的去数据库查询用户名和密码并进行对比,判断用户名和密码正确与否,并作出相应提示,在这样的背 ...

  2. JDK1.7环境

    官方下载页面: http://www.oracle.com/technetwork/java/javase/downloads/java-archive-downloads-javase7-52126 ...

  3. CentOS随笔 - 修改CentOS7的IP

    前言 转帖请注明出处: http://www.cnblogs.com/Troy-Lv5/ 在使用CentOS时经常我们需要固定一个IP, 因为服务器嘛,不固定IP. 难道每次都要配置开发环境的地址.? ...

  4. course & time

  5. 【SQL server 2012】复制数据库到另一台机器上

    当需要将一台机器(源机器)上的一个数据库完全复制到另一台机器(目标机器)上时,可以选择先在源机器上备份该数据库,然后在目标机器上还原该备份的方法. 下面详细描述具体步骤: 1. 打开SQL serve ...

  6. maven dependendency

    登录|注册     zhengsj的专栏       目录视图 摘要视图 订阅 [公告]博客系统优化升级     [收藏]Html5 精品资源汇集     博乐招募开始啦       Maven De ...

  7. Linux 下Shell的学习3-优秀demo

    优秀的DEMO cat /etc/init.d/functions   -->里面有颜色定义cat /etc/rc.d/rc.sysinit cat /etc/init.d/nfscat /et ...

  8. [零基础学JAVA]Java SE面向对象部分.面向对象基础（04）

     2.代码块 1.内部类 3.链表 2.代码块: 1.) 普通代码块. 2.)静态代码块. 3.)构造代码块. 4.)同步代码块. class Test{//构造块    {        Syste ...

  9. Jarsigner签名使用

    转载请标明出处: http://www.cnblogs.com/why168888/p/6548544.html 本文出自:[Edwin博客园] 如何签名: jarsgner-verbose-keys ...

  10. redis缓存机制【转载】

    转载自:http://blog.csdn.net/acmman/article/details/53434134 redis的主从模式(1)介绍redis存储数据是在内存中运行的,运行速度比关系型数据 ...