Done before compatibility problem

will all psd, huge

Author: yvonnexiong

addLight.js

@@ -189,7 +189,7 @@ function addLightParameters(index){
     lightColor[index] =[Math.random(), Math.random(), Math.random()];
     lightIntensity[index] = 0.5;
     pointLightDis[index] = 0.5;
-    pointLightDis[index] = 0.1;
+    pointLightDecay[index] = 0.1;
     showDiffuse[index] = 1;
     showSpec[index] = 1;
 

css/mock3d.css

@@ -57,7 +57,7 @@ label{margin-bottom:0;}
 	overflow-y: hidden;
 	 width:100%;
 	 height:auto;
-    padding: 20px calc(200px + 20px);
+    padding: 20px calc(160px + 20px);
 	padding-left:20px;
 }
 
@@ -75,7 +75,19 @@ label{margin-bottom:0;}
   }
 
 .sidebar-left{display: none; border-right: 1px solid #eee;}/* Hide for mobile, show later */
-.sidebar-right{right:0; border-left: 1px solid #eee;}
+.sidebar-right{right:0; border-left: 1px solid #eee;
+  width:25%;
+  min-width:160px;
+}
+
+/*just for main padding*/
+@media (min-width: 640px) {
+  .main {
+   padding-right: calc(25% + 20px);
+  }
+
+}
+
 
 /* left and right sidebar for large screen*/
 @media (min-width: 768px) {
@@ -88,7 +100,7 @@ label{margin-bottom:0;}
 
   .main {
    width:100%;
-   padding: 20px calc(25% + 10px);
+   padding: 20px calc(25% + 20px);
   }
 
   .main_button_container{
@@ -106,19 +118,15 @@ label{margin-bottom:0;}
 @media (min-width: 920px) {
   .main_button{width:50%; }
 
-  .main {
-   padding: 20px calc(25% + 0px);
-  }
-
 }
 
-@media (min-width: 992px) {
+@media (min-width: 1200px) {
   .sidebar-left{
-    width:250px;
+    width:300px;
   }
 
   .sidebar-right{
-    width:250px; 
+    width:300px; 
   }
 }
 
@@ -210,7 +218,7 @@ label{margin-bottom:0;}
 
 
 #btn_addLight {
-  padding:8px 12px; 
+  padding:8px 0px; 
   background: #E8E8E8;
   color:#500000; 
   font-weight: 400;
@@ -534,6 +542,7 @@ input[type="checkbox"] + .pseudoCheckbox{
 
 .dropdown-menu{
   margin-top: -1px;
+  font-size: 12px;
 }
 
 

cube.js

@@ -34,9 +34,9 @@ showSpec[0] = 1;
 var styleBright = 0,
     styleDark = 1;
 
-var alphaR = 0,
-    alphaG = 1,
-    alphaB = 1;
+var alphaR = 1;
+var alphaG = 1;
+var alphaB = 1;
 
 var logIOR = 0.25;//[-1, 1]
 var BGdis = 0.6;
@@ -182,6 +182,13 @@ window.onload = function init()
 
     initTextures();
 
+    normalImage.src = image3.src;
+    lightImage.src = image2.src;
+    darkImage.src = image1.src;
+    refractImage.src = image5.src;
+    reflectImage.src = image4.src;
+    alphaImage.src = image6.src;
+
 
     gl.activeTexture(gl.TEXTURE0);
     gl.bindTexture(gl.TEXTURE_2D, normalTexture);
@@ -274,12 +281,7 @@ function initTextures() {
     alphaImage = new Image();
     alphaImage.onload = function() { handleTextureLoaded(alphaImage, alphaTexture); }
 
-    normalImage.src = image3.src;
-    lightImage.src = image2.src;
-    darkImage.src = image1.src;
-    refractImage.src = image5.src;
-    reflectImage.src = image4.src;
-    alphaImage.src = image6.src;
+    
 
 }
 
@@ -293,6 +295,7 @@ function handleTextureLoaded(image, texture) {
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
     gl.generateMipmap(gl.TEXTURE_2D);
+    //gl.bindTexture(gl.TEXTURE_2D, 0);
 
 }
 
@@ -362,6 +365,8 @@ function render() {
     gl.uniform1i(checkFresnelLoc, checkFresnel);
 
     gl.drawArrays( gl.TRIANGLES, 0, numVertices );
+
+
     requestAnimFrame(render);
 }