效果：

代码：

 <!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. MAC电脑安装svn客户端cornerstone

    个人感觉在mac上最好用的svn客户端就是cornerstone,公司客户端也统一使用这个 sudo spctl --master-disable 这条命令作用就是使得mac运行安装任何来源App,不 ...

  2. 2.bootstrap安装

    1.下载 您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本(或者 http://www.bootcss.com/  中文网) Download Boo ...

  3. axure rp8.1 注册码

    授权人:University of Science and Technology of China (CLASSROOM)授权密钥:DTXRAnPn1P65Rt0xB4eTQ+4bF5IUF0gu0X ...

  4. js中问号

    是三目运算,如:(a==b)?a:b 也就是说,先判断a是否等于b,如果是(true),那么返回a,如果否(false),则返回b greeting=(visitor=="PRES" ...

  5. Python实例---游戏人生[类的学习]

    # -*- coding:utf-8 -*- # ##################### 定义实现功能的类 ##################### class Person: def __in ...

  6. 性状、生成器、闭包、OPcache【Modern PHP】

    目录 性状 Trait 生成器 闭包 Zend OPcache PHP发展这么多年,技术.架构都已经革新,了解现代PHP很重要,最近在看Model PHP这本书,系统的了解下PHP相关的概念. 性状 ...

  7. ZT C/C++变量命名规则，个人习惯总结

    C/C++变量命名规则,个人习惯总结 (2012-10-31 13:48:10) 转载▼ 标签: c/c变量命名规则 c语言变量命名 c变量命名 规则规范 it 分类: C/VC C_C++变量命名规 ...

  8. [BZOJ 1972][Sdoi2010]猪国杀

    1972: [Sdoi2010]猪国杀 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 364  Solved: 204[Submit][Status][D ...

  9. memcached源码剖析4：并发模型

    memcached是一个典型的单进程系统.虽然是单进程,但是memcached内部通过多线程实现了master-worker模型,这也是服务端最常见的一种并发模型.实际上,除了master线程和wor ...

  10. BZOJ3997:[TJOI2015]组合数学(DP,Dilworth定理)

    Description 给出一个网格图,其中某些格子有财宝,每次从左上角出发,只能向下或右走.问至少走多少次才能将财宝捡完.此对此问题变形,假设每个格子中有好多财宝,而每一次经过一个格子至多只能捡走一 ...