写在前面

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

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. ubuntu下tensorflow安装

    1,安装驱动,cuda,cudnn,参考本人上一篇博客http://www.cnblogs.com/zxg-DL/p/9023601.html 2,安装tensorflow   接下来是关于Tenso ...

  2. VIM - 标准模式下简单操作

    1. 概述 标准模式下, 简单操作 移动 删除 复制粘贴 收益 熟练后, 编辑文本基本不需要鼠标操作了 思路 只讲最基本的, 避免初学时的混淆 把基本操作归类了, 方便理解 2. 准备 一篇篇幅较长的 ...

  3. # 20155224 实验三 敏捷开发与XP实践 实验报告

    20155224 实验三 敏捷开发与XP实践 实验报告 实验内容 XP基础 XP核心实践 相关工具 实验要求 没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim ...

  4. 20155327 信息安全技术 实验二 Windows口令破解

    课程:信息安全概论 班级:1553 姓名:了李百乾 学号:20155327 成绩: 指导教师: 李冬冬 实验日期及时间: 2017年10月11日 15:30-18:00 必修/选修:必修 实验序号:0 ...

  5. Yii2 使用 bootboxJS美化confirm窗口

    有些关键操作比如删除,我们在执行前一般先弹出来个confirm确认窗口. 在Yii2中为一个操作添加confirm确认很容易.只需在链接出添加一个‘data-confirm' => '确实要添加 ...

  6. datax 执行流程分析

    https://www.jianshu.com/nb/29319571 https://www.jianshu.com/p/b10fbdee7e56

  7. Ubuntu常用shell命令

    目录 ls cd mkdir mv cp scp rm df du chmod chown chgrp head tail screen apt-get Ubuntu常用shell命令 Ubuntu作 ...

  8. phpcms v9手机站不支持组图（$pictureurls）的修改

    phpcms v9自带的手机门户网站,有时候我们需要用到组图功能$pictureurls,我在做的时候发现,如果$pictureurls中只有一张图片会正常显示,但是如果有两张或两张以上的图片的时候, ...

  9. 特征点检测--基于CNN：TILDE: A Temporally Invariant Learned DEtector

    TILDE: A Temporally Invariant Learned DEtector Yannick Verdie1,∗ Kwang Moo Yi1,∗ Pascal Fua1 Vincent ...

  10. 论文笔记：Visual Object Tracking based on Adaptive Siamese and Motion Estimation Network

    Visual Object Tracking based on Adaptive Siamese and Motion Estimation 本文提出一种利用上一帧目标位置坐标,在本帧中找出目标可能出 ...