render order

app.js

@@ -337,8 +337,11 @@ const minoCamera = new THREE.CubeCamera(1, 1000, minoRenderTarget)
 minoCamera.position.set(5, 10)
 Tetromino.prototype.lockedMaterial = new THREE.MeshBasicMaterial({
     color: 0xffffff,
-    reflectivity: 0.85,
+    reflectivity: 0.99,
     envMap: minoRenderTarget.texture
+/*    side: THREE.DoubleSide,
+        transparent: true,
+        opacity: 0.8*/
 })
 
 class I extends Tetromino {}
@@ -356,11 +359,11 @@ I.prototype.srs = [
 ]
 I.prototype.material = new THREE.MeshBasicMaterial({
     color: 0xafeff9,
-    reflectivity: 0.95,
+    reflectivity: 0.99,
     envMap: minoRenderTarget.texture,
-    side: THREE.DoubleSide,
+/*    side: THREE.DoubleSide,
     transparent: true,
-    opacity: 0.6
+    opacity: 0.8*/
 })
 I.prototype.ghostMaterial = new THREE.MeshBasicMaterial({
     color: 0xafeff9,
@@ -379,11 +382,11 @@ J.prototype.minoesPosition = [
 ]
 J.prototype.material = new THREE.MeshBasicMaterial({
     color: 0xb8b4ff,
-    reflectivity: 0.95,
+    reflectivity: 0.99,
     envMap: minoRenderTarget.texture,
-    side: THREE.DoubleSide,
+/*    side: THREE.DoubleSide,
     transparent: true,
-    opacity: 0.6
+    opacity: 0.8*/
 })
 J.prototype.ghostMaterial = new THREE.MeshBasicMaterial({
     side: THREE.DoubleSide,
@@ -402,11 +405,11 @@ L.prototype.minoesPosition = [
 ]
 L.prototype.material = new THREE.MeshBasicMaterial({
     color: 0xfdd0b7,
-    reflectivity: 0.95,
+    reflectivity: 0.99,
     envMap: minoRenderTarget.texture,
-    side: THREE.DoubleSide,
+/*    side: THREE.DoubleSide,
     transparent: true,
-    opacity: 0.6
+    opacity: 0.8*/
 })
 L.prototype.ghostMaterial = new THREE.MeshBasicMaterial({
     side: THREE.DoubleSide,
@@ -425,11 +428,11 @@ O.prototype.srs = [
 ]
 O.prototype.material = new THREE.MeshBasicMaterial({
     color: 0xffedac,
-    reflectivity: 0.95,
+    reflectivity: 0.99,
     envMap: minoRenderTarget.texture,
-    side: THREE.DoubleSide,
+/*    side: THREE.DoubleSide,
     transparent: true,
-    opacity: 0.6
+    opacity: 0.8*/
 })
 O.prototype.ghostMaterial = new THREE.MeshBasicMaterial({
     side: THREE.DoubleSide,
@@ -448,11 +451,11 @@ S.prototype.minoesPosition = [
 ]
 S.prototype.material = new THREE.MeshBasicMaterial({
     color: 0xC8FBA8,
-    reflectivity: 0.95,
+    reflectivity: 0.99,
     envMap: minoRenderTarget.texture,
-    side: THREE.DoubleSide,
+/*    side: THREE.DoubleSide,
     transparent: true,
-    opacity: 0.6
+    opacity: 0.8*/
 })
 S.prototype.ghostMaterial = new THREE.MeshBasicMaterial({
     side: THREE.DoubleSide,
@@ -489,11 +492,11 @@ T.prototype.tSlots = [
 ]
 T.prototype.material = new THREE.MeshBasicMaterial({
     color: 0xedb2ff,
-    reflectivity: 0.95,
+    reflectivity: 0.99,
     envMap: minoRenderTarget.texture,
-    side: THREE.DoubleSide,
+/*    side: THREE.DoubleSide,
     transparent: true,
-    opacity: 0.6
+    opacity: 0.8*/
 })
 T.prototype.ghostMaterial = new THREE.MeshBasicMaterial({
     side: THREE.DoubleSide,
@@ -512,11 +515,11 @@ Z.prototype.minoesPosition = [
 ]
 Z.prototype.material = new THREE.MeshBasicMaterial({
     color: 0xffb8c5,
-    reflectivity: 0.95,
+    reflectivity: 0.99,
     envMap: minoRenderTarget.texture,
-    side: THREE.DoubleSide,
+/*    side: THREE.DoubleSide,
     transparent: true,
-    opacity: 0.6
+    opacity: 0.8*/
 })
 Z.prototype.ghostMaterial = new THREE.MeshBasicMaterial({
     side: THREE.DoubleSide,
@@ -814,14 +817,13 @@ const scene = new THREE.Scene()
 const renderer = new THREE.WebGLRenderer({
     powerPreference: "high-performance",
     antialias: true,
-    stencil: false,
+    stencil: false
-    depth: false
 })
 renderer.setSize(window.innerWidth, window.innerHeight)
 renderer.setClearColor(0x000000, 10)
 document.body.appendChild(renderer.domElement)
 
-const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 400)
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
 camera.position.set(5, 2, 16)
 
 const controls = new OrbitControls( camera, renderer.domElement )
@@ -845,11 +847,11 @@ const GLOBAL_ROTATION = 0.0025
 
 const darkTextureRotation = 0.0006
 const darkMoveForward     = -0.0007
-const darkOpacity         = 0.15
+const darkOpacity         = 0.1
 
 const colorFullTextureRotation = 0.0006
 const colorFullMoveForward     = -0.0012
-const colorFullOpacity         = 0.15
+const colorFullOpacity         = 0.1
 
 const commonCylinderGeometry = new THREE.CylinderGeometry(25, 25, 500, 12, 1, true)
 
@@ -889,7 +891,7 @@ const colorFullCylinder = new THREE.Mesh(
 colorFullCylinder.position.set(5, 10, -10)
 scene.add(colorFullCylinder)
 
-const light = new THREE.AmbientLight(0xffffff, 1)
+const light = new THREE.AmbientLight(0xffffff, 2)
 scene.add(light)
 
 const edgeMaterial = new THREE.MeshBasicMaterial({