Improved loading speed by better parallelism and image quality by add…

…ing mipmaps.
keaukraine · Mar 11, 2022 · 3139066 · 3139066
1 parent 8a617a4
commit 3139066
Showing 6 changed files with 121 additions and 42 deletions.
diff --git a/dist/js/DunesRenderer.js b/dist/js/DunesRenderer.js
diff --git a/dist/js/DunesRenderer.js.map b/dist/js/DunesRenderer.js.map
diff --git a/dist/js/es/index.js b/dist/js/es/index.js
diff --git a/dist/js/es/index.js.map b/dist/js/es/index.js.map
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
   "keywords": [],
   "homepage": "https://github.com/keaukraine/webgl-dunes#readme",
   "dependencies": {
-    "webgl-framework": "^2.1.2"
+    "webgl-framework": "^2.1.4"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.2",

diff --git a/src/DunesRenderer.ts b/src/DunesRenderer.ts
@@ -330,24 +330,28 @@ export class DunesRenderer extends BaseRenderer {
     }
 
     async loadData(): Promise<void> {
-        await Promise.all([
+        const modelsPromise = Promise.all([
             this.fmSky.load("data/models/sky", this.gl),
             this.fmPalms.load("data/models/palms", this.gl),
             this.fmDunes.load("data/models/dunes", this.gl),
             this.fmSmoke.load("data/models/smoke100", this.gl),
             this.fmSun.load("data/models/sun_flare", this.gl),
             this.fmBird.load("data/models/bird-anim-uv", this.gl),
         ]);
-        const textures = await Promise.all([
-            await UncompressedTextureLoader.load("data/textures/" + this.PRESET.SKY + ".jpg", this.gl, undefined, undefined, true),
-            await UncompressedTextureLoader.load("data/textures/dunes-diffuse.jpg", this.gl),
-            await UncompressedTextureLoader.load("data/textures/upwind.png", this.gl),
-            await UncompressedTextureLoader.load("data/textures/detail.png", this.gl),
-            await UncompressedTextureLoader.load("data/textures/smoke.png", this.gl),
-            await UncompressedTextureLoader.load("data/textures/sun_flare.png", this.gl),
-            await UncompressedTextureLoader.load("data/textures/bird2.png", this.gl)
+        const texturesPromise = Promise.all([
+            UncompressedTextureLoader.load("data/textures/" + this.PRESET.SKY + ".jpg", this.gl, undefined, undefined, true),
+            UncompressedTextureLoader.load("data/textures/dunes-diffuse.jpg", this.gl),
+            UncompressedTextureLoader.load("data/textures/upwind.png", this.gl),
+            UncompressedTextureLoader.load("data/textures/detail.png", this.gl),
+            UncompressedTextureLoader.load("data/textures/smoke.png", this.gl),
+            UncompressedTextureLoader.load("data/textures/sun_flare.png", this.gl),
+            UncompressedTextureLoader.load("data/textures/bird2.png", this.gl),
+            UncompressedTextureLoader.load("data/textures/palm-alpha.png", this.gl, undefined, undefined, true),
+            UncompressedTextureLoader.load("data/textures/palm-diffuse.png", this.gl, undefined, undefined, true)
         ]);
 
+        const [models, textures] = await Promise.all([modelsPromise, texturesPromise]);
+
         this.skyTexture = textures[0];
         this.dunesDiffuseTexture = textures[1];
         this.dunesDustTexture = textures[2];
@@ -356,8 +360,17 @@ export class DunesRenderer extends BaseRenderer {
         this.textureSunFlare = textures[5];
         this.textureBird = textures[6];
 
-        this.palmTextureAlpha = await UncompressedTextureLoader.load("data/textures/palm-alpha.png", this.gl, undefined, undefined, true);
-        this.palmTextureDiffuse = await UncompressedTextureLoader.load("data/textures/palm-diffuse.png", this.gl, undefined, undefined, true);
+        this.palmTextureAlpha = textures[7];
+        this.palmTextureDiffuse = textures[8];
+
+        this.gl.bindTexture(this.gl.TEXTURE_2D, this.dunesDiffuseTexture);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR_MIPMAP_LINEAR);
+        this.gl.generateMipmap(this.gl.TEXTURE_2D);
+        this.gl.bindTexture(this.gl.TEXTURE_2D, this.dunesDetailTexture);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR_MIPMAP_LINEAR);
+        this.gl.generateMipmap(this.gl.TEXTURE_2D);
 
         this.initOffscreen();
         this.initVignette();