[Fix] improve compatibility of example with older mobile devices (playcanvas#2348)

mvaligursky · web-flow · commit ea661609e4fb · 2020-08-10T15:16:47.000+01:00
diff --git a/examples/graphics/hardware-instancing.html b/examples/graphics/hardware-instancing.html
@@ -87,38 +87,40 @@
         // add the box entity to the hierarchy
         app.root.addChild(box);
 
-        // number of instances to render
-        var instanceCount = 1000;
-
-        // store matrices for individual instances into array
-        var matrices = new Float32Array(instanceCount * 16);
-        var matrixIndex = 0;
-
-        var radius = 5;
-        var pos = new pc.Vec3();
-        var rot = new pc.Quat();
-        var scl = new pc.Vec3();
-        var matrix = new pc.Mat4();
-
-        for (var i = 0; i < instanceCount; i++) {
-            // generate random positions / scales and rotations
-            pos.set(Math.random() * radius - radius * 0.5, Math.random() * radius - radius * 0.5, Math.random() * radius - radius * 0.5);
-            scl.set(0.1 + Math.random() * 0.1, 0.1 + Math.random() * 0.3, 0.1 + Math.random() * 0.1);
-            rot.setFromEulerAngles(i * 30, i * 50, i * 70);
-            matrix.setTRS(pos, rot, scl);
-
-            // copy matrix elements into array of floats
-            for (var m = 0; m < 16; m++)
-                matrices[matrixIndex++] = matrix.data[m];
+        if (this.app.graphicsDevice.supportsInstancing) {
+            // number of instances to render
+            var instanceCount = 1000;
+
+            // store matrices for individual instances into array
+            var matrices = new Float32Array(instanceCount * 16);
+            var matrixIndex = 0;
+
+            var radius = 5;
+            var pos = new pc.Vec3();
+            var rot = new pc.Quat();
+            var scl = new pc.Vec3();
+            var matrix = new pc.Mat4();
+
+            for (var i = 0; i < instanceCount; i++) {
+                // generate random positions / scales and rotations
+                pos.set(Math.random() * radius - radius * 0.5, Math.random() * radius - radius * 0.5, Math.random() * radius - radius * 0.5);
+                scl.set(0.1 + Math.random() * 0.1, 0.1 + Math.random() * 0.3, 0.1 + Math.random() * 0.1);
+                rot.setFromEulerAngles(i * 30, i * 50, i * 70);
+                matrix.setTRS(pos, rot, scl);
+
+                // copy matrix elements into array of floats
+                for (var m = 0; m < 16; m++)
+                    matrices[matrixIndex++] = matrix.data[m];
+            }
+
+            // create static vertex buffer containing the matrices
+            var vertexBuffer = new pc.VertexBuffer(this.app.graphicsDevice, pc.VertexFormat.defaultInstancingFormat, instanceCount, pc.BUFFER_STATIC, matrices);
+
+            // initialise instancing using the vertex buffer on meshInstance of the created box
+            var boxMeshInst = box.model.meshInstances[0];
+            boxMeshInst.setInstancing(vertexBuffer);
         }
 
-        // create static vertex buffer containing the matrices
-        var vertexBuffer = new pc.VertexBuffer(this.app.graphicsDevice, pc.VertexFormat.defaultInstancingFormat, instanceCount, pc.BUFFER_STATIC, matrices);
-
-        // initialise instancing using the vertex buffer on meshInstance of the created box
-        var boxMeshInst = box.model.meshInstances[0];
-        boxMeshInst.setInstancing(vertexBuffer);
-
         // Set an update function on the app's update event
         var angle = 0;
         app.on("update", function (dt) {
diff --git a/examples/graphics/lights-baked.html b/examples/graphics/lights-baked.html
@@ -98,7 +98,7 @@
             nearClip: 0.05
         });
         app.root.addChild(camera);
-        camera.setLocalPosition(0, 0, 5);
+        camera.setLocalPosition(0, 0, 8);
 
         app.scene.lightmapMode = pc.BAKE_COLOR;
         app.scene.lightmapMaxResolution = 2048;
diff --git a/examples/graphics/shader-burn.html b/examples/graphics/shader-burn.html
@@ -37,7 +37,7 @@
     </script>
 
     <script id="fshader" type="x-shader/x-fragment">
-        precision highp float;
+        precision mediump float;
 
         varying vec2 vUv0;
 
diff --git a/examples/graphics/shader-toon.html b/examples/graphics/shader-toon.html
@@ -63,7 +63,7 @@
     </script>
 
     <script id="fshader" type="x-shader/x-fragment">
-        precision highp float;
+        precision mediump float;
         uniform sampler2D uTexture;
         varying float vertOutTexCoord;
         varying vec2 texCoord;
diff --git a/examples/graphics/shader-wobble.html b/examples/graphics/shader-wobble.html
@@ -40,7 +40,7 @@
     </script>
 
     <script id="fshader" type="x-shader/x-fragment">
-        precision highp float;
+        precision mediump float;
 
         uniform sampler2D uDiffuseMap;
 
