From c4ce456af005392c8fcbf7d9751767b48b62d3db Mon Sep 17 00:00:00 2001
From: Ruben van de Ven <git@rubenvandeven.com>
Date: Fri, 19 Jun 2020 17:50:50 +0200
Subject: [PATCH] plane size depends on image size (factor 100)

---
 parade.js | 39 +++++++++++++++++++++++++--------------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/parade.js b/parade.js
index 71d90bc..32340e4 100644
--- a/parade.js
+++ b/parade.js
@@ -413,22 +413,33 @@ class ParadeImage {
 
     makeMesh(scene, config) {
         this.mesh = new BABYLON.TransformNode();
-        var planeOptions = {
-            // TODO: should size be dynamic?
-            height: 5.4762,
-            width: 7.3967,
-            sideOrientation: BABYLON.Mesh.DOUBLESIDE // texture should be visible from front and back
-        };
 
-        let imagePlane  = BABYLON.MeshBuilder.CreatePlane("image", planeOptions, scene);
+
+
+        var img = new Image();
+        let self = this; // use in callback
+        img.onload = function() {
+            // we preload the image, so we can create the plane based on image dimensions
+            // see https://www.html5gamedevs.com/topic/8917-textures-source-image-aspect-ratio/?do=findComment&comment=52949
+            var planeOptions = {
+                // TODO: should size be dynamic?
+                height: this.height/100,
+                width: this.width/100,
+                sideOrientation: BABYLON.Mesh.DOUBLESIDE // texture should be visible from front and back
+            };
+    
+            let imagePlane  = BABYLON.MeshBuilder.CreatePlane("image", planeOptions, scene);
+            
+            var imageMat = new BABYLON.StandardMaterial("m", scene);
+    
+            imageMat.diffuseTexture = new BABYLON.Texture(self.getImageUrl(), scene);
+            imageMat.roughness = 1;
+            imageMat.emissiveColor = new BABYLON.Color3.White();
+            imagePlane.material = imageMat;
+            imagePlane.parent = self.mesh;
+        }
+        img.src = this.getImageUrl();
         
-        var imageMat = new BABYLON.StandardMaterial("m", scene);
-
-        imageMat.diffuseTexture = new BABYLON.Texture(this.getImageUrl(), scene);
-        imageMat.roughness = 1;
-        imageMat.emissiveColor = new BABYLON.Color3.White();
-        imagePlane.material = imageMat;
-        imagePlane.parent = this.mesh;
 
         // text https://www.babylonjs-playground.com/#TMHF80
         // TODO: cleanup this mess of the dynamic texture: