Skip to content

Commit acb0903

Browse files
yvonnexiongyvonnexiong
committed
Fresnel Control Update
All refl refr intensity control -> Fresnel Control
1 parent e12b48f commit acb0903

3 files changed

Lines changed: 36 additions & 75 deletions

File tree

‎cube.js‎

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,6 @@ var alphaB = 1;
4141
var logIOR = 0.25;//[-1, 1]
4242
var BGdis = 0.6;
4343

44-
var reflDisable = 0;
45-
var mirror = 0;
46-
var reflectIntensity = 0;
4744
var FGdis = 0.2;
4845

4946
var reflMap = 1;//1: plane; 2:hemisphere
@@ -53,6 +50,7 @@ var FGshiftY = 0;
5350
var FGscaleX = 0.5;
5451
var FGscaleY = 0.5;
5552

53+
var fresnelIntensity = 0;
5654
var fresnelB = 0.3; //cos = 0.95
5755
var fresnelC = 0.6; //cos = 0.7
5856
var checkFresnel = 0;
@@ -75,10 +73,11 @@ var showSpecLoc;
7573
var styleBrightLoc, styleDarkLoc;
7674
var alphaRLoc, alphaGLoc, alphaBLoc;
7775
var logIORLoc, BGdisLoc;
78-
var reflDisableLoc, mirrorLoc, FGdisLoc;
76+
var FGdisLoc;
7977
var reflMapLoc;
8078
var FGshiftXLoc, FGshiftYLoc, FGscaleXLoc, FGscaleXLoc;
81-
var reflectIntensityLoc;
79+
80+
var fresnelIntensityLoc;
8281
var fresnelBLoc, fresnelCLoc;
8382
var checkFresnelLoc;
8483

@@ -239,14 +238,13 @@ window.onload = function init()
239238
logIORLoc = gl.getUniformLocation( program, "logIOR");
240239
BGdisLoc = gl.getUniformLocation( program, "BGdis");
241240
FGdisLoc = gl.getUniformLocation( program, "FGdis");
242-
reflDisableLoc = gl.getUniformLocation (program, "reflDisable");
243-
mirrorLoc = gl.getUniformLocation( program, "mirror");
244-
reflectIntensityLoc = gl.getUniformLocation (program, "reflectIntensity");
245241
reflMapLoc = gl.getUniformLocation ( program, "reflMap");
246242
FGshiftXLoc = gl.getUniformLocation( program, "FGshiftX");
247243
FGshiftYLoc = gl.getUniformLocation( program, "FGshiftY");
248244
FGscaleXLoc = gl.getUniformLocation( program, "FGscaleX");
249245
FGscaleYLoc = gl.getUniformLocation( program, "FGscaleY");
246+
247+
fresnelIntensityLoc = gl.getUniformLocation ( program, "fresnelIntensity");
250248
fresnelBLoc = gl.getUniformLocation( program, "fresnelB");
251249
fresnelCLoc = gl.getUniformLocation( program, "fresnelC");
252250
checkFresnelLoc = gl.getUniformLocation( program, "checkFresnel");
@@ -303,12 +301,6 @@ function handleTextureLoaded(image, texture) {
303301
function render() {
304302
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
305303

306-
var reflDisableElem = $('#reflDisableSelect:checked');
307-
reflDisable = (reflDisableElem.val())?1:0;
308-
309-
var mirrorElem = $('#mirrorSelect:checked');
310-
mirror = (mirrorElem.val())?1:0;
311-
312304
var lightsOnlyElem = $ ('#lightsOnlySelect:checked');
313305
lightsOnly = (lightsOnlyElem.val())?1:0;
314306

@@ -351,15 +343,13 @@ function render() {
351343
gl.uniform1f(logIORLoc, logIOR);
352344
gl.uniform1f(BGdisLoc, BGdis);
353345
gl.uniform1f(FGdisLoc, FGdis);
354-
gl.uniform1i(reflDisableLoc, reflDisable);
355-
gl.uniform1i(mirrorLoc, mirror);
356-
gl.uniform1f(reflectIntensityLoc, reflectIntensity);
357346
gl.uniform1i(reflMapLoc, reflMap);
358347
gl.uniform1f(FGshiftXLoc, FGshiftX);
359348
gl.uniform1f(FGshiftYLoc, FGshiftY);
360349
gl.uniform1f(FGscaleXLoc, FGscaleX);
361350
gl.uniform1f(FGscaleYLoc, FGscaleY);
362351

352+
gl.uniform1f(fresnelIntensityLoc, fresnelIntensity);
363353
gl.uniform1f(fresnelBLoc, fresnelB);
364354
gl.uniform1f(fresnelCLoc, fresnelC);
365355
gl.uniform1i(checkFresnelLoc, checkFresnel);

‎index.html‎

Lines changed: 24 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -101,16 +101,15 @@
101101
uniform float alphaR, alphaG, alphaB;
102102
uniform float logIOR, BGdis;
103103

104-
uniform float reflectIntensity;
105104
uniform float FGdis;
106-
uniform bool reflDisable;
107-
uniform bool mirror;
105+
108106
uniform int reflMap;// 1: plane, 2:hemisphere
109107
uniform float FGshiftX;
110108
uniform float FGshiftY;
111109
uniform float FGscaleX;
112110
uniform float FGscaleY;
113111

112+
uniform float fresnelIntensity;
114113
uniform float fresnelB;
115114
uniform float fresnelC;
116115
uniform bool checkFresnel;
@@ -349,16 +348,15 @@
349348
fresnel = C * F + D * ( 1.0 - F );
350349
}
351350

352-
fresnel = 1.0 * reflectIntensity + fresnel * ( 1.0 - reflectIntensity);
353-
354-
if (reflDisable )
355-
{
356-
return refr;
351+
if (fresnelIntensity > 0.0){
352+
fresnel = 1.0 * fresnelIntensity + fresnel * ( 1.0 - fresnelIntensity);
353+
return refl * fresnel + refr * ( 1.0 - fresnel );
354+
}else{
355+
fresnel = fresnel * (1.0 + fresnelIntensity);
356+
return refl * fresnel + refr * ( 1.0 - fresnel );
357357
}
358358

359-
return refl * fresnel + refr * ( 1.0 - fresnel );
360-
361-
359+
362360
//vec3 reflTemp = refl * reflectIntensity ;
363361
//vec3 refrTemp = refr * (1.0 - reflectIntensity);
364362
//return reflTemp * (1.0 - cos) + refrTemp * cos;
@@ -413,10 +411,7 @@
413411

414412
finalColor = vec4 (fresnel * (1.0 - alpha) + finalColor.rgb * alpha, 1.0) ;
415413

416-
if (mirror )
417-
{
418-
finalColor = vec4 (refl, 1.0);
419-
}
414+
420415
if (checkFresnel )
421416
{
422417
finalColor = vec4 (fresnel, 1.0);
@@ -729,16 +724,7 @@ <h6>Alpha Image</h6>
729724
Refraction
730725
</a>
731726
<div id = "refractionControl" class= "inCollapse collapse">
732-
<div class="checkbox">
733-
<label>
734-
<span class = "h6 inlineBlock"> refraction only </span>
735-
<div class = "checkbox_container pull-right">
736-
<input type="checkbox" id ="reflDisableSelect">
737-
<div class = "pseudoCheckbox"></div>
738-
</div>
739-
</label>
740-
</div>
741-
<div class="imgbox_container">
727+
<div class="imgbox_container">
742728
<h6>Background image</h6>
743729
<div>
744730
<div id = "container5" class="imgThumb_container" >
@@ -784,25 +770,7 @@ <h6>Background image</h6>
784770
Reflection
785771
</a>
786772
<div id = "reflectionControl" class= "inCollapse collapse">
787-
<div class="checkbox">
788-
<label>
789-
<span class = "h6 inlineBlock"> Full Reflection </span>
790-
<div class = "checkbox_container pull-right">
791-
<input type="checkbox" id ="mirrorSelect">
792-
<div class = "pseudoCheckbox"></div>
793-
</div>
794-
</label>
795-
</div>
796-
<div class="slider_container">
797-
<span class="h6 inlineBlock"> Intensity </span>
798-
<div class="pull-right">
799-
<input type="text" class="form-control mytextbox text-center" id="refl_intensity_val">
800-
</div>
801-
<div class="slider_box">
802-
<input id="refl_intensity_slider" data-slider-id='customSlider' type="text" />
803-
</div>
804-
</div>
805-
<div class="imgbox_container">
773+
<div class="imgbox_container">
806774
<h6>Foreground image</h6>
807775
<div>
808776
<div id = "container4" class="imgThumb_container">
@@ -900,15 +868,25 @@ <h6>Foreground image</h6>
900868
</div>
901869
</label>
902870
</div>
871+
<div class="slider_container">
872+
<span class="h6 inlineBlock"> Fresnel Control </span>
873+
<div class="slider_box">
874+
<input id="fresnel_intensity_slider" data-slider-id='customSlider' type="text" />
875+
</div>
876+
<div>
877+
<div class = "h7 inlineBlock">Full Refract</div>
878+
<div class = "h7 pull-right">Full Reflect</div>
879+
</div>
880+
</div>
903881
<div>
904882
<h6>Fresnel Position</h6>
905883
<div class="slider_box">
906884
<input id="fresnelControl_slider" data-slider-id='customSlider' type="text" class=" span2" value="" />
907885
</div>
908-
<div >
886+
<div>
909887
<div class = "h7 inlineBlock">center</div>
910888
<div class = "h7 pull-right">edge</div>
911-
</div>
889+
</div>
912890
</div>
913891
</div>
914892
</li>

‎sliders.js‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,6 @@ $(document).ready(function () {
33

44
/**************** init checkbox according to default parameters ******************/
55

6-
var reflDisableElem = $('#reflDisableSelect');
7-
initCheckbox(reflDisable, reflDisableElem);
8-
9-
var mirrorElem = $('#mirrorSelect');
10-
initCheckbox(mirror, mirrorElem);
11-
126
var lightsOnlyElem = $('#lightsOnlySelect');
137
initCheckbox(lightsOnly, lightsOnlyElem);
148

@@ -62,6 +56,11 @@ $(document).ready(function () {
6256

6357

6458
/**Fresnel**/
59+
var fresnel_intensity_slider = $("#fresnel_intensity_slider");
60+
var fresnel_intensity_val = $("#fresnel_intensity_val");
61+
fresnel_intensity_slider.attr("data-slider-min", -1).attr("data-slider-max", 1).attr("data-slider-step", 0.01).attr("data-slider-value", fresnelIntensity).attr("data-slider-tooltip","hide").slider({});
62+
bindSliderValParam (fresnel_intensity_slider, fresnel_intensity_val, "fresnelIntensity");
63+
6564
$("#fresnelControl_slider").slider({ min: 0, max: 1, value: [fresnelB, fresnelC], step: 0.01, focus: true });
6665
$("#fresnelControl_slider").on("slide", function(slideEvt) {
6766
fresnelB = slideEvt.value[0];
@@ -136,12 +135,6 @@ $(document).ready(function () {
136135
// $("#reflMap .btn").html('Hemisphere <span class="caret caret-up"></span>');
137136

138137

139-
var refl_intensity_slider = $("#refl_intensity_slider");
140-
var refl_intensity_val = $("#refl_intensity_val");
141-
refl_intensity_slider.attr("data-slider-min", 0).attr("data-slider-max", 1).attr("data-slider-step", 0.01).attr("data-slider-value", reflectIntensity).attr("data-slider-tooltip","hide").slider({});
142-
bindSliderValParam (refl_intensity_slider, refl_intensity_val, "reflectIntensity");
143-
144-
145138
var refl_FGdis_slider = $("#refl_FGdis_slider");
146139
var refl_FGdis_val = $("#refl_FGdis_val");
147140
refl_FGdis_slider.attr("data-slider-min", 0).attr("data-slider-max", 5).attr("data-slider-step", 0.01).attr("data-slider-value", FGdis).attr("data-slider-tooltip","hide").slider({});

0 commit comments

Comments
 (0)