• webGL编程指南 第五章 MultiTexture.html

    我会持续更新关于wegl的编程指南中的代码。

    当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助

    git代码地址 ：空

    上一章节中我们学习texParameteri的使用,这一章节中我们两个图片进行混合

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport">
    8.     <title>Documenttitle>
    9.     <style>
    10.         #canvas {
    11.             width: 100vw;
    12.             height: 100vw;
    13.             border: 1px solid greenyellow;
    14.         }
    15.     style>
    16. head>
    17.  
    18. <body>
    19.     !!!!!需要指出的是要选择当前文件夹下的sky.jpg!!!!!!
    20.     
    21.     <input type="file" onchange="loadFile(event)">
    22.     <canvas id="canvas">canvas>
    23.     <script>
    24.         let imgSrc = 'https://p2.music.126.net/UrFqYFILx5wBDx-dsIz15A==/109951163025047288.jpg?param=256y256';
    25.         let jpgImgSrc = 'https://p1.music.126.net/LOTxqRjFm03VJEOHJbUqMw==/109951165944804127.jpg?param=256y256';
    26.         // let jpgImgSrc = 'https://img-blog.csdnimg.cn/361654c6611d49bebab085509bd6a244.jpeg';
    27.         // let gifImagSrc = 'https://img-blog.csdnimg.cn/04f072cdb3934051a505a54a4d6f46ed.gif';
    28.         let vexterSource = `
    29.         precision mediump float;
    30.         attribute vec4 a_Position;
    31.         attribute vec2 a_TexCoord;
    32.         varying   vec2 v_TexCoord;
    33.         void main(){
    34.             gl_Position = a_Position;//顶点坐标
    35.             v_TexCoord = a_TexCoord;//纹理坐标系下的坐标
    36.         }
    37.     `
    38.         let fragmentSource = `
    39.             precision mediump float;
    40.             uniform sampler2D u_Sampler0;//纹理
    41.             uniform sampler2D u_Sampler1;//纹理
    42.             varying vec2      v_TexCoord;//纹理坐标系下的坐标
    43.             void main(){
    44.                 vec4 color0 = texture2D(u_Sampler0,v_TexCoord);
    45.                 vec4 color1 = texture2D(u_Sampler1,v_TexCoord);
    47.                 gl_FragColor = color0 * color1; 
    48.             }
    49.         ` 
    50.         let canvas = document.getElementById('canvas');
    51.         let gl = canvas.getContext('webgl');
    52.  
    53.         //创建顶点着色器
    54.         let vertextShader = gl.createShader(gl.VERTEX_SHADER);
    55.         //给顶点着色器赋值
    56.         gl.shaderSource(vertextShader, vexterSource);
    57.         //编译顶点着色器
    58.         gl.compileShader(vertextShader);
    59.  
    60.         //创建片元着色器
    61.         let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    62.         //给片元着色器赋值
    63.         gl.shaderSource(fragmentShader, fragmentSource)
    64.         //编译片元着色器
    65.         gl.compileShader(fragmentShader)
    66.         //检测着色器创建是否正确
    67.         if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
    68.             alert(gl.getShaderInfoLog(fragmentShader));
    69.         }
    70.         //创建程序
    71.         let program = gl.createProgram();
    72.         //给程序赋值
    73.         gl.attachShader(program, vertextShader);
    74.         gl.attachShader(program, fragmentShader);
    75.         //连接程序
    76.         gl.linkProgram(program);
    77.         //使用此着色器
    78.         gl.useProgram(program);
    79.  
    80.  
    81.         //变量的处理
    82.         //获取顶点着色器中的变量a_Position
    83.         let a_Position = gl.getAttribLocation(program, 'a_Position');
    84.         //获取顶点着色器中的变量a_TexCoord
    85.         let a_TexCoord = gl.getAttribLocation(program, 'a_TexCoord');
    86.         //获取片元着色器中的变量u_Sampler
    87.         let u_Sampler0 = gl.getUniformLocation(program, 'u_Sampler0');
    88.         //获取片元着色器中的变量u_Sampler
    89.         let u_Sampler1 = gl.getUniformLocation(program, 'u_Sampler1');
    90.         //顶点坐标与纹理坐标
    91.         let vertexTexCoords = new Float32Array([
    92.             -0.5, 0.5, 0.0, 1.0,
    93.             -0.5, -0.5, 0.0, 0.0,
    94.             0.5, 0.5, 1.0, 1.0,
    95.             0.5, -0.5, 1.0, 0.0,
    96.         ])
    97.         let f32Seize = vertexTexCoords.BYTES_PER_ELEMENT;
    98.         //给定点设置坐标 几何图形与纹理的坐标
    99.         let vertexBuffer = gl.createBuffer();
    100.         //绑定buffer
    101.         gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    102.         //绑定数据
    103.         gl.bufferData(gl.ARRAY_BUFFER, vertexTexCoords, gl.STATIC_DRAW);
    104.         //给a_Position赋值
    105.         gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, f32Seize * 4, 0);
    106.         //使用此变量
    107.         gl.enableVertexAttribArray(a_Position);
    108.         //纹理坐标
    109.         let texCoordBuffer = gl.createBuffer();
    110.         //绑定buffer
    111.         gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
    112.         //绑定数据
    113.         gl.bufferData(gl.ARRAY_BUFFER, vertexTexCoords, gl.STATIC_DRAW);
    114.         //给a_TexCoord赋值
    115.         gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, f32Seize * 4, f32Seize * 2);
    116.         //使用此变量
    117.         gl.enableVertexAttribArray(a_TexCoord);
    118.  
    119.         gl.clearColor(0, 0, 0, 1.0);
    120.         //获取图片的素材  
    121.         getImage(imgSrc, u_Sampler1, gl.TEXTURE0, 0);
    122.         getImage(jpgImgSrc, u_Sampler1, gl.TEXTURE1, 1);
    123.         function getImage(imgYrl, u_Sampler, TEXTURE, num) {
    124.             // 文件里的文本会在这里被打印出来 
    125.             let img = new Image();
    126.             img.src = imgYrl;
    127.             img.crossOrigin = ""
    128.             img.onload = () => {
    129.                 let texture = gl.createTexture();
    130.                 showImage(texture, img, u_Sampler, TEXTURE, num)
    131.                 document.body.appendChild(img)
    132.             }
    133.         }
    134.         function showImage(texture, img, u_Sampler, TEXTURE, texUnit) {
    135.             console.log(texture, img, u_Sampler, TEXTURE, texUnit)
    136.             document.body.appendChild(img)
    137.             gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
    138.             //开始0号纹理通道
    139.             gl.activeTexture(TEXTURE); 
    140.              //想目标绑定纹理对象
    141.              gl.bindTexture(gl.TEXTURE_2D, texture);
    142.             //配置纹理的参数
    143.             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    144.             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    145.             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);
    146.             //设置着色器参数
    147.             gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img);
    148.             //设置纹理数据
    149.             gl.uniform1i(u_Sampler, texUnit)
    150.             gl.clear(gl.COLOR_BUFFER_BIT);
    151.             gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
    152.         }
    153.     script>
    154. body>
    155.  
    156. html>

  • 相关阅读:
    正则表达式相关知识点
    图解 Google V8 # 17：消息队列：V8是怎么实现回调函数的？
    基于Springboot+Mybatis+mysql+vue宠物领养网站1.0
    流水线作业模拟程序
    Java核心技术卷Ⅰ-第一章Java程序设计概述
    HTML5生日快乐在线网页祝福 (一场浪漫的烟花秀) HTML+CSS+JavaScript
    自学unity，该不该阻止？
    JavaScript云LIS系统概述 前端框架JQuery+EasyUI+Bootstrap医院云HIS系统源码 开箱即用
    项目管理：项目经理如何进行管理？
    学习vue一些小记
  • 原文地址：https://blog.csdn.net/huhudeni/article/details/134315763