写在前面

建议先阅读下前面我的三篇文章。

webgl学习笔记一-绘图单点

webgl学习笔记二-绘图多点

webgl学习笔记三-平移旋转缩放

术语 ：

  • 纹理 ：图像
  • 图形装配区域 ：顶点着色器顶点坐标信息
  • 装配图形 ： 片元着色器装配
  • 光栅化 ：显示在屏幕上的三角形是由片元（像素）组成的,所以还需要将图形转化为片元,这个过程被称为光栅化。
  • 纹理图像：映射的这个图像称为纹理图像
  • 纹素 ： 组成纹理图像的像素称为纹素
  • 纹理坐标 ： 是纹理图像上的坐标，通过纹理坐标可以在纹理图像上获取纹素颜色；

纹理绘图流程

  重点介绍纹理的流程。

  • 创建纹理对象
  • 加载纹理图像
  • 配置属性

demo

  • html
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<canvas id="canvas" width="200px" height="200px"></canvas>

</body>

</html>
  • JavaScript
<script>

    window.onload = function () {

        //顶点着色器程序

        var VSHADER_SOURCE =

            "attribute vec4 a_Position;" +

            "attribute vec2 a_TextCoord;" + // 接受纹理坐标

            "varying vec2 v_TexCoord;" +    // 传递纹理坐标

            "void main() {" +

            //设置坐标

            "gl_Position = a_Position; " +  // 设置坐标

            //设置纹素

            "v_TexCoord = a_TextCoord; " +  // 设置纹理坐标

            "} ";

        //片元着色器

        var FSHADER_SOURCE =

            "precision mediump float;" +  //需要声明浮点数精度，否则报错No precision specified for (float)

            "uniform sampler2D u_Sampler;" + // 取样器

            "varying vec2 v_TexCoord;" +  // 接受纹理坐标

            "void main() {" +

            //设置颜色

            "gl_FragColor = texture2D(u_Sampler, v_TexCoord);" +  // 设置颜色

            "}";

        //获取canvas元素

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

        //获取绘制webgl绘图上下文

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

        if (!gl) {

            console.log("Failed");

            return;

        }

        //编译着色器

//        （1）创建Shader（着色器）对象

//        （2）将着色器程序附加到Shader上

//        （3）编译程序

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

        gl.shaderSource(vertShader, VSHADER_SOURCE);

        gl.compileShader(vertShader);

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

        gl.shaderSource(fragShader, FSHADER_SOURCE);

        gl.compileShader(fragShader);

        //合并程序

//        （1）创建一个程序对象

//        （2）附加着色器

//        （3）链接着色器

//        （4）使用程序

        var shaderProgram = gl.createProgram();

        gl.attachShader(shaderProgram, vertShader);

        gl.attachShader(shaderProgram, fragShader);

        gl.linkProgram(shaderProgram);

        gl.useProgram(shaderProgram);

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

        var n = initBuffers(gl, shaderProgram);

        initTexture(gl, shaderProgram, n);

        gl.clear(gl.COLOR_BUFFER_BIT);

        //绘制一个点

        gl.drawArrays(gl.POINTS, 0, 1);

    }

    // 使用缓冲区对象向顶点传入多个顶点数据

    function initBuffers(gl, shaderProgram) {

        //顶点坐标和颜色

        var vertices = new Float32Array([

            -0.5, 0.5, 0.0, 1.0,

            -0.5, -0.5, 0.0, 0.0,

            0.5, 0.5, 1.0, 1.0,

            0.5, -0.5, 1.0, 0.0

        ]);

        var n = 4;//点的个数

        //创建缓冲区对象

        var vertexBuffer = gl.createBuffer();

        //将缓冲区对象绑定到目标

        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

        //向缓冲区写入数据

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

        var FSIZE = vertices.BYTES_PER_ELEMENT;

        //获取坐标点

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

        //将缓冲区对象分配给a_Position变量

        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 4, 0);

        //连接a_Position变量与分配给它的缓冲区对象

        gl.enableVertexAttribArray(a_Position);

        //获取Color坐标点

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

        //将缓冲区对象分配给a_Position变量

        gl.vertexAttribPointer(a_TextCoord, 2, gl.FLOAT, false, FSIZE * 4, FSIZE * 2);

        //连接a_Position变量与分配给它的缓冲区对象

        gl.enableVertexAttribArray(a_TextCoord);

        return n;

    }

    // 初始创建纹理，创建image对象

    function initTexture(gl, shaderProgram, n) {

        //创建纹理对象

        var texture = gl.createTexture();

        //获取u_Sampler的存储位置

        var u_Sampler = gl.getUniformLocation(shaderProgram, 'u_Sampler');

        //创建image对象

        var image = new Image();

        //加载纹理

        image.onload = function () {

            loadTexture(gl, n, texture, u_Sampler, image);

        };

        // 浏览器开始加载图片 注意：一定是2^mx2^n尺寸的图片

        image.src = "../../resources/st2_256*128.png";

        return true;

    }

    // 加载纹理图像，配置属性

    function loadTexture(gl, n, texture, u_Sampler, image) {

        //1.对纹理图像进行Y轴反转

        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);

        //2.开启0号纹理单元

        gl.activeTexture(gl.TEXTURE0);

        //3.向target绑定纹理对象

        gl.bindTexture(gl.TEXTURE_2D, texture);

        //4.配置纹理参数

        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

        //5.配置纹理图像

        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);

        //6.将0号纹理图像传递给着色器

        gl.uniform1i(u_Sampler, 0);

        // 清空 <canvas>

        gl.clear(gl.COLOR_BUFFER_BIT);

        //绘制矩形

        gl.drawArrays(gl.TRIANGLE_STRIP, 0, n);

    }

