create WebGL texture out of RGBA values

Question

I tried to do this based off of this answer. This is my code:

<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>

But all I can see is a white box with a black outline. What am I doing wrong?

Thank you!

Answer 1

The code you have there just creates a texture and loads it into GPU memory. So you're not actually drawing anything to the canvas.

To get that texture on screen you'll need quite a few more things. Here is your code with the rest added:

// 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);

    <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>

I realize that is a TON of info to grok so I recommend reading through some guides. A good place to start might be MDN: Getting started with WebGL.