blend improvments, fix texture units limit

Reon90 · Sep 16, 2018 · def8fc3 · def8fc3
1 parent a72ee1e
commit def8fc3
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 21 deletions.
diff --git a/dist/redcube.js b/dist/redcube.js
diff --git a/src/container.ts b/src/container.ts
@@ -60,6 +60,7 @@ export class Container {
                 instance[`set${name.charAt(0).toUpperCase() + name.slice(1)}`].call(instance, definition);
             }
         }
+        this._singletons.set(name, definition);
     }
 
     _getResolvedDependencies(service) {

diff --git a/src/objects/mesh.ts b/src/objects/mesh.ts
@@ -148,20 +148,36 @@ export class Mesh extends Object3D {
         gl.uniform1i( gl.getUniformLocation(this.program, 'brdfLUT'), brdfLUT.index);
         gl.uniform1i( gl.getUniformLocation(this.program, 'irradianceMap'), irradiancemap.index);
         gl.uniform1i( gl.getUniformLocation(this.program, 'depthTexture'), isShadow ? fakeDepth.index : preDepthTexture.index);
+        let index = 31;
         if (this.material.pbrMetallicRoughness.baseColorTexture) {
-            gl.uniform1i(this.material.uniforms.baseColorTexture, this.material.pbrMetallicRoughness.baseColorTexture.index);
+            gl.activeTexture(gl[`TEXTURE${index}`]);
+            gl.bindTexture(gl.TEXTURE_2D, this.material.pbrMetallicRoughness.baseColorTexture);
+            gl.uniform1i(this.material.uniforms.baseColorTexture, index);
+            index--;
         }
         if (this.material.pbrMetallicRoughness.metallicRoughnessTexture) {
-            gl.uniform1i(this.material.uniforms.metallicRoughnessTexture, this.material.pbrMetallicRoughness.metallicRoughnessTexture.index);
+            gl.activeTexture(gl[`TEXTURE${index}`]);
+            gl.bindTexture(gl.TEXTURE_2D, this.material.pbrMetallicRoughness.metallicRoughnessTexture);
+            gl.uniform1i(this.material.uniforms.metallicRoughnessTexture, index);
+            index--;
         }
         if (this.material.normalTexture) {
-            gl.uniform1i(this.material.uniforms.normalTexture, this.material.normalTexture.index);
+            gl.activeTexture(gl[`TEXTURE${index}`]);
+            gl.bindTexture(gl.TEXTURE_2D, this.material.normalTexture);
+            gl.uniform1i(this.material.uniforms.normalTexture, index);
+            index--;
         }
         if (this.material.occlusionTexture) {
-            gl.uniform1i(this.material.uniforms.occlusionTexture, this.material.occlusionTexture.index);
+            gl.activeTexture(gl[`TEXTURE${index}`]);
+            gl.bindTexture(gl.TEXTURE_2D, this.material.occlusionTexture);
+            gl.uniform1i(this.material.uniforms.occlusionTexture, index);
+            index--;
         }
         if (this.material.emissiveTexture) {
-            gl.uniform1i(this.material.uniforms.emissiveTexture, this.material.emissiveTexture.index);
+            gl.activeTexture(gl[`TEXTURE${index}`]);
+            gl.bindTexture(gl.TEXTURE_2D, this.material.emissiveTexture);
+            gl.uniform1i(this.material.uniforms.emissiveTexture, index);
+            index--;
         }
         if (this.material.doubleSided) {
             gl.disable(gl.CULL_FACE);

diff --git a/src/parse.ts b/src/parse.ts
@@ -140,24 +140,24 @@ export class Parse {
             defines.push({name: 'USE_PBR'});
         }
         if (material.pbrMetallicRoughness.metallicRoughnessTexture) {
-            material.pbrMetallicRoughness.metallicRoughnessTexture = Object.assign({}, this.textures[material.pbrMetallicRoughness.metallicRoughnessTexture.index]);
+            material.pbrMetallicRoughness.metallicRoughnessTexture = this.textures[material.pbrMetallicRoughness.metallicRoughnessTexture.index];
             defines.push({name: 'METALROUGHNESSMAP'});
         }
         if (material.normalTexture) {
-            material.normalTexture = Object.assign({}, this.textures[material.normalTexture.index]);
+            material.normalTexture = this.textures[material.normalTexture.index];
             defines.push({name: 'NORMALMAP'});
         }
         if (material.occlusionTexture) {
-            material.occlusionTexture = Object.assign({}, this.textures[material.occlusionTexture.index]);
+            material.occlusionTexture = this.textures[material.occlusionTexture.index];
             defines.push({name: 'OCCLUSIONMAP'});
         }
         if (material.pbrMetallicRoughness.baseColorTexture) {
-            material.pbrMetallicRoughness.baseColorTexture = Object.assign({}, this.textures[material.pbrMetallicRoughness.baseColorTexture.index]);
+            material.pbrMetallicRoughness.baseColorTexture = this.textures[material.pbrMetallicRoughness.baseColorTexture.index];
             defines.push({name: 'BASECOLORTEXTURE'});
         }
         if (material.emissiveTexture) {
             const { texCoord } = material.emissiveTexture;
-            material.emissiveTexture = Object.assign({}, this.textures[material.emissiveTexture.index]);
+            material.emissiveTexture = this.textures[material.emissiveTexture.index];
             defines.push({name: 'EMISSIVEMAP', value: texCoord ? 2 : 1});
         }
 
@@ -417,7 +417,7 @@ export class Parse {
         });
 
         this.scene.opaqueChildren.sort((a, b) => a.distance - b.distance);
-        this.scene.transparentChildren.sort((a, b) => b.distance - a.distance);
+        this.scene.transparentChildren.sort((a, b) => a.distance - b.distance);
     }
 
     buildAnimation() {
@@ -577,11 +577,13 @@ export class Parse {
     }
 
     handleTextureLoaded(sampler, image, name) {
-        const t = createTexture();
+        const t = gl.createTexture();
         t.name = name;
         t.image = image.src.substr(image.src.lastIndexOf('/'));
 
-        gl.bindSampler(t.index, sampler);
+        gl.activeTexture(gl[`TEXTURE${31}`]);
+        gl.bindTexture(gl.TEXTURE_2D, t);
+        gl.bindSampler(31, sampler);
         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
         gl.generateMipmap(gl.TEXTURE_2D);
 

diff --git a/src/renderer.ts b/src/renderer.ts
@@ -222,9 +222,7 @@ export class Renderer {
         });
         if (this.scene.transparentChildren.length) {
             gl.enable(gl.BLEND);
-            gl.depthMask(false);
-            gl.blendFuncSeparate(gl.SRC_COLOR, gl.DST_COLOR, gl.ONE, gl.ZERO);
-            // gl.blendFuncSeparate(gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);  
 
             this.scene.transparentChildren.forEach(mesh => {
                 if (mesh.visible) {
@@ -233,8 +231,7 @@ export class Renderer {
             });
 
             gl.disable(gl.BLEND);
-            gl.depthMask(true);
-            gl.blendFuncSeparate(gl.ONE, gl.ZERO, gl.ONE, gl.ZERO);
+            gl.blendFunc(gl.ONE, gl.ZERO); 
         }
     }
 

diff --git a/src/shaders/fragment.glsl b/src/shaders/fragment.glsl
@@ -186,8 +186,8 @@ void main() {
         float roughness = texture(metallicRoughnessTexture, outUV).g;
         float metallic = texture(metallicRoughnessTexture, outUV).b;
     #else
-        float roughness = 0.0;
-        float metallic = 0.0;
+        float roughness = 0.5;
+        float metallic = 0.5;
     #endif
 
     #ifdef TANGENT