写在前面

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

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. Win10系统下VirtualBox虚拟机初体验

    在接触本次的VirtualBox之前,我在大一下学期参加李冬冬老师的选修课中学习过VMware,并使用VMware进行过一些计算机病毒之类的实验.但是,使用虚拟机模拟其他不同操作系统这次是第一次,因此 ...

  2. thinkphp查询：

    $Role=D('role'); //查询数据表 $role_data = $Role->order('role_id')->group('role_name')->select() ...

  3. sqlserver2008 数据库

    删除数据库提示: 无法对 数据库'DBName' 执行 删除,因为它正用于复制 之前建立过此数据库的发布订阅,但是后来删掉了发布订阅,也将对应的作业停止了,仍然报这个错,遂用此命令强制删除发布: sp ...

  4. .NET Core中使用RabbitMQ正确方式

    .NET Core中使用RabbitMQ正确方式 首先甩官网:http://www.rabbitmq.com/ 然后是.NET Client链接:http://www.rabbitmq.com/dot ...

  5. C#特性的简单介绍

    特性应该我们大多接触过,比喻经常使用的[Obsolete],[Serializable]等下面我就主要介绍一个特性的一些用法 摘自MSDN定义:用以将元数据或声明信息与代码(程序集.类型.方法.属性等 ...

  6. 牛客小白月赛9H论如何出一道水题（两个连续自然数互质）

    题面 记录一下...连续得两个自然数互质,这题再特判一下1的情况 #include<bits/stdc++.h> using namespace std; int main() { lon ...

  7. mybatis按datetime条件查询，参数为时间戳时

    mybatis按datetime条件查询,参数为时间戳时,如果数据库为2018-1-1 20:22:10, 你的时间戳也为2018-1-1 20:22:10,但却没找到数据.可能是时差导致的.百度修正 ...

  8. PHP精确到毫秒秒杀倒计时实例

    精确到毫秒秒杀倒计时PHP源码实例,前台js活动展示倒计时,后台计算倒计时时间.每0.1秒定时刷新活动倒计时时间. PHP: // 注意:php的时间是以秒算.js的时间以毫秒算 // 设置时区 da ...

  9. 经典教程｜10 分钟速成 Python3

    Python 是由吉多·范罗苏姆(Guido Van Rossum)在 90 年代早期设计. 它是如今最常用的编程语言之一.它的语法简洁且优美,几乎就是可执行的伪代码. 注意:这篇教程是基于 Pyth ...

  10. 修改Config文件

    /// <summary> /// Config文件操作 /// </summary> public class Config { /// <summary> // ...