效果：

代码：

 <!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. ZABBIX 2.1.0 发布，分布式系统监控

    ZABBIX 2.1.0 发布了,这相当是 ZABBIX 2.2 的首个 Alpha 版本,包括了新的主要的功能和改进. 主要包括如下几个方面的提升: 性能提升 可加载模块 移除对未知事件的支持 应用 ...

  2. 转移RMS模拟器

    在PowerShell中识别当前 RMS 模拟器 get-SCOMRMSemulator ?移至另一个管理服务器 –首先将一个新的RMS模拟器管理指定为一个变量 $MS = get-scommanag ...

  3. Skype for Business 安装组件RewriteModule失败

    最近QQ网友提到部署Skype for Business,安装组件时提示安装必备组件失败:RewriteModule,如下图,安装文件名是rewrite_2.0_rtw_x64.msi,尝试手动安装也 ...

  4. Visual Studio Code （vscode）编译C++

    Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮.智能代码补全.自定义热键.括号匹配.代码片段. ...

  5. Web Service超限

    问题现状: {System.ServiceModel.CommunicationException: An error occurred while receiving the HTTP respon ...

  6. December 08th 2016 Week 50th Thursday

    Life is a test and this world a place of trial. 人生是一场考试,这个世界就是考场. I have not passed the test yet. I ...

  7. December 05th 2016 Week 50th Monday

    Today is my birthday and I have totally refreshed. Knowing yourself is the beginning of all wisdom. ...

  8. LINUX下OA搭建

  9. Chapter 4 Left Outer Join in MapReduce

    4.1 Introdution Consider a company such as Amazon, which has over 200 millions of users and possibly ...

  10. MS10-070 ASP.NET Padding Oracle信息泄露漏洞项目测试

    MS10-070 ASP.NET Padding Oracle信息泄露漏洞1         漏洞描述:ASP.NET由于加密填充验证过程中处理错误不当,导致存在一个信息披露漏洞.成功利用此漏洞的攻击 ...