prepare() {
gl.enable(gl.DEPTH_TEST)
gl.depthFunc(gl.LEQUAL)
}
prepare() {
gl.enable(gl.DEPTH_TEST)
gl.depthFunc(gl.LEQUAL)
gl.clearColor(0.3, 0.3, .3, 1.0)
gl.clearDepth(1.0)
this.camera.radius = 3
}
prepare() {
this.camera.offset = [0, 2, 0]
gl.enable(gl.DEPTH_TEST)
gl.depthFunc(gl.LEQUAL)
gl.clearColor(0.3, 0.3, .3, 1.0)
gl.clearDepth(1.0)
const brickwall = new Texture(gl).fromImage(getAssets.brickwall)
const brickwallNormal = new Texture(gl).fromImage(getAssets.brickwallNormal)
brickwall.bind(0)
brickwallNormal.bind(1)
}
init() {
gl.getExtension('OES_standard_derivatives')
gl.getExtension('OES_texture_float')
gl.getExtension('OES_texture_float_linear')
// gl.getExtension('OES_texture_half_float')
// gl.getExtension('OES_texture_half_float_linear')
this.prg = this.compile(vs, fs)
this.mapPrg = this.compile(mapVs, mapFs)
this.cubePrg = this.compile(cubeVs, cubeFs)
this.skyboxPrg = this.compile(skyboxVs, skyboxFs)
this.irradiancePrg = this.compile(cubeVs, irradianceFs)
}
attrib() {
let CubeData = [
0.5,-0.5, -0.5,
0.5, -0.5, -0.5,
0.5, 0.5, -0.5,
0.5, 0.5, -0.5,
-0.5, 0.5, -0.5,
-0.5, -0.5, -0.5,
-0.5, -0.5, 0.5,
0.5, -0.5, 0.5,
0.5, 0.5, 0.5,
0.5, 0.5, 0.5,
-0.5, 0.5, 0.5,
-0.5, -0.5, 0.5,
-0.5, 0.5, 0.5,
-0.5, 0.5, -0.5,
-0.5, -0.5, -0.5,
-0.5, -0.5, -0.5,
-0.5, -0.5, 0.5,
-0.5, 0.5, 0.5,
0.5, 0.5, 0.5,
0.5, 0.5, -0.5,
0.5, -0.5, -0.5,
0.5, -0.5, -0.5,
0.5, -0.5, 0.5,
0.5, 0.5, 0.5,
-0.5, -0.5, -0.5,
0.5, -0.5, -0.5,
0.5, -0.5, 0.5,
0.5, -0.5, 0.5,
-0.5, -0.5, 0.5,
-0.5, -0.5, -0.5,
-0.5, 0.5, -0.5,
0.5, 0.5, -0.5,
0.5, 0.5, 0.5,
0.5, 0.5, 0.5,
-0.5, 0.5, 0.5,
-0.5, 0.5, -0.5]
let cube = new Mesh()
cube.bufferData(CubeData, ['position'], [3])
this.cube = cube
this.lampVao = gl.createVertexArray()
gl.bindVertexArray(this.lampVao)
gl.bindBuffer(gl.ARRAY_BUFFER, this.cube._buffers[0].buffer.buffer)
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 3 * 4, 0) // float size is 4
gl.enableVertexAttribArray(0)
}
// 针对多个array buffer，list可以只激活部分attribute
bind(mProgram, list) {
//所有data在一个arrybuffer里
if(this._buffers.length === 1) {
this._buffers[0].buffer.attribPointer(mProgram, list)
}else if (!list) {
for (let i = 0; i < this._buffers.length; i++) {
this._buffers[i].buffer.attribPointer(mProgram)
}
} else {
for (let i = 0; i < this._buffers.length; i++) {
for (let j = 0; j < list.length; j++) {
if (list[j] === this._buffers[i].name)
this._buffers[i].buffer.attribPointer(mProgram)
}
}
}
if(this.iBuffer) this.iBuffer.bind()
if (this.textures) {
let diffuseNr = 1
let specularNr = 1
let normalNr = 1
let heightNr = 1
let i = 0
for (let key in this.textures) {
gl.activeTexture(gl.TEXTURE0 + i)
let number =''
if(key === 'diffuseMap') {
number = (diffuseNr++) + ''
} else if(key === 'specularMap') {
number = (specularNr++) + ''
} else if(key === 'normalMap') {
number = (normalNr++) + ''
} else if (key === 'heightMap' || key === 'bumpMap') { // three.js takes bumpMap as heightMap
number = (heightNr++) + ''
}
let tmp = {}
tmp[key + number] = i
mProgram.style(tmp)
gl.bindTexture(gl.TEXTURE_2D, this.textures[key])
i++
}
}
}
init() {
// use webgl2
// gl.getExtension('OES_standard_derivatives')
// gl.getExtension('OES_texture_float')
gl.getExtension('OES_texture_float_linear') // Even WebGL2 requires OES_texture_float_linear
gl.getExtension("EXT_color_buffer_float")
// // gl.getExtension('OES_texture_half_float')
// gl.getExtension('OES_texture_half_float_linear')
// gl.getExtension('EXT_shader_texture_lod')
this.prg = this.compile(vs, fs)
this.mapPrg = this.compile(mapVs, mapFs)
this.cubePrg = this.compile(cubeVs, cubeFs)
this.skyboxPrg = this.compile(skyboxVs, skyboxFs)
this.brdfPrg = this.compile(simple2dVs, brdfFs)
}
render() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
this.quad.bind(this.prg, ['position', 'normal', 'texCoord', 'tangent'])
this.quad.draw()
}
render() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
this.cube.bind(this.prg, ['position'])
this.cube.draw()
let mMatrix = mat4.identity(mat4.create())
mat4.translate(mMatrix, mMatrix, [1, .1, 1])
mat4.scale(mMatrix , mMatrix , [.2, .2, .2])
this.lampPrg.use()
this.lampPrg.style({
mMatrix,
vMatrix,
pMatrix,
lightColor
})
gl.bindVertexArray(this.lampVao);
gl.drawArrays(gl.TRIANGLES, 0, 36);
}
render() {
gl.viewport(0, 0, canvas.width, canvas.height)
gl.clearColor(0.3, 0.3, 0.3, 1.);
gl.clearDepth(1.0)
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
let mMatrix = mat4.identity(mat4.create())
let baseUniforms = {
vpMatrix: this.tmpMatrix,
lightPositions: [ // use flatten array for gl.uniform3fv
-10., 10., 10.,
10., 10., 10.,
-10., -10., 10.,
10., -10., 10.,
],
lightColors: new Array(12).fill(300.),
camPos: this.eyeDirection,
lambertDiffuse: this.params.lambertDiffuse
}
if (this.params.map === 'none') {
this.prg.use()
gl.activeTexture(gl.TEXTURE0)
gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.irradianceMap.texture)
gl.activeTexture(gl.TEXTURE1)
gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.prefilterMap.texture)
gl.activeTexture(gl.TEXTURE2)
gl.bindTexture(gl.TEXTURE_2D, this.brdfLUTTexture.id);
this.prg.style({
...baseUniforms,
albedo: [.5, .0, .0],
ao: 1.,
irradianceMap: 0,
prefilterMap: 1,
brdfLUT: 2
})
this.sphere.bind(this.prg, ['position', 'normal'])
for (let row = 0; row < nrRows; row++) {
this.prg.style({
metallic: row / nrRows
})
for (let col = 0; col < nrColumns; col++) {
mat4.translate(mMatrix, mat4.create(), [(col - (nrColumns / 2)) * spacing, (row - (nrRows / 2)) * spacing, 0.0])
// mat4.translate(mMatrix, mMatrix, [1, 0, 0])
this.prg.style({
roughness: clamp(col / nrColumns, 0.05, 1.),
mMatrix
})
this.sphere.draw()
}
}
} else {
this.mapPrg.use()
this.texture0.bind(0)
this.texture1.bind(1)
this.texture2.bind(2)
this.texture3.bind(3)
this.texture4.bind(4)
gl.activeTexture(gl.TEXTURE5)
gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.irradianceMap.texture)
gl.activeTexture(gl.TEXTURE6)
gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.prefilterMap.texture)
gl.activeTexture(gl.TEXTURE7)
gl.bindTexture(gl.TEXTURE_2D, this.brdfLUTTexture);
mat4.scale(mMatrix, mMatrix, [2, 2, 2])
this.mapPrg.style({
...baseUniforms,
mMatrix: mMatrix,
albedoMap: 0,
roughnessMap: 1,
metallicMap: 2,
aoMap: 3,
normalMap: 4,
irradianceMap: 5,
prefilterMap: 6,
brdfLUT: 7
})
this.sphere.bind(this.mapPrg)
this.sphere.draw()
}
// this.cubePrg.use()
// this.hdrTexture.bind(0)
// this.cubePrg.style({
// equirectangularMap: 0,
// vpMatrix: this.tmpMatrix,
// mMatrix: mMatrix
// })
// this.cube.bind(this.cubePrg, ['position', 'texCoord'])
// this.cube.draw()
// this.planeVao.bind()
// this.planeBuffer.drawTriangles()
// this.planeVao.unbind()
this.skyboxPrg.use()
gl.activeTexture(gl.TEXTURE0)
gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.cubemapTexture)
this.skyboxPrg.style({
environmentMap: 0,
vMatrix: this.vMatrix,
pMatrix: this.pMatrix,
mMatrix: mat4.identity(mat4.create()),
})
this.cube.bind(this.skyboxPrg, ['position'])
this.cube.draw()
// brdf out为vec2，设置为vec4时显示正常
// this.brdfPrg.use()
// gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// this.quad.bind(this.brdfPrg)
// this.quad.draw(gl.TRIANGLE_STRIP)
}
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
}
render() {
gl.viewport(0, 0, canvas.width, canvas.height)
gl.clearColor(0.3, 0.3, 0.3, 1.);
gl.clearDepth(1.0)
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
let mMatrix = mat4.identity(mat4.create())
let baseUniforms = {
vpMatrix: this.tmpMatrix,
mMatrix: mMatrix,
lightPositions: [ // use flatten array for gl.uniform3fv
-10., 10., 10.,
10., 10., 10.,
-10., -10., 10.,
10., -10., 10.,
],
lightColors: new Array(12).fill(300.),
camPos: this.eyeDirection,
lambertDiffuse: this.params.lambertDiffuse,
irradianceMap: 0
}
if (this.params.map === 'none') {
this.prg.use()
this.irradianceFbo.getTexture().bind(0)
this.prg.style({
...baseUniforms,
albedo: [.5, .0, .0],
roughness: this.params.roughness,
metallic: this.params.metallic,
ao: 1.
})
this.sphere.bind(this.prg, ['position', 'normal'])
} else {
this.mapPrg.use()
this.texture0.bind(0)
this.texture1.bind(1)
this.texture2.bind(2)
this.texture3.bind(3)
this.texture4.bind(4)
this.mapPrg.style({
...baseUniforms,
albedoMap: 0,
roughnessMap: 1,
metallicMap: 2,
aoMap: 3,
normalMap: 4
})
this.sphere.bind(this.mapPrg)
}
this.sphere.draw()
// this.cubePrg.use()
// this.hdrTexture.bind(0)
// this.cubePrg.style({
// equirectangularMap: 0,
// vpMatrix: this.tmpMatrix,
// mMatrix: mMatrix
// })
// this.cube.bind(this.cubePrg, ['position', 'texCoord'])
// this.cube.draw()
// this.planeVao.bind()
// this.planeBuffer.drawTriangles()
// this.planeVao.unbind()
this.skyboxPrg.use()
gl.activeTexture(gl.TEXTURE0)
gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.cubemapTexture)
// this.irradianceFbo.getTexture().bind(0)
this.skyboxPrg.style({
environmentMap: 0,
vpMatrix: this.tmpMatrix,
mMatrix: mMatrix,
})
this.cube.bind(this.skyboxPrg, ['position'])
this.cube.draw()
}
init() {
gl.getExtension('OES_standard_derivatives')
this.prg = this.compile(vs, fs)
this.mapPrg = this.compile(mapVs, mapFs)
}
render() {
gl.clearColor(0.3, 0.3, 0.3, 1.);
gl.clearDepth(1.0)
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
let mMatrix = mat4.identity(mat4.create())
let baseUniforms = {
vpMatrix: this.tmpMatrix,
lightPositions: [ // use flatten array for gl.uniform3fv
-10., 10., 10.,
10., 10., 10.,
-10., -10., 10.,
10., -10., 10.,
],
lightColors: new Array(12).fill(300.),
camPos: this.eyeDirection,
lambertDiffuse: this.params.lambertDiffuse,
}
if (this.params.map === 'none') {
this.prg.use()
this.prg.style({
...baseUniforms,
albedo: [.5, .0, .0],
ao: 1.
})
this.sphere.bind(this.prg, ['position', 'normal'])
for (let row = 0; row < nrRows; row++) {
this.prg.style({
metallic: row / nrRows
})
for (let col = 0; col < nrColumns; col++) {
mat4.translate(mMatrix, mat4.create(), [(col - (nrColumns / 2)) * spacing, (row - (nrRows / 2)) * spacing, 0.0])
// mat4.translate(mMatrix, mMatrix, [1, 0, 0])
this.prg.style({
roughness: clamp(col / nrColumns, 0.05, 1.),
mMatrix
})
this.sphere.draw()
}
}
} else {
this.mapPrg.use()
this.texture0.bind(0)
this.texture1.bind(1)
this.texture2.bind(2)
this.texture3.bind(3)
this.texture4.bind(4)
this.mapPrg.style({
...baseUniforms,
mMatrix: mMatrix,
albedoMap: 0,
roughnessMap: 1,
metallicMap: 2,
aoMap: 3,
normalMap: 4
})
this.sphere.bind(this.mapPrg)
this.sphere.draw()
}
}