Draw quad (interleaved) in three.js

Question

I'm trying to draw a quad in three.js, but three.js keeps complaining that 'tex' is not a 'WebGLTexture' and refuse to run, what's going on here? thank you.

// z= depth, tex is texture
function drawQuad(z, tex)
{
  var verts = [      
    -1.0,  1.0, z, 0.0, 1.0,
    -1.0, -1.0, z, 0.0, 0.0,
    1.0,  1.0, z, 1.0, 1.0,
    1.0, -1.0, z, 1.0, 0.0,      
  ];    

  const gl = renderer.getContext();  

  gl.disable(gl.DEPTH_TEST);

  gl.useProgram(quadShader);

  var vb = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vb);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW);    

  gl.bindBuffer(gl.ARRAY_BUFFER, vb);

  gl.enableVertexAttribArray(0);  
  gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 20, 0);

  gl.enableVertexAttribArray(1);  
  gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 20, 12);  

  gl.uniform1i(gl.getUniformLocation(quadShader, 'su_tex'), 0)
  gl.activeTexture(gl.TEXTURE0 + 0);     
  gl.bindTexture(gl.TEXTURE_2D, tex);   

  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4) 
  
  gl.enable(gl.DEPTH_TEST);
}

tex is loaded like this

wallTex = loader.load("https://r105.threejsfundamentals.org/threejs/resources/images/wall.jpg");
drawQuad(1.0, wallTex);

`tex` is a [`THREE.Texture`](https://threejs.org/docs/#api/en/textures/Texture) object, but not a `WebGLTexture` object created with [`gl.createTexture()`](https://registry.khronos.org/webgl/specs/latest/1.0/#5.14.8). — Rabbid76, Nov 20 '22 at 08:49

21k · Accepted Answer · 2022-11-23T03:18:59.573

Ok, i've figured it out.

Anyway, this may help those who are still confused (c++ opengl pragrammers):

WebGlTexture is the id you created with glGenTextures(1, &texturId), it is for rendering.
THREE.js.Texture is a texture container, it contains texture descriptions and image data downloaded from web or whatever, it has a hidden property __webglTexture which is null if this THREE.js.Texture never been used for rendering. then what if it has been used for rendering? it will create a WebGLTexture (via glGenTextures(1, &textureId) internally i guess) and assign this WebGlTexture id to its __webglTexture, and now you can use it for rendering.

It might be more appropriate to call THREE.js.Texture as THREE.js.TextrureRes IMO, less mis-leading.

Draw quad (interleaved) in three.js

1 Answers1