Question

我尝试根据this回答做到这一点。这是我的代码：

<canvas id='canvas' width='500' height='500' style='border: solid 1px black'></canvas>

<script>
       var canvas = document.getElementById("canvas");
       var gl = canvas.getContext("webgl");
       var texture = gl.createTexture();
       var data = new Uint8Array([128, 128, 0, 1]);
       var texture = gl.createTexture();
       gl.bindTexture(gl.TEXTURE_2D, texture);
       gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
       gl.bindTexture(gl.TEXTURE_2D, texture);
</script>

但我只能看到一个黑色轮廓的白色盒子。我做错了什么？

谢谢！

Answer 1

你在那里的代码只是创建一个纹理并将其加载到GPU内存中。所以你实际上并没有在画布上画任何东西。

要在屏幕上获得该纹理，您还需要做更多的事情。这是您的代码，其余的已添加：

＆＃13;

// helper function for loading shader sources
function loadShaderSource(gl, id) {
  var script = document.getElementById(id);
  var source = "";

  var child = script.firstChild;
  while (child) {
    if (child.nodeType == child.TEXT_NODE) {
      source += child.textContent;
    }

    child = child.nextSibling;
  }

  return source;
}

// setup an OpenGL context
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");

// build the vertex shader
var vertexShaderSource = loadShaderSource(gl, "shader-vertex");
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

// build the fragment shader
var fragmentShaderSource = loadShaderSource(gl, "shader-fragment");
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// build a shader program from the vertex and fragment shader
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);

// define vertex positions
var vertexPositions = new Float32Array([
   1.0,  1.0, 0,  // a
  -1.0,  1.0, 0,  // b    b----a
   1.0, -1.0, 0,  // c    |    |
  -1.0,  1.0, 0,  // b    |    |
  -1.0, -1.0, 0,  // d    d----c
   1.0, -1.0, 0   // c
]);

// send the vertex positions to the GPU
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexPositions, gl.STATIC_DRAW);


// define vertex texcoords
var vertexTexcoords = new Float32Array([
  1.0, 0.0,   // a
  0.0, 0.0,   // b
  1.0, 1.0,   // c
  0.0, 0.0,   // b
  0.0, 1.0,   // d
  1.0, 1.0    // c
]);

// send the vertex texcoords to the GPU
var texcoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexTexcoords, gl.STATIC_DRAW);

// wire up the shader program to the vertex position data
var positionAttribute = gl.getAttribLocation(shaderProgram, "position");
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.enableVertexAttribArray(positionAttribute);
gl.vertexAttribPointer(positionAttribute, 3, gl.FLOAT, false, 0, 0);

// wire up the shader program to the vertex texcoord data
var texcoordAttribute = gl.getAttribLocation(shaderProgram, "texcoord");
gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer);
gl.enableVertexAttribArray(texcoordAttribute);
gl.vertexAttribPointer(texcoordAttribute, 2, gl.FLOAT, false, 0, 0);

// generate and send texture data to the GPU
var textureData = new Uint8Array([128, 128, 0, 255]);
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, textureData);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);

// wire up the shader program to the texture data
var imageUniform = gl.getUniformLocation(shaderProgram, "image")
gl.uniform1i(imageUniform, 0);

// tell the GPU to draw
gl.drawArrays(gl.TRIANGLES, 0, 6);

＆＃13;

    <canvas id='canvas' width='300' height='200' style='border: solid 1px black'></canvas>

    <script id="shader-vertex" type="x-shader/x-vertex">
      attribute vec3 position;
      attribute vec2 texcoord;
      varying highp vec2 uv;

      void main() {
        gl_Position = vec4(position, 1);
        uv = texcoord;
      }
    </script>

    <script id="shader-fragment" type="x-shader/x-fragment">
      varying highp vec2 uv;
      uniform sampler2D image;

      void main() {
        gl_FragColor = texture2D(image, uv);
      }
    </script>

＆＃13;

我意识到这是一个很小的信息，所以我建议阅读一些指南。一个好的起点可能是MDN: Getting started with WebGL。

使用RGBA值创建WebGL纹理

1 个答案: