Fresnel & modify reflect

add Fresnel, Reflection part modification

Author: yvonnexiong

addLight.js

@@ -189,6 +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;
     showDiffuse[index] = 1;
     showSpec[index] = 1;
 
@@ -228,7 +229,7 @@ function drawLightMarkPosition(index){
     var lightPy = (mouseXY[index][1] + 0.5)*100 + "%";
     var colorString = color2hex(lightColor[index]);
     var lightMark = "lightMark" + index;
-    var circle= makeSVG('circle', {id:lightMark, cx: lightPx, cy: lightPy, fill: colorString, r:8, stroke: 'white', 'stroke-width': 1,});
+    var circle= makeSVG('circle', {id:lightMark, cx: lightPx, cy: lightPy, fill: colorString, r:8});//, stroke: 'white', 'stroke-width': 1
     document.getElementById('lightPosition_container').appendChild(circle);
 }
 

css/mock3d.css

@@ -329,6 +329,10 @@ label{margin-bottom:0;}
   /*background: rgba(255, 0, 0, 0.5);*/
 }
 
+#lightPosition_container .highLight{
+  
+}
+
 
 
 
@@ -511,6 +515,28 @@ input[type="checkbox"] + .pseudoCheckbox{
 
 .mytextbox{width:44px; display:inline-block; padding:5px 5px; height:24px; margin-top:5px; margin-bottom: 5px;}
 
+
+.dropdown_container{
+  margin:7px 0;
+}
+
+.dropdown_container .caret.caret-up {
+    border-top-width: 0;
+    border-bottom: 4px solid #333;
+}
+.myDropdown{
+    padding: 1px 5px;
+    font-size: 12px;
+    line-height: 1.8;
+    border-radius: 3px;
+    margin: 3px 0;
+}
+
+.dropdown-menu{
+  margin-top: -1px;
+}
+
+
 .slider_container{padding-bottom:8px;}
 .slider_box{padding:0 10px;}
 

cube.js

@@ -19,6 +19,9 @@ lightIntensity[0] = 1.0;
 var pointLightDis = [];
 pointLightDis[0] = 0.5;
 
+var pointLightDecay = [];
+pointLightDecay[0] = 0.1;
+
 var showDiffuse = [];
 showDiffuse[0] = 1;
 
@@ -31,18 +34,28 @@ showSpec[0] = 1;
 var styleBright = 0,
     styleDark = 1;
 
-var alphaR = 1,
+var alphaR = 0,
     alphaG = 1,
     alphaB = 1;
 
-var logIOR = 0.25;
+var logIOR = 0.25;//[-1, 1]
 var BGdis = 0.6;
 
+var reflDisable = 0;
 var mirror = 0;
-var reflectIntensity = 0.5;
-var FGdis = 0.5;
-var FGshiftLR = 0;
+var reflectIntensity = 0;
+var FGdis = 0.2;
+
+var reflMap = 1;//1: plane; 2:hemisphere
+
+var FGshiftX = 0;
+var FGshiftY = 0;
+var FGscaleX = 0.5;
+var FGscaleY = 0.5;
 
+var fresnelB = 0.3; //cos = 0.95
+var fresnelC = 0.6; //cos = 0.7
+var checkFresnel = 0;
 
 //Locs
 
@@ -54,16 +67,20 @@ var lightsOnlyLoc;
 var lightColorLoc;
 var lightIntensityLoc;
 var pointLightDisLoc;
+var pointLightDecayLoc;
 
 var showDiffuseLoc;
 var showSpecLoc;
 
 var styleBrightLoc, styleDarkLoc;
 var alphaRLoc, alphaGLoc, alphaBLoc;
 var logIORLoc, BGdisLoc;
-var mirrorLoc, FGdisLoc, FGshiftLRLoc;
+var reflDisableLoc, mirrorLoc, FGdisLoc;
+var reflMapLoc;
+var FGshiftXLoc, FGshiftYLoc, FGscaleXLoc, FGscaleXLoc;
 var reflectIntensityLoc;
-    
+var fresnelBLoc, fresnelCLoc;
+var checkFresnelLoc; 
 
 
 /****************** For Basic shader ******************/
@@ -204,7 +221,8 @@ window.onload = function init()
     showDiffuseLoc = gl.getUniformLocation( program, "showDiffuse");
     showSpecLoc = gl.getUniformLocation( program, "showSpec");
     pointLightDisLoc = gl.getUniformLocation( program, "pointLightDis");
-    
+    pointLightDecayLoc = gl.getUniformLocation( program, "pointLightDecay");
+            
 
     styleBrightLoc = gl.getUniformLocation( program, "styleBright");
     styleDarkLoc = gl.getUniformLocation( program, "styleDark");
@@ -214,10 +232,17 @@ window.onload = function init()
     logIORLoc = gl.getUniformLocation( program, "logIOR");
     BGdisLoc = gl.getUniformLocation( program, "BGdis");
     FGdisLoc = gl.getUniformLocation( program, "FGdis");
+    reflDisableLoc = gl.getUniformLocation (program, "reflDisable");
     mirrorLoc = gl.getUniformLocation( program, "mirror");
     reflectIntensityLoc = gl.getUniformLocation (program, "reflectIntensity");
-    FGshiftLRLoc = gl.getUniformLocation( program, "FGshiftLR");
-
+    reflMapLoc = gl.getUniformLocation ( program, "reflMap");
+    FGshiftXLoc = gl.getUniformLocation( program, "FGshiftX");
+    FGshiftYLoc = gl.getUniformLocation( program, "FGshiftY");
+    FGscaleXLoc = gl.getUniformLocation( program, "FGscaleX");
+    FGscaleYLoc = gl.getUniformLocation( program, "FGscaleY");
+    fresnelBLoc = gl.getUniformLocation( program, "fresnelB");
+    fresnelCLoc = gl.getUniformLocation( program, "fresnelC");
+    checkFresnelLoc = gl.getUniformLocation( program, "checkFresnel");
 
     render();
 };
