Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 408fad19 编写于 作者: A alteredq
浏览文件
操作

Added depth-of-field example.

上级 6af332af
展开全部 隐藏空白更改
内联 并排
Showing with 1706 addition and 0 deletion
examples/js/ShaderExtras.js 0 → 100644
浏览文件 @ 408fad19
var ShaderExtras = {
/* -------------------------------------------------------------------------
// Depth-of-field shader with bokeh
// ported from GLSL shader by Martins Upitis
// http://artmartinsh.blogspot.com/2010/02/glsl-lens-blur-filter-with-bokeh.html
------------------------------------------------------------------------- */
'bokeh' : {
uniforms: { tColor: { type: "t", value: 0, texture: null },
tDepth: { type: "t", value: 1, texture: null },
focus: { type: "f", value: 1.0 },
aspect: { type: "f", value: 1.0 },
aperture: { type: "f", value: 0.025 },
maxblur: { type: "f", value: 1.0 },
},
vertex_shader: [
"varying vec2 vUv;",
"void main() {",
"vUv = vec2( uv.x, 1.0 - uv.y );",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragment_shader: [
"varying vec2 vUv;",
"uniform sampler2D tColor;",
"uniform sampler2D tDepth;",
"uniform float maxblur;", // max blur amount
"uniform float aperture;", // aperture - bigger values for shallower depth of field
"uniform float focus;",
"uniform float aspect;",
"void main() {",
"vec2 aspectcorrect = vec2( 1.0, aspect );",
"vec4 depth1 = texture2D( tDepth, vUv );",
"float factor = depth1.x - focus;",
"vec2 dofblur = vec2 ( clamp( factor * aperture, -maxblur, maxblur ) );",
"vec2 dofblur9 = dofblur * 0.9;",
"vec2 dofblur7 = dofblur * 0.7;",
"vec2 dofblur4 = dofblur * 0.4;",
"vec4 col = vec4( 0.0 );",
"col += texture2D( tColor, vUv.xy );",
"col += texture2D( tColor, vUv.xy + ( vec2( 0.0, 0.4 ) * aspectcorrect ) * dofblur );",
"col += texture2D( tColor, vUv.xy + ( vec2( 0.15, 0.37 ) * aspectcorrect ) * dofblur );",
"col += texture2D( tColor, vUv.xy + ( vec2( 0.29, 0.29 ) * aspectcorrect ) * dofblur );",
"col += texture2D( tColor, vUv.xy + ( vec2( -0.37, 0.15 ) * aspectcorrect ) * dofblur );",
"col += texture2D( tColor, vUv.xy + ( vec2( 0.40, 0.0 ) * aspectcorrect ) * dofblur );",
"col += texture2D( tColor, vUv.xy + ( vec2( 0.37, -0.15 ) * aspectcorrect ) * dofblur );",
"col += texture2D( tColor, vUv.xy + ( vec2( 0.29, -0.29 ) * aspectcorrect ) * dofblur );",
"col += texture2D( tColor, vUv.xy + ( vec2( -0.15, -0.37 ) * aspectcorrect ) * dofblur );",
"col += texture2D( tColor, vUv.xy + ( vec2( 0.0, -0.4 ) * aspectcorrect ) * dofblur );",
"col += texture2D( tColor, vUv.xy + ( vec2( -0.15, 0.37 ) * aspectcorrect ) * dofblur );",
"col += texture2D( tColor, vUv.xy + ( vec2( -0.29, 0.29 ) * aspectcorrect ) * dofblur );",
"col += texture2D( tColor, vUv.xy + ( vec2( 0.37, 0.15 ) * aspectcorrect ) * dofblur );",
"col += texture2D( tColor, vUv.xy + ( vec2( -0.4, 0.0 ) * aspectcorrect ) * dofblur );",
"col += texture2D( tColor, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur );",
"col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur );",
"col += texture2D( tColor, vUv.xy + ( vec2( 0.15, -0.37 ) * aspectcorrect ) * dofblur );",
"col += texture2D( tColor, vUv.xy + ( vec2( 0.15, 0.37 ) * aspectcorrect ) * dofblur9 );",
"col += texture2D( tColor, vUv.xy + ( vec2( -0.37, 0.15 ) * aspectcorrect ) * dofblur9 );",
"col += texture2D( tColor, vUv.xy + ( vec2( 0.37, -0.15 ) * aspectcorrect ) * dofblur9 );",
"col += texture2D( tColor, vUv.xy + ( vec2( -0.15, -0.37 ) * aspectcorrect ) * dofblur9 );",
"col += texture2D( tColor, vUv.xy + ( vec2( -0.15, 0.37 ) * aspectcorrect ) * dofblur9 );",
"col += texture2D( tColor, vUv.xy + ( vec2( 0.37, 0.15 ) * aspectcorrect ) * dofblur9 );",
"col += texture2D( tColor, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur9 );",
"col += texture2D( tColor, vUv.xy + ( vec2( 0.15, -0.37 ) * aspectcorrect ) * dofblur9 );",
"col += texture2D( tColor, vUv.xy + ( vec2( 0.29, 0.29 ) * aspectcorrect ) * dofblur7 );",
"col += texture2D( tColor, vUv.xy + ( vec2( 0.40, 0.0 ) * aspectcorrect ) * dofblur7 );",
"col += texture2D( tColor, vUv.xy + ( vec2( 0.29, -0.29 ) * aspectcorrect ) * dofblur7 );",
"col += texture2D( tColor, vUv.xy + ( vec2( 0.0, -0.4 ) * aspectcorrect ) * dofblur7 );",
"col += texture2D( tColor, vUv.xy + ( vec2( -0.29, 0.29 ) * aspectcorrect ) * dofblur7 );",
"col += texture2D( tColor, vUv.xy + ( vec2( -0.4, 0.0 ) * aspectcorrect ) * dofblur7 );",
"col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur7 );",
"col += texture2D( tColor, vUv.xy + ( vec2( 0.0, 0.4 ) * aspectcorrect ) * dofblur7 );",
"col += texture2D( tColor, vUv.xy + ( vec2( 0.29, 0.29 ) * aspectcorrect ) * dofblur4 );",
"col += texture2D( tColor, vUv.xy + ( vec2( 0.4, 0.0 ) * aspectcorrect ) * dofblur4 );",
"col += texture2D( tColor, vUv.xy + ( vec2( 0.29, -0.29 ) * aspectcorrect ) * dofblur4 );",
"col += texture2D( tColor, vUv.xy + ( vec2( 0.0, -0.4 ) * aspectcorrect ) * dofblur4 );",
"col += texture2D( tColor, vUv.xy + ( vec2( -0.29, 0.29 ) * aspectcorrect ) * dofblur4 );",
"col += texture2D( tColor, vUv.xy + ( vec2( -0.4, 0.0 ) * aspectcorrect ) * dofblur4 );",
"col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur4 );",
"col += texture2D( tColor, vUv.xy + ( vec2( 0.0, 0.4 ) * aspectcorrect ) * dofblur4 );",
"gl_FragColor = col / 41.0;",
"gl_FragColor.a = 1.0;",
"}"
].join("\n")
}
};
examples/js/gui/gui.css 0 → 100644
浏览文件 @ 408fad19
#guidat {
position: fixed;
top: 0;
right: 0;
width: auto;
z-index: 1001;
text-align: right;
}
.guidat {
color: #fff;
opacity: 0.97;
text-align: left;
float: right;
margin-right: 20px;
margin-bottom: 20px;
background-color: #fff;
}
.guidat,
.guidat input {
font: 9.5px Lucida Grande, sans-serif;
}
.guidat-controllers {
height: 300px;
overflow-y: auto;
overflow-x: hidden;
background-color: rgba(0,0,0,0.1);
/*
-moz-transition: height .2s ease-out;
-webkit-transition: height .2s ease-out;
transition: height .2s ease-out;
*/
}
a.guidat-toggle {
text-decoration: none;
cursor: pointer;
color: #fff;
background-color: #222;
text-align: center;
display: block;
padding: 5px;
}
a.guidat-toggle:hover {
background-color: #000;
}
.guidat-controller {
padding: 3px;
height: 25px;
clear: left;
border-bottom: 1px solid #222;
background-color: #111;
}
.guidat-controller,
.guidat-controller input,
.guidat-slider-bg,
.guidat-slider-fg {
-moz-transition: background-color 0.15s linear;
-webkit-transition: background-color 0.15s linear;
transition: background-color 0.15s linear;
}
.guidat-controller.boolean:hover,
.guidat-controller.function:hover {
background-color: #000;
}
.guidat-controller input {
float: right;
outline: none;
border: 0;
padding: 4px;
margin-top: 2px;
background-color: #222;
}
.guidat-controller select {
margin-top: 4px;
float: right;
}
.guidat-controller input:hover {
background-color: #444;
}
.guidat-controller input:focus {
background-color: #555;
}
.guidat-controller.number {
border-left: 5px solid #00aeff ;
}
.guidat-controller.string {
border-left: 5px solid #1ed36f;
}
.guidat-controller.string input {
border: 0;
color: #1ed36f;
margin-right: 2px;
width: 148px;
}
.guidat-controller.boolean {
border-left: 5px solid #54396e;
}
.guidat-controller.function {
border-left: 5px solid #e61d5f;
}
.guidat-controller.number input[type=text] {
width: 35px;
margin-left: 5px;
margin-right: 2px;
color: #00aeff;
}
.guidat .guidat-controller.boolean input {
margin-top: 6px;
margin-right: 2px;
font-size: 20px;
}
.guidat-controller:last-child {
border-bottom: none;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.guidat-propertyname {
padding: 5px;
padding-top: 7px;
cursor: default;
display: inline-block;
}
.guidat-slider-bg:hover,
.guidat-slider-bg.active {
background-color: #444;
}
.guidat-slider-bg:hover .guidat-slider-fg,
.guidat-slider-bg.active .guidat-slider-fg {
background-color: #52c8ff;
}
.guidat-slider-bg {
background-color: #222;
cursor: ew-resize;
width: 40%;
margin-top: 2px;
float: right;
height: 21px;
}
.guidat-slider-fg {
background-color: #00aeff;
height: 20px;
}
examples/js/gui/gui.full.js 0 → 100644
浏览文件 @ 408fad19
此差异已折叠。
examples/js/gui/gui.min.js 0 → 100644
浏览文件 @ 408fad19
var GUI=function(){var a=this,b=[],d=[],e=true,j,k,h=0;a=this;var l=false,n=280,o=false,i,f,q=0,s;this.domElement=document.createElement("div");this.domElement.setAttribute("class","guidat");this.domElement.style.width=n+"px";var p=document.createElement("div");p.setAttribute("class","guidat-controllers");p.addEventListener("DOMMouseScroll",function(c){var g=this.scrollTop;if(c.wheelDelta)g+=c.wheelDelta;else if(c.detail)g+=c.detail;c.preventDefault&&c.preventDefault();c.returnValue=false;p.scrollTop=
g},false);p.style.height="0px";var r=document.createElement("a");r.setAttribute("class","guidat-toggle");r.setAttribute("href","#");r.innerHTML="Show Controls";var u=false,C=0,v=false,w,y,x,z,D=function(c){y=w;z=x;w=c.pageY;x=c.pageX;c=w-y;if(!l)if(c>0){l=true;h=i=1;r.innerHTML=f||"Hide Controls"}else return;var g=z-x;if(c>0&&h>k){var m=GUI.map(h,k,k+100,1,0);c*=m}u=true;C+=c;dragDisplacementX+=g;i+=c;n+=g;h+=c;p.style.height=i+"px";n=GUI.constrain(n,240,500);a.domElement.style.width=n+"px";A()};
r.addEventListener("mousedown",function(c){y=w=c.pageY;z=x=c.pageX;v=true;c.preventDefault();dragDisplacementX=C=0;document.addEventListener("mousemove",D,false);return false},false);r.addEventListener("click",function(c){c.preventDefault();return false},false);document.addEventListener("mouseup",function(c){if(v&&!u){a.toggle();a.domElement.style.width=n+1+"px";setTimeout(function(){a.domElement.style.width=n+"px"},1)}if(v&&u){if(dragDisplacementX==0){a.domElement.style.width=n+1+"px";setTimeout(function(){a.domElement.style.width=
n+"px"},1)}if(i>k){clearTimeout(s);i=q=k;t()}else if(p.children.length>=1){var g=p.children[0].offsetHeight;clearTimeout(s);q=Math.round(h/g)*g-1;if(q<=0){a.hide();i=g*2}else{i=q;t()}}}document.removeEventListener("mousemove",D,false);c.preventDefault();return v=u=false},false);this.domElement.appendChild(p);this.domElement.appendChild(r);if(GUI.autoPlace){if(GUI.autoPlaceContainer==null){GUI.autoPlaceContainer=document.createElement("div");GUI.autoPlaceContainer.setAttribute("id","guidat");document.body.appendChild(GUI.autoPlaceContainer)}GUI.autoPlaceContainer.appendChild(this.domElement)}this.autoListenIntervalTime=
1E3/60;var E=function(){j=setInterval(function(){a.listen()},this.autoListenIntervalTime)};this.__defineSetter__("autoListen",function(c){if(e=c)d.length>0&&E();else clearInterval(j)});this.__defineGetter__("autoListen",function(){return e});this.listenTo=function(c){d.length==0&&E();d.push(c)};this.unlistenTo=function(c){for(var g=0;g<d.length;g++)d[g]==c&&d.splice(g,1);d.length<=0&&clearInterval(j)};this.listen=function(c){c=c||d;for(var g in c)c[g].updateDisplay()};this.listenAll=function(){this.listen(b)};
this.autoListen=true;var F=function(c,g){for(var m in b)if(b[m].object==c&&b[m].propertyName==g)return true;return false},G=function(c,g){function m(){return c.apply(this,g)}m.prototype=c.prototype;return new m};this.add=function(){var c=arguments[0],g=arguments[1];F(c,g);var m=c[g];if(m==undefined)GUI.error(c+' either has no property "'+g+'", or the property is inaccessible.');else{c=typeof m;m=I[c];if(m==undefined)GUI.error('Cannot create controller for data type "'+c+'"');else{for(var H=[this],
B=0;B<arguments.length;B++)H.push(arguments[B]);if(m=G(m,H)){p.appendChild(m.domElement);b.push(m);GUI.allControllers.push(m);if(c!="function"&&GUI.saveIndex<GUI.savedValues.length){m.setValue(GUI.savedValues[GUI.saveIndex]);GUI.saveIndex++}A();o||(i=k);return m}else GUI.error('Error creating controller for "'+g+'".')}}};var A=function(){k=0;for(var c in b)k+=b[c].domElement.offsetHeight;p.style.overflowY=k-1>i?"auto":"hidden"},I={number:GUI.NumberController,string:GUI.StringController,"boolean":GUI.BooleanController,
"function":GUI.FunctionController};F=function(c,g){for(var m in b)if(b[m].object==c&&b[m].propertyName==g)return true;return false};G=function(c,g){function m(){return c.apply(this,g)}m.prototype=c.prototype;return new m};this.reset=function(){};this.toggle=function(){l?this.hide():this.show()};this.show=function(){r.innerHTML=f||"Hide Controls";q=i;clearTimeout(s);t();l=true};this.hide=function(){r.innerHTML=f||"Show Controls";q=0;clearTimeout(s);t();l=false};this.name=function(c){f=c;r.innerHTML=
c};this.appearanceVars=function(){return[l,n,i,p.scrollTop]};var t=function(){h+=(q-h)*0.6;if(Math.abs(h-q)<1)h=q;else s=setTimeout(t,1E3/30);p.style.height=Math.round(h)+"px";A()};if(GUI.guiIndex<GUI.savedAppearanceVars.length){n=parseInt(GUI.savedAppearanceVars[GUI.guiIndex][1]);a.domElement.style.width=n+"px";i=parseInt(GUI.savedAppearanceVars[GUI.guiIndex][2]);o=true;if(eval(GUI.savedAppearanceVars[GUI.guiIndex][0])==true){h=i;var J=GUI.savedAppearanceVars[GUI.guiIndex][3];setTimeout(function(){p.scrollTop=
J},0);if(GUI.scrollTop>-1)document.body.scrollTop=GUI.scrollTop;q=i;this.show()}GUI.guiIndex++}GUI.allGuis.push(this)};GUI.autoPlace=true;GUI.autoPlaceContainer=null;GUI.allControllers=[];GUI.allGuis=[];GUI.saveURL=function(){title=window.location;url=GUI.replaceGetVar("saveString",GUI.getSaveString());window.location=url};GUI.scrollTop=-1;
GUI.load=function(a){a=a.split(",");var b=parseInt(a[0]);GUI.scrollTop=parseInt(a[1]);for(var d=0;d<b;d++){var e=a.splice(2,4);GUI.savedAppearanceVars.push(e)}GUI.savedValues=a.splice(2,a.length)};GUI.savedValues=[];GUI.savedAppearanceVars=[];
GUI.getSaveString=function(){var a=[];a.push(GUI.allGuis.length);a.push(document.body.scrollTop);for(var b in GUI.allGuis)for(var d=GUI.allGuis[b].appearanceVars(),e=0;e<d.length;e++)a.push(d[e]);for(b in GUI.allControllers)if(GUI.allControllers[b].type!="function"){d=GUI.allControllers[b].getValue();if(GUI.allControllers[b].type=="number")d=GUI.roundToDecimal(d,4);a.push(d)}return a.join(",")};
GUI.getVarFromURL=function(a){for(var b,d=window.location.href.slice(window.location.href.indexOf("?")+1).split("&"),e=0;e<d.length;e++){b=d[e].split("=");if(b!=undefined)if(b[0]==a)return b[1]}return null};
GUI.replaceGetVar=function(a,b){for(var d,e=window.location.href,j=window.location.href.slice(window.location.href.indexOf("?")+1).split("&"),k=0;k<j.length;k++){d=j[k].split("=");if(d!=undefined)if(d[0]==a)return e.replace(d[1],b)}if(window.location.href.indexOf("?")!=-1)return e+"&"+a+"="+b;return e+"?"+a+"="+b};GUI.saveIndex=0;GUI.guiIndex=0;GUI.showSaveString=function(){alert(GUI.getSaveString())};
GUI.makeUnselectable=function(a){a.onselectstart=function(){return false};a.style.MozUserSelect="none";a.style.KhtmlUserSelect="none";a.unselectable="on"};GUI.makeSelectable=function(a){a.onselectstart=function(){};a.style.MozUserSelect="auto";a.style.KhtmlUserSelect="auto";a.unselectable="off"};GUI.map=function(a,b,d,e,j){return a=e+(j-e)*((a-b)/(d-b))};GUI.constrain=function(a,b,d){if(a<b)a=b;else if(a>d)a=d;return a};
GUI.error=function(a){typeof console.error=="function"&&console.error("[GUI ERROR] "+a)};GUI.roundToDecimal=function(a,b){var d=Math.pow(10,b);return Math.round(a*d)/d};GUI.extendController=function(a){a.prototype=new GUI.Controller;a.prototype.constructor=a};GUI.getVarFromURL("saveString")!=null&&GUI.load(GUI.getVarFromURL("saveString"));
GUI.Slider=function(a,b,d,e,j){b=b;d=d;e=e;var k=false,h=this;this.domElement=document.createElement("div");this.domElement.setAttribute("class","guidat-slider-bg");this.fg=document.createElement("div");this.fg.setAttribute("class","guidat-slider-fg");this.domElement.appendChild(this.fg);this.__defineSetter__("value",function(o){this.fg.style.width=GUI.map(o,b,d,0,100)+"%"});var l=function(o){if(k){var i;i=h.domElement;var f=curtop=0;if(i.offsetParent){do{f+=i.offsetLeft;curtop+=i.offsetTop}while(i=
i.offsetParent);i=[f,curtop]}else i=void 0;o=GUI.map(o.pageX,i[0],i[0]+h.domElement.offsetWidth,b,d);o=Math.round(o/e)*e;a.setValue(o)}};this.domElement.addEventListener("mousedown",function(o){k=true;h.domElement.setAttribute("class","guidat-slider-bg active");h.fg.setAttribute("class","guidat-slider-fg active");l(o);document.addEventListener("mouseup",n,false)},false);var n=function(){h.domElement.setAttribute("class","guidat-slider-bg");h.fg.setAttribute("class","guidat-slider-fg");k=false;a.finishChangeFunction!=
null&&a.finishChangeFunction.call(this,a.getValue());document.removeEventListener("mouseup",n,false)};document.addEventListener("mousemove",l,false);this.value=j};
GUI.Controller=function(){this.parent=arguments[0];this.object=arguments[1];this.propertyName=arguments[2];if(arguments.length>0)this.initialValue=this.propertyName[this.object];this.domElement=document.createElement("div");this.domElement.setAttribute("class","guidat-controller "+this.type);this.propertyNameElement=document.createElement("span");this.propertyNameElement.setAttribute("class","guidat-propertyname");this.name(this.propertyName);this.domElement.appendChild(this.propertyNameElement);
GUI.makeUnselectable(this.domElement)};GUI.Controller.prototype.changeFunction=null;GUI.Controller.prototype.finishChangeFunction=null;GUI.Controller.prototype.name=function(a){this.propertyNameElement.innerHTML=a;return this};GUI.Controller.prototype.reset=function(){this.setValue(this.initialValue);return this};GUI.Controller.prototype.listen=function(){this.parent.listenTo(this);return this};GUI.Controller.prototype.unlisten=function(){this.parent.unlistenTo(this);return this};
GUI.Controller.prototype.setValue=function(a){this.object[this.propertyName]=a;this.changeFunction!=null&&this.changeFunction.call(this,a);this.updateDisplay();return this};GUI.Controller.prototype.getValue=function(){return this.object[this.propertyName]};GUI.Controller.prototype.updateDisplay=function(){};GUI.Controller.prototype.onChange=function(a){this.changeFunction=a;return this};GUI.Controller.prototype.onFinishChange=function(a){this.finishChangeFunction=a;return this};
GUI.Controller.prototype.options=function(){var a=this,b=document.createElement("select");if(arguments.length==1){var d=arguments[0],e;for(e in d){var j=document.createElement("option");j.innerHTML=e;j.setAttribute("value",d[e]);b.appendChild(j)}}else for(e=0;e<arguments.length;e++){j=document.createElement("option");j.innerHTML=arguments[e];j.setAttribute("value",arguments[e]);b.appendChild(j)}b.addEventListener("change",function(){a.setValue(this.value);a.finishChangeFunction!=null&&a.finishChangeFunction.call(this,
a.getValue())});a.domElement.appendChild(b);return this};
GUI.BooleanController=function(){this.type="boolean";GUI.Controller.apply(this,arguments);var a=this,b=document.createElement("input");b.setAttribute("type","checkbox");this.domElement.addEventListener("click",function(d){b.checked=!b.checked;d.preventDefault();a.setValue(b.checked)},false);b.addEventListener("mouseup",function(){b.checked=!b.checked},false);this.domElement.style.cursor="pointer";this.propertyNameElement.style.cursor="pointer";this.domElement.appendChild(b);this.updateDisplay=function(){b.checked=
a.getValue()};this.setValue=function(d){if(typeof d!="boolean")try{d=eval(d)}catch(e){}return GUI.Controller.prototype.setValue.call(this,d)}};GUI.extendController(GUI.BooleanController);
GUI.FunctionController=function(){this.type="function";var a=this;GUI.Controller.apply(this,arguments);this.domElement.addEventListener("click",function(){a.fire()},false);this.domElement.style.cursor="pointer";this.propertyNameElement.style.cursor="pointer";var b=null;this.onFire=function(d){b=d;return this};this.fire=function(){b!=null&&b.call(this);a.object[a.propertyName].call(a.object)}};GUI.extendController(GUI.FunctionController);
GUI.NumberController=function(){this.type="number";GUI.Controller.apply(this,arguments);var a=this,b=false,d=false,e=py=0,j=arguments[3],k=arguments[4],h=arguments[5];h||(h=j!=undefined&&k!=undefined?(k-j)*0.01:1);var l=document.createElement("input");l.setAttribute("id",this.propertyName);l.setAttribute("type","text");l.setAttribute("value",this.getValue());h&&l.setAttribute("step",h);this.domElement.appendChild(l);var n;if(j!=undefined&&k!=undefined){n=new GUI.Slider(this,j,k,h,this.getValue());
this.domElement.appendChild(n.domElement)}l.addEventListener("blur",function(){var f=parseFloat(this.value);console.log(f);isNaN(f)||a.setValue(f)},false);l.addEventListener("mousewheel",function(f){f.preventDefault();a.setValue(a.getValue()+Math.abs(f.wheelDeltaY)/f.wheelDeltaY*h);return false},false);l.addEventListener("mousedown",function(f){py=e=f.pageY;d=true;document.addEventListener("mousemove",i,false);document.addEventListener("mouseup",o,false)},false);l.addEventListener("keydown",function(f){switch(f.keyCode){case 38:f=
a.getValue()+h;a.setValue(f);break;case 40:f=a.getValue()-h;a.setValue(f)}},false);var o=function(){document.removeEventListener("mousemove",i,false);GUI.makeSelectable(a.parent.domElement);GUI.makeSelectable(l);if(d&&!b){l.focus();l.select()}d=b=false;a.finishChangeFunction!=null&&a.finishChangeFunction.call(this,a.getValue());document.removeEventListener("mouseup",o,false)},i=function(f){b=true;f.preventDefault();GUI.makeUnselectable(a.parent.domElement);GUI.makeUnselectable(l);py=e;e=f.pageY;f=
py-e;f=a.getValue()+f*h;a.setValue(f);return false};this.options=function(){a.noSlider();a.domElement.removeChild(l);return GUI.Controller.prototype.options.apply(this,arguments)};this.noSlider=function(){n&&a.domElement.removeChild(n.domElement);return this};this.setValue=function(f){f=parseFloat(f);if(j!=undefined&&f<=j)f=j;else if(k!=undefined&&f>=k)f=k;return GUI.Controller.prototype.setValue.call(this,f)};this.updateDisplay=function(){l.value=GUI.roundToDecimal(a.getValue(),4);if(n)n.value=a.getValue()}};
GUI.extendController(GUI.NumberController);
GUI.StringController=function(){this.type="string";var a=this;GUI.Controller.apply(this,arguments);var b=document.createElement("input"),d=this.getValue();b.setAttribute("value",d);b.setAttribute("spellcheck","false");this.domElement.addEventListener("mouseup",function(){b.focus();b.select()},false);b.addEventListener("keyup",function(e){e.keyCode==13&&a.finishChangeFunction!=null&&a.finishChangeFunction.call(this,a.getValue());a.setValue(b.value)},false);b.addEventListener("blur",function(){a.finishChangeFunction!=
null&&a.finishChangeFunction.call(this,a.getValue())},false);this.updateDisplay=function(){b.value=a.getValue()};this.options=function(){a.domElement.removeChild(b);return GUI.Controller.prototype.options.apply(this,arguments)};this.domElement.appendChild(b)};GUI.extendController(GUI.StringController);
examples/webgl_postprocessing_dof.html 0 → 100644
浏览文件 @ 408fad19
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - postprocessing - depth-of-field - webgl</title>
<meta charset="utf-8">
<style type="text/css">
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
text-align:center;
}
a {
color:#0078ff;
}
#info {
color:#fff;
position: absolute;
top: 0px; width: 100%;
padding: 5px;
z-index:100;
}
</style>
</head>
<body>
<script type="text/javascript" src="../build/ThreeExtras.js"></script>
<script type="text/javascript" src="js/ShaderExtras.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<link href="js/gui/gui.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/gui/gui.min.js"></script>
<div id="info">
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl depth-of-field with bokeh example -
shader by <a href="http://artmartinsh.blogspot.com/2010/02/glsl-lens-blur-filter-with-bokeh.html">Martins Upitis</a>
</div>
<script type="text/javascript">
if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
window.onload = init;
var container, stats;
var camera, scene, renderer,
materials = [], objects = [],
singleMaterial, zmaterial = [],
parameters, i, j, k, h, color, x, y, z, s, n, nobjects,
material_depth, material_base, cubeMaterial;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var height = window.innerHeight - 300;
var postprocessing = {
enabled : true
};
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.Camera( 70, window.innerWidth / height, 1, 3000 );
camera.position.z = 200;
scene = new THREE.Scene();
/*
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 0.5, 1 );
light.position.normalize();
scene.addLight( light );
*/
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, height );
container.appendChild( renderer.domElement );
material_depth = new THREE.MeshDepthMaterial();
var path = "textures/cube/SwedishRoyalCastle/";
var format = '.jpg';
var urls = [
path + 'px' + format, path + 'nx' + format,
path + 'py' + format, path + 'ny' + format,
path + 'pz' + format, path + 'nz' + format
];
var images = ImageUtils.loadArray( urls );
var reflectionCube = new THREE.Texture( images );
parameters = { color: 0xff1100, env_map: reflectionCube, combine: THREE.MixOperationa, reflectivity: 0.3, shading: THREE.FlatShading };
//parameters = { color: 0xff1100, shading: THREE.FlatShading };
cubeMaterial = new THREE.MeshBasicMaterial( parameters );
singleMaterial = false;
if( singleMaterial ) zmaterial = [ cubeMaterial ];
//var geo = new Cube( 1, 1, 1 );
var geo = new Sphere( 1, 20, 10 );
//var geo = new Icosahedron( 2 );
material_base = cubeMaterial;
renderer.initMaterial( material_base, scene.lights, scene.fog );
var xgrid = 14,
ygrid = 9,
zgrid = 14;
nobjects = xgrid * ygrid * zgrid;
c = 0;
//var s = 0.25;
var s = 60;
for ( i = 0; i < xgrid; i++ )
for ( j = 0; j < ygrid; j++ )
for ( k = 0; k < zgrid; k++ ) {
materials[c] = new THREE.MeshBasicMaterial( parameters );
materials[c].program = material_base.program;
materials[c].uniforms = Uniforms.clone( THREE.ShaderLib[ 'basic' ].uniforms );
if ( singleMaterial )
mesh = new THREE.Mesh( geo, zmaterial );
else
mesh = new THREE.Mesh( geo, materials[c] );
x = 200 * ( i - xgrid/2 );
y = 200 * ( j - ygrid/2 );
z = 200 * ( k - zgrid/2 );
mesh.position.set( x, y, z );
mesh.scale.set( s, s, s );
mesh.matrixAutoUpdate = false;
mesh.updateMatrix();
scene.addObject( mesh );
objects.push( mesh );
c++;
}
scene.matrixAutoUpdate = false;
initPostprocessing();
renderer.autoClear = false;
renderer.domElement.style.position = 'absolute';
renderer.domElement.style.top = "150px";
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
//container.appendChild( stats.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
var effectController = {
focus: 1.0,
aperture: 0.025,
maxblur: 1.0
};
var matChanger = function( ) {
postprocessing.bokeh_uniforms["focus"].value = effectController.focus;
postprocessing.bokeh_uniforms["aperture"].value = effectController.aperture;
postprocessing.bokeh_uniforms["maxblur"].value = effectController.maxblur;
};
var gui = new GUI();
gui.add( effectController, "focus", 0.0, 3.0, 0.025 ).onChange( matChanger );
gui.add( effectController, "aperture", 0.001, 0.2, 0.001 ).onChange( matChanger );
gui.add( effectController, "maxblur", 0.0, 3.0, 0.025 ).onChange( matChanger );
loop();
}
function onDocumentMouseMove( event ) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
function onDocumentTouchStart( event ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
function onDocumentTouchMove( event ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
function initPostprocessing() {
postprocessing.scene = new THREE.Scene();
postprocessing.camera = new THREE.Camera();
postprocessing.camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
postprocessing.camera.position.z = 100;
var pars = { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter };
postprocessing.rtTextureDepth = new THREE.RenderTarget( window.innerWidth, height, pars );
postprocessing.rtTextureColor = new THREE.RenderTarget( window.innerWidth, height, pars );
var bokeh_shader = ShaderExtras["bokeh"];
postprocessing.bokeh_uniforms = Uniforms.clone( bokeh_shader.uniforms );
postprocessing.bokeh_uniforms["tColor"].texture = postprocessing.rtTextureColor;
postprocessing.bokeh_uniforms["tDepth"].texture = postprocessing.rtTextureDepth;
postprocessing.bokeh_uniforms["focus"].value = 1.1;
postprocessing.bokeh_uniforms["aspect"].value = window.innerWidth / height;
postprocessing.materialBokeh = new THREE.MeshShaderMaterial( {
uniforms: postprocessing.bokeh_uniforms,
vertex_shader: bokeh_shader.vertex_shader,
fragment_shader: bokeh_shader.fragment_shader
} );
postprocessing.quad = new THREE.Mesh( new Plane( window.innerWidth, window.innerHeight ), postprocessing.materialBokeh );
postprocessing.quad.position.z = -500;
postprocessing.scene.addObject( postprocessing.quad );
}
function loop() {
requestAnimationFrame( loop, renderer.domElement );
var time = new Date().getTime() * 0.00005;
camera.position.x += ( mouseX - camera.position.x ) * 0.036;
camera.position.y += ( - (mouseY) - camera.position.y ) * 0.036;
for( i = 0; i < nobjects; i++ ) {
h = ( 360 * ( i/nobjects + time ) % 360 ) / 360;
//materials[i].color.setHSV( h, 0.5 + 0.5 * ( i % 20 / 20 ), 1 );
materials[i].color.setHSV( h, 1, 1 );
}
if ( postprocessing.enabled ) {
renderer.clear();
// Render scene into texture
if ( singleMaterial )
zmaterial[0] = cubeMaterial;
else
for( i = 0; i < nobjects; i++ ) objects[i].materials = [ materials[i] ];
renderer.render( scene, camera, postprocessing.rtTextureColor );
// Render depth into texture
if ( singleMaterial )
zmaterial[0] = material_depth;
else
for( i = 0; i < nobjects; i++ ) objects[i].materials = [ material_depth ];
renderer.render( scene, camera, postprocessing.rtTextureDepth );
// Render bokeh composite
renderer.render( postprocessing.scene, postprocessing.camera );
} else {
renderer.clear();
renderer.render( scene, camera );
}
stats.update();
}
</script>
</body>
</html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或