greggman / twgl.js

A Tiny WebGL helper Library
http://twgljs.org
MIT License
2.61k stars 258 forks source link

how to create a cubemap rendertarget #176

Open X-skyer opened 3 years ago

X-skyer commented 3 years ago

Hi, I want to render to a cubemap, I use this attachments to create cube rendertarget but seems not working.

attachments = [ { internalFormat: Constants.RGBA, format: Constants.RGBA, type: type, min: this.minFilter, mag: this.maxFilter, wrap: Constants.CLAMP_TO_EDGE, target: Constants.TEXTURE_CUBE_MAP } ];

greggman commented 3 years ago

you can only render to one face of a cube map at a time so your target should be one of the faces which means you need to create the cubemap separately. Example

const width = 2;
const height = 2;

// make an empty cubemap
const tex = twgl.createTexture(gl, {
  target: gl.TEXTURE_CUBE_MAP,
  width,
  height,
  minMag: gl.LINEAR,
});

const faces = [
  gl.TEXTURE_CUBE_MAP_POSITIVE_X,
  gl.TEXTURE_CUBE_MAP_NEGATIVE_X,
  gl.TEXTURE_CUBE_MAP_POSITIVE_Y,
  gl.TEXTURE_CUBE_MAP_NEGATIVE_Y,
  gl.TEXTURE_CUBE_MAP_POSITIVE_Z,
  gl.TEXTURE_CUBE_MAP_NEGATIVE_Z,
];

// make a framebuffer info for each face
const fbis = faces.map(target => twgl.createFramebufferInfo(gl, [{ attachment: tex, target }], width, height));

Working example: https://jsgist.org/?src=58469d1247b4a347b60d6efd535b981f

X-skyer commented 3 years ago

thanks! but got one question: If I want to get the depth buffer texture of the cubemap rendertarget, these buffers will not be a cubetexture, right?