prepare() {
gl.enable(gl.DEPTH_TEST)
gl.depthFunc(gl.LEQUAL)
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true)
let pMatrix = mat4.identity(mat4.create())
let mMatrix = mat4.identity(mat4.create())
let vMatrix = mat4.identity(mat4.create())
let vpMatrix = mat4.identity(mat4.create())
mat4.perspective(pMatrix, toRadian(90), 1., .1, 100)
const CAMERA_SETTINGS = [
[vec3.fromValues(0, 0, 0), vec3.fromValues(1, 0, 0), vec3.fromValues(0, -1, 0)],
[vec3.fromValues(0, 0, 0), vec3.fromValues(-1, 0, 0), vec3.fromValues(0, -1, 0)],
[vec3.fromValues(0, 0, 0), vec3.fromValues(0, 1, 0), vec3.fromValues(0, 0, 1)],
[vec3.fromValues(0, 0, 0), vec3.fromValues(0, -1, 0), vec3.fromValues(0, 0, -1)],
[vec3.fromValues(0, 0, 0), vec3.fromValues(0, 0, 1), vec3.fromValues(0, -1, 0)],
[vec3.fromValues(0, 0, 0), vec3.fromValues(0, 0, -1), vec3.fromValues(0, -1, 0)]
]
let hdrInfo = HDRParser(getAssets.equirectangular)
console.log('hdrInfo', hdrInfo)
this.hdrTexture = new Texture(gl)
gl.bindTexture(gl.TEXTURE_2D, this.hdrTexture.id)
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, hdrInfo.shape[0], hdrInfo.shape[1], 0, gl.RGBA, gl.FLOAT, hdrInfo.data)
this.hdrTexture.clamp()
// cubemap
let cubemapTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_CUBE_MAP, cubemapTexture)
for (var i = 0; i < 6; i++) {
//r,l,u,d,b,f 为6个面指定空数据
gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, gl.RGBA32F, 512, 512, 0, gl.RGBA, gl.FLOAT, null)
}
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR)
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
this.cubemapTexture = cubemapTexture
this.cubePrg.use()
this.hdrTexture.bind(0)
gl.viewport(0, 0, 512, 512)
let captureFrameBuffer = gl.createFramebuffer()
gl.bindFramebuffer(gl.FRAMEBUFFER, captureFrameBuffer)
for (let i = 0; i < 6; i++) {
mat4.lookAt(vMatrix, CAMERA_SETTINGS[i][0], CAMERA_SETTINGS[i][1], CAMERA_SETTINGS[i][2])
mat4.multiply(vpMatrix, pMatrix, vMatrix)
this.cubePrg.style({
equirectangularMap: 0,
vpMatrix,
mMatrix: mMatrix
})
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, this.cubemapTexture, 0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
this.cube.bind(this.cubePrg, ['position', 'texCoord'])
this.cube.draw()
}
const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER)
if (status != gl.FRAMEBUFFER_COMPLETE) {
console.log(`gl.checkFramebufferStatus() returned ${status.toString(16)}`);
}
gl.bindFramebuffer(gl.FRAMEBUFFER, null)
//brdf lookup texture
this.brdfLUTTexture = new Texture(gl, gl.RG).fromData(512, 512, null, gl.RG32F)
this.brdfLUTTexture.bind()
this.brdfLUTTexture.clamp()
gl.bindFramebuffer(gl.FRAMEBUFFER, captureFrameBuffer)
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.brdfLUTTexture.id, 0);
gl.viewport(0, 0, 512, 512)
this.brdfPrg.use()
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
this.quad.bind(this.brdfPrg)
this.quad.draw(gl.TRIANGLE_STRIP)
gl.bindFramebuffer(gl.FRAMEBUFFER, null)
let irr_posx = HDRParser(getAssets.irradiancePosX);
let irr_negx = HDRParser(getAssets.irradianceNegX);
let irr_posy = HDRParser(getAssets.irradiancePosY);
let irr_negy = HDRParser(getAssets.irradianceNegY);
let irr_posz = HDRParser(getAssets.irradiancePosZ);
let irr_negz = HDRParser(getAssets.irradianceNegZ);
this.irradianceMap = new GLCubeTexture([irr_posx, irr_negx, irr_posy, irr_negy, irr_posz, irr_negz])
this.prefilterMap = GLCubeTexture.parseDDS(getAssets.radiance)
}
prepare() {
gl.enable(gl.DEPTH_TEST)
gl.depthFunc(gl.LEQUAL)
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true)
let hdrInfo = HDRParser(getAssets.equirectangular)
console.log('hdrInfo',hdrInfo)
this.hdrTexture = new Texture(gl, gl.RGBA).fromData(hdrInfo.shape[0], hdrInfo.shape[1], hdrInfo.data, gl.FLOAT)
this.hdrTexture.clamp()
let cubemapTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_CUBE_MAP, cubemapTexture);
for (var i = 0; i < 6; i++) {
//r,l,u,d,b,f 为6个面指定空数据
gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, gl.RGBA, 512, 512, 0, gl.RGBA, gl.FLOAT, null)
}
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
this.cubemapTexture = cubemapTexture
// render 6 faces to framebuffer
this.cubePrg.use()
this.hdrTexture.bind(0)
let pMatrix = mat4.identity(mat4.create())
let mMatrix = mat4.identity(mat4.create())
let vMatrix = mat4.identity(mat4.create())
let vpMatrix = mat4.identity(mat4.create())
mat4.perspective(pMatrix, toRadian(90), 1., .1, 100)
const CAMERA_SETTINGS = [
[vec3.fromValues(0, 0, 0), vec3.fromValues(1, 0, 0), vec3.fromValues(0, -1, 0)],
[vec3.fromValues(0, 0, 0), vec3.fromValues(-1, 0, 0), vec3.fromValues(0, -1, 0)],
[vec3.fromValues(0, 0, 0), vec3.fromValues(0, 1, 0), vec3.fromValues(0, 0, 1)],
[vec3.fromValues(0, 0, 0), vec3.fromValues(0, -1, 0), vec3.fromValues(0, 0, -1)],
[vec3.fromValues(0, 0, 0), vec3.fromValues(0, 0, 1), vec3.fromValues(0, -1, 0)],
[vec3.fromValues(0, 0, 0), vec3.fromValues(0, 0, -1), vec3.fromValues(0, -1, 0)]
]
gl.viewport(0, 0, 512, 512)
let captureFrameBuffer = gl.createFramebuffer()
gl.bindFramebuffer(gl.FRAMEBUFFER, captureFrameBuffer)
for(let i =0;i<6;i++) {
mat4.lookAt(vMatrix,CAMERA_SETTINGS[i][0], CAMERA_SETTINGS[i][1], CAMERA_SETTINGS[i][2])
mat4.multiply(vpMatrix, pMatrix, vMatrix)
this.cubePrg.style({
equirectangularMap: 0,
vpMatrix,
mMatrix: mMatrix
})
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, this.cubemapTexture, 0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
this.cube.bind(this.cubePrg, ['position', 'texCoord'])
this.cube.draw()
}
gl.bindFramebuffer(gl.FRAMEBUFFER, null)
this.irradiancePrg.use()
let irradianceFbo = new CubeFrameBuffer(32)
gl.activeTexture(gl.TEXTURE0)
gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.cubemapTexture); // 放在这，防止new cubeframebuffer时绑定了tetxure0到null
for (let i = 0; i < 6; i++) {
mat4.lookAt(vMatrix, CAMERA_SETTINGS[i][0], CAMERA_SETTINGS[i][1], CAMERA_SETTINGS[i][2])
mat4.multiply(vpMatrix, pMatrix, vMatrix)
this.irradiancePrg.style({
environmentMap: 0,
vpMatrix,
mMatrix: mMatrix
})
irradianceFbo.bind(i)
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
this.cube.bind(this.irradiancePrg, ['position', 'texCoord'])
this.cube.draw()
}
irradianceFbo.unbind()
this.irradianceFbo = irradianceFbo
}