您的位置: 首页  >  文章  >  多重纹理

多重纹理

分类: 文章 • 2023-03-05 18:04:21

<html>
<head>11</head>
<body>
<canvas id = "test" width = "500" height = "500">canvas </canvas>
<script >
//顶点着色器
var vertexShaderSource =
    'attribute vec4 a_Position;\n' +
    'attribute vec2 a_TexCoord;\n' +
    'varying vec2 v_TexCoord;\n' +     //varying变量
    'void main() {\n' +
    'gl_Position = a_Position;\n'+  //设置坐标
    'v_TexCoord = a_TexCoord;\n' + //将数据传给片元着色器
    '}\n';

//片元着色器
var fragmentShaderSource =
    '#ifdef GL_ES\n' +
    'precision mediump float;\n' +
    '#endif\n' +
    'uniform sampler2D u_Sampler0;\n'+
    'uniform sampler2D u_Sampler1;\n'+
    'varying vec2 v_TexCoord;\n' +     //varying变量
    'void main() {\n' +
    'vec4 color0 = texture2D(u_Sampler0, v_TexCoord);\n'+ //设置颜色
    'vec4 color1 = texture2D(u_Sampler1, v_TexCoord);\n'+ //设置颜色
    'gl_FragColor = color0 * color1;\n'+ //设置颜色
    '}\n';

//创建着色器方法，输入参数：渲染上下文，着色器类型，数据源
function createShader(gl, type, source)
{
    //创建着色器对象
    var shader = gl.createShader(type);
    //提供数据源
    gl.shaderSource(shader,source);
    //编译着色器
    gl.compileShader(shader);
    //链接
    var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
    if(success)
    {
        return shader;
    }
    console.log(gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
    
}
//将顶点着色器和像素着色器链接到一个着色程序
function createProgram(gl, vertexShader, fragmentShader)
{
    var program = gl.createProgram();
    gl.attachShader( program, vertexShader);
    gl.attachShader( program, fragmentShader);
    gl.linkProgram( program );
    var success = gl.getProgramParameter(program, gl.LINK_STATUS);
    if(success)
    {
        console.log("link right");
        return program;
    }
    console.log(gl.getProgramInfoLog(program));
    gl.deleteProgram(program);
}

function initVertexBuffers(gl)
{
     //顶点和纹理坐标
    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 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 thePosition = gl.getAttribLocation(program, 'a_Position');
    //将缓冲区对象分配给位置变量
    gl.vertexAttribPointer(thePosition, 2, gl.FLOAT, false, FSIZE * 4, 0 );
    //启动缓冲区
    gl.enableVertexAttribArray(thePosition);
    //纹理坐标
    var theTexCoord = gl.getAttribLocation(program, 'a_TexCoord');   
    gl.vertexAttribPointer(theTexCoord, 2, gl.FLOAT, false, FSIZE * 4, FSIZE * 2 );    
    gl.enableVertexAttribArray(theTexCoord);
}
     
//标记纹理单元是否已经就绪
var g_texUnit0 = false;
var g_texUnit1 = false;
function loadTexture(gl, n, texture, u_Sampler, image, texUnit)
{
    //对纹理图像进行y轴翻转
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);
    //开启纹理单元
    if( 0 == texUnit)
    {    
        gl.activeTexture(gl.TEXTURE0);
        g_texUnit0 = true;
    }        
    else
    {
        gl.activeTexture(gl.TEXTURE1);
        g_texUnit1 = true;        
    }
    //向target绑定纹理对象
    gl.bindTexture(gl.TEXTURE_2D, texture);
    //配置纹理参数
    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);
    //将0号纹理传递给着色器
    gl.uniform1i(u_Sampler, texUnit );
    //绘制阶段   
    gl.clear(gl.COLOR_BUFFER_BIT);

    //绘制矩形
    if(g_texUnit0 && g_texUnit1)
    {
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, n);
    }

}

function initTextures(gl,n)
{    
     //创建纹理对象
    var texture0 = gl.createTexture();
    var texture1 = gl.createTexture();

    //获取u_Sampler的存储位置
    var u_Sampler0 = gl.getUniformLocation(program,'u_Sampler0');
    var u_Sampler1 = gl.getUniformLocation(program,'u_Sampler1');
    //创建一个image对象
    var image0 = new Image();
    var image1 = new Image();
    //注册图像加载事件的响应函数
    image0.onload = function()
    {
        loadTexture(gl, n, texture0, u_Sampler0, image0, 0);
    }
    image1.onload = function()
    {
        loadTexture(gl, n, texture1, u_Sampler1, image1, 1);
    }
    image0.src = 'http://localhost:8080/apps/resources/redflower.jpg';
    image1.src = 'http://localhost:8080/apps/resources/circle.gif';
    return true;
}
  var canvas = document.getElementById("test");
    //创建webgl渲染上下文
    var gl = canvas.getContext("webgl");
    if(!gl)
    {
        console.log("wrong");
    }
    else
    {
        console.log("right");
    }
    //初始化着色器

    var vertexShader = createShader(gl,gl.VERTEX_SHADER,vertexShaderSource);
    var fragmentShader = createShader(gl,gl.FRAGMENT_SHADER, fragmentShaderSource);
    
    var program = createProgram(gl, vertexShader, fragmentShader);
    gl.useProgram(program);
    
    var numberVertices = 4;    
    initVertexBuffers(gl);
 //清除颜色
    gl.clearColor(0.0,0.0,0.0,1.0);
    initTextures(gl,numberVertices);
 
 
</script>
</body>
</html>

多重纹理

相关推荐