Skip to content

Commit

Permalink
Update demos
Browse files Browse the repository at this point in the history
  • Loading branch information
@vanruesc
vanruesc committed Feb 10, 2024
1 parent 5c15cb0 commit 47f0a19
Show file tree
Hide file tree
Showing 23 changed files with 172 additions and 129 deletions.
17 changes: 9 additions & 8 deletions manual/assets/js/src/demos/bloom.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,13 +94,6 @@ window.addEventListener("load", () => void load().then((assets) => {

// Post Processing

const pipeline = new RenderPipeline(renderer);
pipeline.add(new ClearPass());
pipeline.add(new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType,
samples: 4
}));

const effect = new BloomEffect({
luminanceThreshold: 1.0,
luminanceSmoothing: 0.03,
Expand All @@ -109,7 +102,15 @@ window.addEventListener("load", () => void load().then((assets) => {
levels: 8
});

pipeline.add(new EffectPass(effect, new ToneMappingEffect()));
const pipeline = new RenderPipeline(renderer);
pipeline.add(
new ClearPass(),
new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType,
samples: 4
}),
new EffectPass(effect, new ToneMappingEffect())
);

// Settings

Expand Down
12 changes: 7 additions & 5 deletions manual/assets/js/src/demos/blur.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,11 +86,13 @@ window.addEventListener("load", () => void load().then((assets) => {
// Post Processing

const pipeline = new RenderPipeline(renderer);
pipeline.add(new ClearPass());
pipeline.add(new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType,
samples: 4
}));
pipeline.add(
new ClearPass(),
new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType,
samples: 4
})
);

/*
const gaussianBlurPass = new GaussianBlurPass({ resolutionScale: 0.5, kernelSize: 35 });
Expand Down
10 changes: 6 additions & 4 deletions manual/assets/js/src/demos/brightness-contrast.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,10 +89,12 @@ window.addEventListener("load", () => void load().then((assets) => {
// Post Processing

const pipeline = new RenderPipeline(renderer);
pipeline.add(new ClearPass());
pipeline.add(new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType
}));
pipeline.add(
new ClearPass(),
new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType
})
);

/*
const effect = new BrightnessContrastEffect();
Expand Down
12 changes: 7 additions & 5 deletions manual/assets/js/src/demos/chromatic-aberration.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,11 +89,13 @@ window.addEventListener("load", () => void load().then((assets) => {
// Post Processing

const pipeline = new RenderPipeline(renderer);
pipeline.add(new ClearPass());
pipeline.add(new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType,
samples: 4
}));
pipeline.add(
new ClearPass(),
new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType,
samples: 4
})
);

/*
const effect = new ChromaticAberrationEffect({
Expand Down
12 changes: 7 additions & 5 deletions manual/assets/js/src/demos/color-depth.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,11 +80,13 @@ window.addEventListener("load", () => void load().then((assets) => {
// Post Processing

const pipeline = new RenderPipeline(renderer);
pipeline.add(new ClearPass());
pipeline.add(new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType,
samples: 4
}));
pipeline.add(
new ClearPass(),
new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType,
samples: 4
})
);

/*
const effect = new ColorDepthEffect({ bits: 21 });
Expand Down
12 changes: 7 additions & 5 deletions manual/assets/js/src/demos/depth-of-field.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,11 +116,13 @@ window.addEventListener("load", () => void load().then((assets) => {

const pipeline = new RenderPipeline(renderer);
pipeline.autoRenderToScreen = false;
pipeline.add(new ClearPass());
pipeline.add(new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType,
samples: 4
}));
pipeline.add(
new ClearPass(),
new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType,
samples: 4
})
);

/*
const effect = new DepthOfFieldEffect({
Expand Down
20 changes: 11 additions & 9 deletions manual/assets/js/src/demos/depth-picking.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,16 +104,18 @@ window.addEventListener("load", () => void load().then((assets) => {

// Post Processing

const pipeline = new RenderPipeline(renderer);
pipeline.add(new ClearPass());
pipeline.add(new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType,
samples: 4
}));

const depthPickingPass = new DepthPickingPass();
pipeline.add(depthPickingPass);
pipeline.add(new EffectPass(new ToneMappingEffect()));

const pipeline = new RenderPipeline(renderer);
pipeline.add(
new ClearPass(),
new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType,
samples: 4
}),
depthPickingPass,
new EffectPass(new ToneMappingEffect())
);

const ndc = new Vector3();

Expand Down
16 changes: 9 additions & 7 deletions manual/assets/js/src/demos/fxaa.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,15 +88,17 @@ window.addEventListener("load", () => void load().then((assets) => {

// Post Processing

const pipeline = new RenderPipeline(renderer);
pipeline.add(new ClearPass());
pipeline.add(new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType
}));

const effect = new FXAAEffect();
effect.blendMode.blendFunction = new MixBlendFunction();
pipeline.add(new EffectPass(effect, new ToneMappingEffect()));

const pipeline = new RenderPipeline(renderer);
pipeline.add(
new ClearPass(),
new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType
}),
new EffectPass(effect, new ToneMappingEffect())
);

// Settings

Expand Down
21 changes: 11 additions & 10 deletions manual/assets/js/src/demos/gbuffer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,15 +90,6 @@ window.addEventListener("load", () => void load().then((assets) => {

// Post Processing

const pipeline = new RenderPipeline(renderer);
pipeline.add(new ClearPass());
pipeline.add(new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType,
samples: 4
}));

pipeline.add(new EffectPass(new ToneMappingEffect()));

const bufferDebugPass = new BufferDebugPass(
new Set([
GBuffer.COLOR,
Expand All @@ -110,7 +101,17 @@ window.addEventListener("load", () => void load().then((assets) => {
);

bufferDebugPass.columns = 3;
pipeline.add(bufferDebugPass);

const pipeline = new RenderPipeline(renderer);
pipeline.add(
new ClearPass(),
new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType,
samples: 4
}),
new EffectPass(new ToneMappingEffect()),
bufferDebugPass
);

// Settings

Expand Down
12 changes: 7 additions & 5 deletions manual/assets/js/src/demos/glitch.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,11 +89,13 @@ window.addEventListener("load", () => void load().then((assets) => {
// Post Processing

const pipeline = new RenderPipeline(renderer);
pipeline.add(new ClearPass());
pipeline.add(new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType,
samples: 4
}));
pipeline.add(
new ClearPass(),
new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType,
samples: 4
})
);

/*
const chromaticAberrationEffect = new ChromaticAberrationEffect();
Expand Down
12 changes: 7 additions & 5 deletions manual/assets/js/src/demos/grid.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,11 +80,13 @@ window.addEventListener("load", () => void load().then((assets) => {
// Post Processing

const pipeline = new RenderPipeline(renderer);
pipeline.add(new ClearPass());
pipeline.add(new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType,
samples: 4
}));
pipeline.add(
new ClearPass(),
new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType,
samples: 4
})
);

/*
const effect = new GridEffect({ scale: 2.0 });
Expand Down
12 changes: 7 additions & 5 deletions manual/assets/js/src/demos/halftone.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,11 +80,13 @@ window.addEventListener("load", () => void load().then((assets) => {
// Post Processing

const pipeline = new RenderPipeline(renderer);
pipeline.add(new ClearPass());
pipeline.add(new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType,
samples: 4
}));
pipeline.add(
new ClearPass(),
new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType,
samples: 4
})
);

/*
const effect = new HalftoneEffect({ angle: 1.4, scale: 0.7 });
Expand Down
10 changes: 6 additions & 4 deletions manual/assets/js/src/demos/hue-saturation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,10 +89,12 @@ window.addEventListener("load", () => void load().then((assets) => {
// Post Processing

const pipeline = new RenderPipeline(renderer);
pipeline.add(new ClearPass());
pipeline.add(new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType
}));
pipeline.add(
new ClearPass(),
new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType
})
);

/*
const effect = new HueSaturationEffect();
Expand Down
10 changes: 6 additions & 4 deletions manual/assets/js/src/demos/lut.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,10 +181,12 @@ window.addEventListener("load", () => void load().then((assets) => {
// Post Processing

const pipeline = new RenderPipeline(renderer);
pipeline.add(new ClearPass());
pipeline.add(new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType
}));
pipeline.add(
new ClearPass(),
new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType
})
);

/*
const lut = LookupTexture.from(assets.get("png/filmic1") as Texture);
Expand Down
10 changes: 6 additions & 4 deletions manual/assets/js/src/demos/msaa.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,15 +86,17 @@ window.addEventListener("load", () => void load().then((assets) => {

// Post Processing

const pipeline = new RenderPipeline(renderer);
const geoPass = new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType,
samples: 4
});

pipeline.add(new ClearPass());
pipeline.add(geoPass);
pipeline.add(new EffectPass(new ToneMappingEffect()));
const pipeline = new RenderPipeline(renderer);
pipeline.add(
new ClearPass(),
geoPass,
new EffectPass(new ToneMappingEffect())
);

// Settings

Expand Down
12 changes: 7 additions & 5 deletions manual/assets/js/src/demos/pixelation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,11 +80,13 @@ window.addEventListener("load", () => void load().then((assets) => {
// Post Processing

const pipeline = new RenderPipeline(renderer);
pipeline.add(new ClearPass());
pipeline.add(new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType,
samples: 4
}));
pipeline.add(
new ClearPass(),
new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType,
samples: 4
})
);

/*
const effect = new PixelationEffect();
Expand Down
12 changes: 7 additions & 5 deletions manual/assets/js/src/demos/scanlines.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,11 +80,13 @@ window.addEventListener("load", () => void load().then((assets) => {
// Post Processing

const pipeline = new RenderPipeline(renderer);
pipeline.add(new ClearPass());
pipeline.add(new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType,
samples: 4
}));
pipeline.add(
new ClearPass(),
new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType,
samples: 4
})
);

/*
const effect = new ScanlineEffect({ scrollSpeed: 0.006 });
Expand Down
10 changes: 6 additions & 4 deletions manual/assets/js/src/demos/sepia.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,10 +89,12 @@ window.addEventListener("load", () => void load().then((assets) => {
// Post Processing

const pipeline = new RenderPipeline(renderer);
pipeline.add(new ClearPass());
pipeline.add(new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType
}));
pipeline.add(
new ClearPass(),
new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType
})
);

/*
const effect = new SepiaEffect();
Expand Down
10 changes: 6 additions & 4 deletions manual/assets/js/src/demos/smaa.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,10 +86,12 @@ window.addEventListener("load", () => void load().then((assets) => {

const pipeline = new RenderPipeline(renderer);
pipeline.autoRenderToScreen = false;
pipeline.add(new ClearPass());
pipeline.add(new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType
}));
pipeline.add(
new ClearPass(),
new GeometryPass(scene, camera, {
frameBufferType: HalfFloatType
})
);

/*
const effect = new SMAAEffect({
Expand Down
Loading

0 comments on commit 47f0a19

Please sign in to comment.