</script>

webgl学习笔记五-纹理的更多相关文章

  1. WebGL学习笔记五

    本章主要是对纹理的进一步讲解,我们很多时候需要将现实中已有 的图片在网页中展示出来而不是去创造图片,通过纹理 我们可以将光栅化的图形和图片纹理形成映射并且将图片在图形 中显示出来.基本过程与前几章一致 ...

  2. C#可扩展编程之MEF学习笔记(五)：MEF高级进阶

    好久没有写博客了,今天抽空继续写MEF系列的文章.有园友提出这种系列的文章要做个目录,看起来方便,所以就抽空做了一个,放到每篇文章的最后. 前面四篇讲了MEF的基础知识,学完了前四篇,MEF中比较常用 ...

  3. （转）Qt Model/View 学习笔记 (五)——View 类

    Qt Model/View 学习笔记 (五) View 类 概念 在model/view架构中,view从model中获得数据项然后显示给用户.数据显示的方式不必与model提供的表示方式相同,可以与 ...

  4. java之jvm学习笔记五(实践写自己的类装载器)

    java之jvm学习笔记五(实践写自己的类装载器) 课程源码:http://download.csdn.net/detail/yfqnihao/4866501 前面第三和第四节我们一直在强调一句话,类 ...

  5. Learning ROS for Robotics Programming Second Edition学习笔记(五) indigo computer vision

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...

  6. Typescript 学习笔记五：类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  7. ES6学习笔记<五> Module的操作——import、export、as

    import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...

  8. muduo网络库学习笔记(五) 链接器Connector与监听器Acceptor

    目录 muduo网络库学习笔记(五) 链接器Connector与监听器Acceptor Connector 系统函数connect 处理非阻塞connect的步骤: Connetor时序图 Accep ...

  9. python3.4学习笔记(五) IDLE显示行号问题，插件安装和其他开发工具介绍

    python3.4学习笔记(五) IDLE显示行号问题,插件安装和其他开发工具介绍 IDLE默认不能显示行号,使用ALT+G 跳到对应行号,在右下角有显示光标所在行.列.pycharm免费社区版.Su ...

随机推荐

  1. 20155308 2016-2017-2 《Java程序设计》实验二 Java面向对象程序设计

    20155308 2016-2017-2 <Java程序设计>实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UM ...

  2. 2017-2018-1 20155321《信息安全技术》实验二——Windows口令破解

    2017-2018-1 20155321<信息安全技术>实验二--Windows口令破解 实验原理 口令破解方法 口令破解主要有两种方法:字典破解和暴力破解. 字典破解是指通过破解者对管理 ...

  3. tableView--iOS11适配和iPhoneX适配

    1.UIScrollView及其子类在IOS 11之前的版本UI显示完全正常,但是在IOS 11上面会显示奇葩的界面. (1)先看一下UITablevIew. 原本在VC里面的automaticall ...

  4. OpenStack入门篇（二）之OpenStack架构

    1.OpenStack 架构 中间菱形是虚拟机,围绕 VM 的那些长方形代表 OpenStack 不同的模块(OpenStack 叫服务,后面都用服务这个术语),下面来分别介绍. Nova:管理 VM ...

  5. Retinex图像增强和暗通道去雾的关系及其在hdr色调恢复上的应用

    很多人都认为retinex和暗通道去雾是八杆子都打不着的增强算法.的确,二者的理论.计算方法都完全迥异,本人直接从二者的公式入手来简单说明一下,有些部分全凭臆想,不对之处大家一起讨论. 首先,为描述方 ...

  6. Drupal7重置密码方法

    Drupal版本 7.40 方法1: 根目录index.php添加 require_once 'includes/password.inc'; require_once 'includes/boots ...

  7. linux挂在samba服务器到本地（用于备份文件到nas或者windows的文件服务器）

    1.安装工具 首先在linux上安装samba访问工具 sudo apt-get install smbclient sudo apt-get install cifs-utils 2.查看服务器目录 ...

  8. 【转】linux下，如何把整个文件夹上传到服务器（另一台linux）

    原文转自:https://zhidao.baidu.com/question/1046040541327493019.html 1.Linux下目录复制:本机->远程服务器 scp  -r /h ...

  9. 文件批量加密重命名--python脚本AND mysql命令行导入数据库

    在考试中学生交上来的报告,需要进行一下文件名加密,这样阅卷老师就不知道是谁的报告了 在百度帮助下,完成了加密和解密脚本, 加密 #!/usr/bin/python # -*- coding: utf- ...

  10. java获取IP地址

    最近在一个多系统集成的项目中,由于跳转路径含IP地址,每次IP改了重启项目都得改好多地方,甚是麻烦.刚在网上了解到java获取IP地址,给大家分享下: 首先要导入jar包 request.getRem ...