Skip to content

Commit c265ffd

Browse files
vanruescvanruesc
committed
Update demos
1 parent 07be2ec commit c265ffd

25 files changed

+201
-199
lines changed

‎manual/assets/js/src/demos/bloom.js‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -161,24 +161,24 @@ window.addEventListener("load", () => load().then((assets) => {
161161

162162
const fpsMeter = new FPSMeter();
163163
const pane = new Pane({ container: container.querySelector(".tp") });
164-
pane.addMonitor(fpsMeter, "fps", { label: "FPS" });
164+
pane.addBinding(fpsMeter, "fps", { readonly: true, label: "FPS" });
165165

166166
const folder = pane.addFolder({ title: "Settings" });
167-
folder.addInput(effect, "intensity", { min: 0, max: 10, step: 0.01 });
168-
folder.addInput(effect.mipmapBlurPass, "radius", { min: 0, max: 1, step: 1e-3 });
169-
folder.addInput(effect.mipmapBlurPass, "levels", { min: 1, max: 9, step: 1 });
167+
folder.addBinding(effect, "intensity", { min: 0, max: 10, step: 0.01 });
168+
folder.addBinding(effect.mipmapBlurPass, "radius", { min: 0, max: 1, step: 1e-3 });
169+
folder.addBinding(effect.mipmapBlurPass, "levels", { min: 1, max: 9, step: 1 });
170170

171171
let subfolder = folder.addFolder({ title: "Luminance Filter" });
172-
subfolder.addInput(effect.luminancePass, "enabled");
173-
subfolder.addInput(effect.luminanceMaterial, "threshold", { min: 0, max: 1, step: 0.01 });
174-
subfolder.addInput(effect.luminanceMaterial, "smoothing", { min: 0, max: 1, step: 0.01 });
172+
subfolder.addBinding(effect.luminancePass, "enabled");
173+
subfolder.addBinding(effect.luminanceMaterial, "threshold", { min: 0, max: 1, step: 0.01 });
174+
subfolder.addBinding(effect.luminanceMaterial, "smoothing", { min: 0, max: 1, step: 0.01 });
175175

176176
subfolder = folder.addFolder({ title: "Selection" });
177-
subfolder.addInput(effect, "inverted");
178-
subfolder.addInput(effect, "ignoreBackground");
177+
subfolder.addBinding(effect, "inverted");
178+
subfolder.addBinding(effect, "ignoreBackground");
179179

180-
folder.addInput(effect.blendMode.opacity, "value", { label: "opacity", min: 0, max: 1, step: 0.01 });
181-
folder.addInput(effect.blendMode, "blendFunction", { options: BlendFunction });
180+
folder.addBinding(effect.blendMode.opacity, "value", { label: "opacity", min: 0, max: 1, step: 0.01 });
181+
folder.addBinding(effect.blendMode, "blendFunction", { options: BlendFunction });
182182

183183
// Resize Handler
184184

‎manual/assets/js/src/demos/blur.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ window.addEventListener("load", () => load().then((assets) => {
112112

113113
const fpsMeter = new FPSMeter();
114114
const pane = new Pane({ container: container.querySelector(".tp") });
115-
pane.addMonitor(fpsMeter, "fps", { label: "FPS" });
115+
pane.addBinding(fpsMeter, "fps", { readonly: true, label: "FPS" });
116116

117117
const folder = pane.addFolder({ title: "Settings" });
118118
const tab = folder.addTab({
@@ -129,7 +129,7 @@ window.addEventListener("load", () => load().then((assets) => {
129129

130130
});
131131

132-
tab.pages[0].addInput(gaussianBlurPass.blurMaterial, "kernelSize", {
132+
tab.pages[0].addBinding(gaussianBlurPass.blurMaterial, "kernelSize", {
133133
options: {
134134
"7x7": 7,
135135
"15x15": 15,
@@ -141,13 +141,13 @@ window.addEventListener("load", () => load().then((assets) => {
141141
}
142142
});
143143

144-
tab.pages[0].addInput(gaussianBlurPass.blurMaterial, "scale", { min: 0, max: 2, step: 0.01 });
145-
tab.pages[0].addInput(gaussianBlurPass.resolution, "scale", { label: "resolution", min: 0.5, max: 1, step: 0.05 });
146-
tab.pages[0].addInput(gaussianBlurPass, "iterations", { min: 1, max: 8, step: 1 });
144+
tab.pages[0].addBinding(gaussianBlurPass.blurMaterial, "scale", { min: 0, max: 2, step: 0.01 });
145+
tab.pages[0].addBinding(gaussianBlurPass.resolution, "scale", { label: "resolution", min: 0.5, max: 1, step: 0.05 });
146+
tab.pages[0].addBinding(gaussianBlurPass, "iterations", { min: 1, max: 8, step: 1 });
147147

148-
tab.pages[1].addInput(kawaseBlurPass.blurMaterial, "kernelSize", { options: KernelSize });
149-
tab.pages[1].addInput(kawaseBlurPass.blurMaterial, "scale", { min: 0, max: 2, step: 0.01 });
150-
tab.pages[1].addInput(kawaseBlurPass.resolution, "scale", { label: "resolution", min: 0.5, max: 1, step: 0.05 });
148+
tab.pages[1].addBinding(kawaseBlurPass.blurMaterial, "kernelSize", { options: KernelSize });
149+
tab.pages[1].addBinding(kawaseBlurPass.blurMaterial, "scale", { min: 0, max: 2, step: 0.01 });
150+
tab.pages[1].addBinding(kawaseBlurPass.resolution, "scale", { label: "resolution", min: 0.5, max: 1, step: 0.05 });
151151

152152
// Resize Handler
153153

‎manual/assets/js/src/demos/brightness-contrast.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -97,13 +97,13 @@ window.addEventListener("load", () => load().then((assets) => {
9797

9898
const fpsMeter = new FPSMeter();
9999
const pane = new Pane({ container: container.querySelector(".tp") });
100-
pane.addMonitor(fpsMeter, "fps", { label: "FPS" });
100+
pane.addBinding(fpsMeter, "fps", { readonly: true, label: "FPS" });
101101

102102
const folder = pane.addFolder({ title: "Settings" });
103-
folder.addInput(effect, "brightness", { min: -1, max: 1, step: 1e-4 });
104-
folder.addInput(effect, "contrast", { min: -1, max: 1, step: 1e-4 });
105-
folder.addInput(effect.blendMode.opacity, "value", { label: "opacity", min: 0, max: 1, step: 0.01 });
106-
folder.addInput(effect.blendMode, "blendFunction", { options: BlendFunction });
103+
folder.addBinding(effect, "brightness", { min: -1, max: 1, step: 1e-4 });
104+
folder.addBinding(effect, "contrast", { min: -1, max: 1, step: 1e-4 });
105+
folder.addBinding(effect.blendMode.opacity, "value", { label: "opacity", min: 0, max: 1, step: 0.01 });
106+
folder.addBinding(effect.blendMode, "blendFunction", { options: BlendFunction });
107107

108108
// Resize Handler
109109

‎manual/assets/js/src/demos/chromatic-aberration.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -104,12 +104,12 @@ window.addEventListener("load", () => load().then((assets) => {
104104

105105
const fpsMeter = new FPSMeter();
106106
const pane = new Pane({ container: container.querySelector(".tp") });
107-
pane.addMonitor(fpsMeter, "fps", { label: "FPS" });
107+
pane.addBinding(fpsMeter, "fps", { readonly: true, label: "FPS" });
108108

109109
const folder = pane.addFolder({ title: "Settings" });
110-
folder.addInput(effect, "radialModulation");
111-
folder.addInput(effect, "modulationOffset", { min: 0, max: 1.5, step: 1e-2 });
112-
folder.addInput(effect, "offset", {
110+
folder.addBinding(effect, "radialModulation");
111+
folder.addBinding(effect, "modulationOffset", { min: 0, max: 1.5, step: 1e-2 });
112+
folder.addBinding(effect, "offset", {
113113
x: { min: -1e-2, max: 1e-2, step: 1e-5 },
114114
y: { min: -1e-2, max: 1e-2, step: 1e-5, inverted: true }
115115
});

‎manual/assets/js/src/demos/color-depth.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -100,12 +100,12 @@ window.addEventListener("load", () => load().then((assets) => {
100100

101101
const fpsMeter = new FPSMeter();
102102
const pane = new Pane({ container: container.querySelector(".tp") });
103-
pane.addMonitor(fpsMeter, "fps", { label: "FPS" });
103+
pane.addBinding(fpsMeter, "fps", { readonly: true, label: "FPS" });
104104

105105
const folder = pane.addFolder({ title: "Settings" });
106-
folder.addInput(effect, "bitDepth", { min: 1, max: 32, step: 1 });
107-
folder.addInput(effect.blendMode.opacity, "value", { label: "opacity", min: 0, max: 1, step: 0.01 });
108-
folder.addInput(effect.blendMode, "blendFunction", { options: BlendFunction });
106+
folder.addBinding(effect, "bitDepth", { min: 1, max: 32, step: 1 });
107+
folder.addBinding(effect.blendMode.opacity, "value", { label: "opacity", min: 0, max: 1, step: 0.01 });
108+
folder.addBinding(effect.blendMode, "blendFunction", { options: BlendFunction });
109109

110110
// Resize Handler
111111

‎manual/assets/js/src/demos/depth-of-field.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -121,18 +121,18 @@ window.addEventListener("load", () => load().then((assets) => {
121121
const fpsMeter = new FPSMeter();
122122
const cocMaterial = effect.cocMaterial;
123123
const pane = new Pane({ container: container.querySelector(".tp") });
124-
pane.addMonitor(fpsMeter, "fps", { label: "FPS" });
124+
pane.addBinding(fpsMeter, "fps", { readonly: true, label: "FPS" });
125125

126126
const folder = pane.addFolder({ title: "Settings" });
127-
folder.addInput(cocDebugPass, "enabled", { label: "debug" });
128-
folder.addInput(effect.resolution, "scale", { label: "resolution", min: 0.5, max: 1, step: 0.05 });
129-
130-
folder.addInput(effect.blurPass, "kernelSize", { options: KernelSize });
131-
folder.addInput(cocMaterial, "worldFocusDistance", { min: 0, max: 50, step: 0.1 });
132-
folder.addInput(cocMaterial, "worldFocusRange", { min: 0, max: 20, step: 0.1 });
133-
folder.addInput(effect, "bokehScale", { min: 0, max: 7, step: 1e-2 });
134-
folder.addInput(effect.blendMode.opacity, "value", { label: "opacity", min: 0, max: 1, step: 0.01 });
135-
folder.addInput(effect.blendMode, "blendFunction", { options: BlendFunction });
127+
folder.addBinding(cocDebugPass, "enabled", { label: "debug" });
128+
folder.addBinding(effect.resolution, "scale", { label: "resolution", min: 0.5, max: 1, step: 0.05 });
129+
130+
folder.addBinding(effect.blurPass, "kernelSize", { options: KernelSize });
131+
folder.addBinding(cocMaterial, "worldFocusDistance", { min: 0, max: 50, step: 0.1 });
132+
folder.addBinding(cocMaterial, "worldFocusRange", { min: 0, max: 20, step: 0.1 });
133+
folder.addBinding(effect, "bokehScale", { min: 0, max: 7, step: 1e-2 });
134+
folder.addBinding(effect.blendMode.opacity, "value", { label: "opacity", min: 0, max: 1, step: 0.01 });
135+
folder.addBinding(effect.blendMode, "blendFunction", { options: BlendFunction });
136136

137137
// Resize Handler
138138

‎manual/assets/js/src/demos/depth-picking.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ window.addEventListener("load", () => load().then((assets) => {
141141

142142
const fpsMeter = new FPSMeter();
143143
const pane = new Pane({ container: container.querySelector(".tp") });
144-
pane.addMonitor(fpsMeter, "fps", { label: "FPS" });
144+
pane.addBinding(fpsMeter, "fps", { readonly: true, label: "FPS" });
145145

146146
// Resize Handler
147147

‎manual/assets/js/src/demos/dot-screen.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -100,13 +100,13 @@ window.addEventListener("load", () => load().then((assets) => {
100100

101101
const fpsMeter = new FPSMeter();
102102
const pane = new Pane({ container: container.querySelector(".tp") });
103-
pane.addMonitor(fpsMeter, "fps", { label: "FPS" });
103+
pane.addBinding(fpsMeter, "fps", { readonly: true, label: "FPS" });
104104

105105
const folder = pane.addFolder({ title: "Settings" });
106-
folder.addInput(effect, "angle", { min: 0, max: Math.PI, step: 1e-3 });
107-
folder.addInput(effect, "scale", { min: 0, max: 2, step: 1e-3 });
108-
folder.addInput(effect.blendMode.opacity, "value", { label: "opacity", min: 0, max: 1, step: 0.01 });
109-
folder.addInput(effect.blendMode, "blendFunction", { options: BlendFunction });
106+
folder.addBinding(effect, "angle", { min: 0, max: Math.PI, step: 1e-3 });
107+
folder.addBinding(effect, "scale", { min: 0, max: 2, step: 1e-3 });
108+
folder.addBinding(effect.blendMode.opacity, "value", { label: "opacity", min: 0, max: 1, step: 0.01 });
109+
folder.addBinding(effect.blendMode, "blendFunction", { options: BlendFunction });
110110

111111
// Resize Handler
112112

‎manual/assets/js/src/demos/fxaa.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -102,16 +102,16 @@ window.addEventListener("load", () => load().then((assets) => {
102102

103103
const fpsMeter = new FPSMeter();
104104
const pane = new Pane({ container: container.querySelector(".tp") });
105-
pane.addMonitor(fpsMeter, "fps", { label: "FPS" });
105+
pane.addBinding(fpsMeter, "fps", { readonly: true, label: "FPS" });
106106

107107
const folder = pane.addFolder({ title: "Settings" });
108-
folder.addInput(effect, "samples", { min: 0, max: 24, step: 1 });
109-
folder.addInput(effect, "minEdgeThreshold", { min: 0.01, max: 0.3, step: 1e-4 });
110-
folder.addInput(effect, "maxEdgeThreshold", { min: 0.01, max: 0.3, step: 1e-4 });
111-
folder.addInput(effect, "subpixelQuality", { min: 0, max: 1.0, step: 1e-4 });
108+
folder.addBinding(effect, "samples", { min: 0, max: 24, step: 1 });
109+
folder.addBinding(effect, "minEdgeThreshold", { min: 0.01, max: 0.3, step: 1e-4 });
110+
folder.addBinding(effect, "maxEdgeThreshold", { min: 0.01, max: 0.3, step: 1e-4 });
111+
folder.addBinding(effect, "subpixelQuality", { min: 0, max: 1.0, step: 1e-4 });
112112

113-
folder.addInput(effect.blendMode.opacity, "value", { label: "opacity", min: 0, max: 1, step: 0.01 });
114-
folder.addInput(effect.blendMode, "blendFunction", { options: BlendFunction });
113+
folder.addBinding(effect.blendMode.opacity, "value", { label: "opacity", min: 0, max: 1, step: 0.01 });
114+
folder.addBinding(effect.blendMode, "blendFunction", { options: BlendFunction });
115115

116116
// Resize Handler
117117

‎manual/assets/js/src/demos/glitch.js‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -119,23 +119,23 @@ window.addEventListener("load", () => load().then((assets) => {
119119
const fpsMeter = new FPSMeter();
120120
const noiseTexture = new NoiseTexture(64, 64, RGBAFormat);
121121
const pane = new Pane({ container: container.querySelector(".tp") });
122-
pane.addMonitor(fpsMeter, "fps", { label: "FPS" });
122+
pane.addBinding(fpsMeter, "fps", { readonly: true, label: "FPS" });
123123

124124
const params = {
125125
"custom pattern": true
126126
};
127127

128128
const folder = pane.addFolder({ title: "Settings" });
129-
folder.addInput(effect, "mode", { options: GlitchMode });
130-
folder.addInput(effect, "minDelay", { min: 0, max: 2, step: 0.01 });
131-
folder.addInput(effect, "maxDelay", { min: 2, max: 4, step: 0.01 });
132-
folder.addInput(effect, "minDuration", { min: 0, max: 0.6, step: 0.01 });
133-
folder.addInput(effect, "maxDuration", { min: 0.6, max: 1.8, step: 0.01 });
134-
folder.addInput(effect, "minStrength", { min: 0, max: 1, step: 0.01 });
135-
folder.addInput(effect, "maxStrength", { min: 0, max: 1, step: 0.01 });
136-
folder.addInput(effect, "ratio", { min: 0, max: 1, step: 0.01 });
137-
folder.addInput(effect, "columns", { min: 0, max: 0.5, step: 0.01 });
138-
folder.addInput(params, "custom pattern")
129+
folder.addBinding(effect, "mode", { options: GlitchMode });
130+
folder.addBinding(effect, "minDelay", { min: 0, max: 2, step: 0.01 });
131+
folder.addBinding(effect, "maxDelay", { min: 2, max: 4, step: 0.01 });
132+
folder.addBinding(effect, "minDuration", { min: 0, max: 0.6, step: 0.01 });
133+
folder.addBinding(effect, "maxDuration", { min: 0.6, max: 1.8, step: 0.01 });
134+
folder.addBinding(effect, "minStrength", { min: 0, max: 1, step: 0.01 });
135+
folder.addBinding(effect, "maxStrength", { min: 0, max: 1, step: 0.01 });
136+
folder.addBinding(effect, "ratio", { min: 0, max: 1, step: 0.01 });
137+
folder.addBinding(effect, "columns", { min: 0, max: 0.5, step: 0.01 });
138+
folder.addBinding(params, "custom pattern")
139139
.on("change", (e) => effect.perturbationMap = (e.value ? assets.get("noise") : noiseTexture));
140140

141141
// Resize Handler

0 commit comments

Comments
 (0)