TEXTURE_COMPARE_MODE and sampler2DShadow about twgl.js

[greggman]

so I added compareMode and compareFunc (v5.5.1) as they were easy to add, but just FYI, twgl's goal is not to replace all of native WebGL. It's just to help in a few verbose situations. For example there is no twgl code for gl.enable, gl.clearColor, gl.depthFunc and 100s of other WebGL functions.

In any case, this should work now

const tex = twgl.createTexture(gl, {
  width: gl.canvas.width,
  height: gl.canvas.height,
  internalFormat: gl.DEPTH_COMPONENT32F,
  compareMode: gl.COMPARE_REF_TO_TEXTURE,
});

const fbi = twgl.createFramebufferInfo(gl, [
  { internalFormat: gl.RGBA8 },
  { attachment: tex, attachmentPoint: gl.DEPTH_ATTACHMENT  },
]);

https://jsgist.org/?src=50a8c4f0432c15da48f3ccec3cec4b13

or this

const fbi = twgl.createFramebufferInfo(gl, [
  { internalFormat: gl.RGBA8 },
  { internalFormat: gl.DEPTH_COMPONENT32F, compareMode: gl.COMPARE_REF_TO_TEXTURE },
]);

const tex = fbi.attachments[1];

https://jsgist.org/?src=72183c6e6e3f2ad18a5827e45b82bc45

[greggman]

Can't you just do this?

const tex = twgl.createTexture(gl, {
  width: gl.canvas.width,
  height: gl.canvas.height,
  internalFormat: gl.DEPTH_COMPONENT32F,
});
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_COMPARE_MODE, gl.COMPARE_REF_TO_TEXTURE);

eg: https://jsgist.org/?src=8e9958a6741267edbe0c1fdab4bf352e

[benc-uk]

Thanks!

So your first tip pointed me towards doing this

const shadowMapTex = createTexture(gl, {
  width: 1024,
  height: 1024,
  format: gl.DEPTH_COMPONENT,
  internalFormat: gl.DEPTH_COMPONENT32F,
  wrap: gl.CLAMP_TO_EDGE,
})
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_COMPARE_MODE, gl.COMPARE_REF_TO_TEXTURE)

Which is working really well, I never thought about combining texParameteri() calls with twgl for some reason

Great you're making this part of the library, but also if you feel making this part of twgl is pushing too far into a 1:1 rewrite of the WebGL API I can understand that too.

[greggman]

So fyi, even before this change you could do this

const shadowMapTex = createTexture(gl, {
  width: 1024,
  height: 1024,
  format: gl.DEPTH_COMPONENT,
  internalFormat: gl.DEPTH_COMPONENT32F,
  wrap: gl.CLAMP_TO_EDGE,
  minMag: gl.LINEAR,
})
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_COMPARE_MODE, gl.COMPARE_REF_TO_TEXTURE)

If you want to set both TEXTURE_MIN_FILTER and TEXTURE_MAG_FILTER to the same thing. and min and mag are there if you want to set them to separate things.