创建纹理贴图

作者: antlove | 来源:发表于2020-11-14 21:28 被阅读0次

创建纹理贴图
贴图
天空盒
Agisoft PhotoScan-相关应用-使用xNormal
008-基础纹理下篇
09-OpenGL 纹理基础(下) - Mip贴图
OpenGL ES for Android （立方体贴图）
2022-10-14 天空盒
七.OpenGL Mip贴图压缩
Shader操作uv实现岩浆和河流效果

index.html

<html>

<head>
  <meta lang="en">
  <meta charset="UTF-8">
  <title>纹理图片</title>
      <script src="../lib/cuon-utils.js"></script>
      <script src="../lib/webgl-utils.js"></script>
      <script src="../lib/webgl-debug.js"></script>
      <script src="../lib/cuon-matrix.js"></script>
  <style>
      body{
          margin:0;
      }
      canvas{
          display:block;
          border:1px solid #999;
      }
      .btn-group {
          width: 500px;
          text-align: center;
          padding: 10px 0;
      }
  </style>
</head>

<body>
  <canvas id="canvas" width="400" height="400"></canvas>
</body>

<script src="./index.js"></script>

index.js

// 顶点着色器程序
var VSHADER_SOURCE =`
    attribute vec4 a_Position;
    attribute vec2 a_TexCoord;
    varying vec2 v_TexCoord;
    void main() {
        //设置坐标
        gl_Position = a_Position; 
        v_TexCoord = a_TexCoord;
    } 
`;

// 片元着色器
var FSHADER_SOURCE =`
    #ifdef GL_ES
    precision mediump float;
    #endif
    uniform sampler2D u_Sampler;
    varying vec2 v_TexCoord;
    void main() {
        //设置颜色
        gl_FragColor = texture2D(u_Sampler, v_TexCoord);
    }
`;

// 获取canvas元素
var canvas = document.getElementById('canvas');

// 获取绘制二维上下文
var gl = canvas.getContext('webgl');

gl.clearColor(0, 0, 0, 1);

// 初始化shader
initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE);

// 初始化顶点
var n = initVertexBuffer(gl);

function draw(gl, n) { 
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.POINTS, 0, n );
}

/**
 * 初始化顶点
 */
function initVertexBuffer(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 size = 2;
    var FSIZE = Float32Array.BYTES_PER_ELEMENT;

    /* 创建缓冲区 */
    var vertexTexCoordBuffer = gl.createBuffer();
    // 将缓冲区绑定到目标
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer);
    // 向缓冲区写入数据
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    /* 设置顶点 */
    var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
    // 将缓冲区对象分配给a_Position
    gl.vertexAttribPointer(a_Position, size, gl.FLOAT, false, FSIZE * 4, 0);
    // 激活attibue 是缓冲区对attribute变量分配生效
    gl.enableVertexAttribArray(a_Position);

    /* 设置纹理坐标 */
    var a_TexCoord = gl.getAttribLocation(gl.program, 'a_TexCoord');
    // 将缓冲区对象分配给a_Position
    gl.vertexAttribPointer(a_TexCoord, size, gl.FLOAT, false, FSIZE * 4, FSIZE * 2);
    // 激活attibue 是缓冲区对attribute变量分配生效
    gl.enableVertexAttribArray(a_TexCoord);

    return vertices.byteLength /  FSIZE / 4;
}

function initTextures(gl, n) {
    var texture = gl.createTexture();
    var u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler');
    var image = new Image();
    image.onload = function () { 
        loadTexture(gl, n,texture, u_Sampler, image);
    };
    image.src = './x.jpg';
}

function loadTexture(gl, n, texture, u_Sampler, image) { 
    // 将纹理图像进行y轴反转
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
    // 开启0号纹理单元
    gl.activeTexture(gl.TEXTURE0);
    // 绑定纹理对象
    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, 0);

    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, n);
}

initTextures(gl, n);

x.jpg