@@ -275,12 +300,19 @@ function handleTextureLoaded(image, texture) {
 function render() {
     gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
 
+    var reflDisableElem = $('#reflDisableSelect:checked');
+    reflDisable = (reflDisableElem.val())?1:0;
+
     var mirrorElem = $('#mirrorSelect:checked');
     mirror = (mirrorElem.val())?1:0;
 
     var lightsOnlyElem = $ ('#lightsOnlySelect:checked');
     lightsOnly = (lightsOnlyElem.val())?1:0;
 
+    var checkFresnelElem = $('#checkFresnelSelect:checked');
+    checkFresnel = (checkFresnelElem.val())?1:0;
+
+
     for (var i = 0; i < lightNum ; i++)
     {
         var checkboxName_showDiffuse = '#lightPanel' + i + ' #diffuseSelect:checked';
@@ -305,6 +337,7 @@ function render() {
     gl.uniform1iv(showDiffuseLoc, showDiffuse);
     gl.uniform1iv(showSpecLoc, showSpec);
     gl.uniform1fv(pointLightDisLoc, pointLightDis);
+    gl.uniform1fv(pointLightDecayLoc, pointLightDecay);
 
     gl.uniform1f(styleBrightLoc, styleBright);
     gl.uniform1f(styleDarkLoc, styleDark);
@@ -315,9 +348,18 @@ function render() {
     gl.uniform1f(logIORLoc, logIOR);
     gl.uniform1f(BGdisLoc, BGdis);
     gl.uniform1f(FGdisLoc, FGdis);
+    gl.uniform1i(reflDisableLoc, reflDisable);
     gl.uniform1i(mirrorLoc, mirror);
     gl.uniform1f(reflectIntensityLoc, reflectIntensity);
-    gl.uniform1f(FGshiftLRLoc, FGshiftLR);
+    gl.uniform1i(reflMapLoc, reflMap);
+    gl.uniform1f(FGshiftXLoc, FGshiftX);
+    gl.uniform1f(FGshiftYLoc, FGshiftY);
+    gl.uniform1f(FGscaleXLoc, FGscaleX);
+    gl.uniform1f(FGscaleYLoc, FGscaleY);
+
+    gl.uniform1f(fresnelBLoc, fresnelB);
+    gl.uniform1f(fresnelCLoc, fresnelC);
+    gl.uniform1i(checkFresnelLoc, checkFresnel);
 
     gl.drawArrays( gl.TRIANGLES, 0, numVertices );
     requestAnimFrame(render);

dragndrop.js

@@ -21,36 +21,97 @@ UPLOADinit = function()
 	image6 = new Image();	
 
 
-	//image1.src = "images/Eye/eye_dark.png"; //dark
-	//image2.src = "images/Eye/eye_bright.png"; //bright
-	//image3.src = "images/Eye/eye_shape_smooth.png"; //shape map
-	//image4.src = "images/Eye/eye_foreground.png";  //reflection
+	 
+
+	//eye
+	// image1.src = "images/Eye/eye_dark.jpg"; //dark
+	// image2.src = "images/Eye/eye_bright.jpg"; //bright
+	
+	// image3.src = "images/Eye/eye_shape_smooth.png"; //shape map
+	// image4.src = "images/Eye/eye_foreground.png";  //reflection
+	// image5.src = "images/checker.jpg";//refraction
+	// image6.src = "images/eye/eye_alpha.jpg";
+	
+
+
+
+	//for fresnel test
+	// image1.src = "images/dark.png"; //dark
+	// image2.src = "images/light.png"; //bright
+	// image3.src = "images/cylinder.png"; //shape map
+	// image4.src = "images/white.png";  //reflection
+	// image5.src = "images/dark.png";  //refraction	
+	// image6.src = "images/white.png"; //alpha
+	
+
+
+	//Escher/eye
+	// image1.src = "images/Escher/eye/dark.jpg"; //dark
+	// image2.src = "images/Escher/eye/bright.jpg"; //bright
+	// image3.src = "images/Escher/eye/shape.png"; //shape map
+	// image4.src = "images/Escher/eye/reflect.png";  //reflection
+	// image5.src = "images/checker.jpg";//refraction
+	// image6.src = "images/Escher/eye/alphaControl.jpg";
+
+	//Escher/handWithSphere
+	image1.src = "images/Escher/handWithSphere/dark.jpg"; //dark
+	image2.src = "images/Escher/handWithSphere/bright.jpg"; //bright
+	image3.src = "images/Escher/handWithSphere/shape.png"; //shape map
+	image4.src = "images/Escher/handWithSphere/reflect2.jpg";  //reflection
+	image5.src = "images/dark.png";//refraction
+	image6.src = "images/Escher/handWithSphere/alphaControl.png";
+
+	//underWater
+	// image1.src = "images/underWater/dark.jpg"; //dark
+	// image2.src = "images/underWater/bright.jpg"; //bright
+	// image3.src = "images/underWater/shape.jpg"; //shape map
+	// image4.src = "images/white.png";  //reflection
+	// image5.src = "images/underWater/BG.jpg";//refraction
+	// image6.src = "images/underWater/alphaControl.jpg";
+
+
+
+	
+
+	// image1.src = "images/dark.png"; //dark
+	// image2.src = "images/light.png"; //bright
+	// image3.src = "images/bottle/shape.png"; //shape map
+	// //image4.src = "images/stripe_s.jpg";  //reflection
+	// image4.src = "images/reflect_red.png";  //reflection
 
-	//image1.src = "images/dark.png"; //dark
-	//image2.src = "images/white.png"; //bright
+	// image5.src = "images/checker.jpg";//refraction
+	// image6.src = "images/white.png";
+
 	//image2.src = "images/light.png"; //bright
 
+	
+
 	//image1.src = "images/dark_(alpha50).png"; //dark
 	//image2.src = "images/light_(alpha50).png"; //bright
+	
+
+
 	//image3.src = "images/normal.png"; //shape map
+	
+
+
 	//image3.src = "images/Holmer/Holmer_shape_clean.png"; //shape map
-	image3.src = "images/Holmer/Holmer_new_shape.png"; //shape map
-	image1.src = "images/Holmer/Holmer_new_dark.png"; //dark
-	image2.src = "images/Holmer/Holmer_new_bright.png"; //bright
+	// image3.src = "images/Holmer/Holmer_new_shape.png"; //shape map
+	//image1.src = "images/Holmer/Holmer_new_dark.png"; //dark
+	//image2.src = "images/Holmer/Holmer_new_bright.png"; //bright
+	
 
-	//image1.src ="images/white.png";
-	//image2.src ="images/white.png";
 
 	//image1.src = "images/Holmer/Holmer_dark.png"; //dark
 	//image2.src = "images/Holmer/Holmer_bright.png"; //bright
 	//image3.src = "images/Holmer/Holmer_shape.png"; //shape map
 
 
 	//image4.src = "images/reflect_red.png";//reflection
-	image4.src = "images/reflect_window2.png";//reflection
+	//image4.src = "images/reflect_window2.png";//reflection
 	//image4.src = "images/dark.png";
 
-	image5.src = "images/checker.jpg";  //refraction
+	//image5.src = "images/checker.jpg";  //refraction
 	//image5.src = "images/dark.png";  //refraction
 	//image5.src = "images/white.png";
 
@@ -62,7 +123,7 @@ UPLOADinit = function()
 	//image3.src = "images/bottle/shape.png"
 	//image5.src = "images/bottle/bg.png"
 	//image6.src = "images/eye/eye_alpha.jpg";
-	image6.src = "images/Holmer/Holmer_new_alphaControl.png";
+	//image6.src = "images/Holmer/Holmer_new_alphaControl.png";