Skip to content

Commit b6b7a78

Browse files
vanruescvanruesc
committed
Cleanup
1 parent 5ac8cfb commit b6b7a78

File tree

2 files changed

+170
-139
lines changed

2 files changed

+170
-139
lines changed

‎manual/assets/js/src/demos/lens-distortion.ts

Lines changed: 118 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,27 @@
1-
import * as DefaultEnvironment from "../objects/DefaultEnvironment.js";
2-
import * as Utils from "../utils/index.js";
3-
4-
import {
5-
ClearPass,
6-
EffectPass,
7-
GeometryPass,
8-
LensDistortionEffect,
9-
MixBlendFunction,
10-
RenderPipeline,
11-
ToneMappingEffect
12-
} from "postprocessing";
131
import {
142
CubeTextureLoader,
153
HalfFloatType,
164
LoadingManager,
175
PerspectiveCamera,
18-
SRGBColorSpace,
196
Scene,
7+
SRGBColorSpace,
208
Texture,
219
WebGLRenderer
2210
} from "three";
2311

12+
import {
13+
ClearPass,
14+
EffectPass,
15+
GeometryPass,
16+
LensDistortionEffect,
17+
RenderPipeline,
18+
ToneMappingEffect
19+
} from "postprocessing";
20+
2421
import { Pane } from "tweakpane";
2522
import { SpatialControls } from "spatial-controls";
23+
import * as DefaultEnvironment from "../objects/DefaultEnvironment.js";
24+
import * as Utils from "../utils/index.js";
2625

2726
function load(): Promise<Map<string, Texture>> {
2827

@@ -33,8 +32,7 @@ function load(): Promise<Map<string, Texture>> {
3332
return new Promise<Map<string, Texture>>((resolve, reject) => {
3433

3534
loadingManager.onLoad = () => resolve(assets);
36-
loadingManager.onError = (url) =>
37-
reject(new Error(`Failed to load ${url}`));
35+
loadingManager.onError = (url) => reject(new Error(`Failed to load ${url}`));
3836

3937
cubeTextureLoader.load(Utils.getSkyboxUrls("space", ".jpg"), (t) => {
4038

@@ -47,118 +45,108 @@ function load(): Promise<Map<string, Texture>> {
4745

4846
}
4947

50-
window.addEventListener(
51-
"load",
52-
() =>
53-
void load().then((assets) => {
54-
55-
// Renderer
56-
57-
const renderer = new WebGLRenderer({
58-
powerPreference: "high-performance",
59-
antialias: false,
60-
stencil: false,
61-
depth: false
62-
});
63-
64-
renderer.debug.checkShaderErrors = Utils.isLocalhost;
65-
const container = document.querySelector(".viewport") as HTMLElement;
66-
container.prepend(renderer.domElement);
67-
68-
// Camera & Controls
69-
70-
const camera = new PerspectiveCamera();
71-
const controls = new SpatialControls(
72-
camera.position,
73-
camera.quaternion,
74-
renderer.domElement
75-
);
76-
const settings = controls.settings;
77-
settings.rotation.sensitivity = 2.2;
78-
settings.rotation.damping = 0.05;
79-
settings.translation.damping = 0.1;
80-
controls.position.set(0, 1.5, 10);
81-
controls.lookAt(0, 1.35, 0);
82-
83-
// Scene, Lights, Objects
84-
85-
const scene = new Scene();
86-
const skyMap = assets.get("sky") as Texture;
87-
scene.background = skyMap;
88-
scene.environment = skyMap;
89-
scene.fog = DefaultEnvironment.createFog();
90-
scene.add(DefaultEnvironment.createEnvironment());
91-
92-
// Post Processing
93-
94-
const effect = new LensDistortionEffect();
95-
effect.blendMode.blendFunction = new MixBlendFunction();
96-
97-
const pipeline = new RenderPipeline(renderer);
98-
pipeline.add(
99-
new ClearPass(),
100-
new GeometryPass(scene, camera, {
101-
frameBufferType: HalfFloatType,
102-
samples: 4
103-
}),
104-
new EffectPass(effect, new ToneMappingEffect())
105-
);
106-
107-
// Settings
108-
109-
const pane = new Pane({
110-
container: container.querySelector(".tp") as HTMLElement
111-
});
112-
const fpsGraph = Utils.createFPSGraph(pane);
113-
114-
const folder = pane.addFolder({ title: "Settings" });
115-
folder.addBinding(effect, "skew", { min: 0, max: 10, step: 1 });
116-
folder.addBinding(effect, "distortion", {
117-
x: { min: -1, max: 1, step: 0.1 },
118-
y: { min: -1, max: 1, step: 0.1 }
119-
});
120-
folder.addBinding(effect, "principalPoint", {
121-
x: { min: -1, max: 1, step: 0.1 },
122-
y: { min: -1, max: 1, step: 0.1 }
123-
});
124-
folder.addBinding(effect, "focalLength", {
125-
x: { min: 0, max: 2, step: 0.1 },
126-
y: { min: 0, max: 2, step: 0.1 }
127-
});
128-
129-
Utils.addBlendModeBindings(folder, effect.blendMode);
130-
131-
// Resize Handler
132-
133-
function onResize(): void {
134-
135-
const width = container.clientWidth,
136-
height = container.clientHeight;
137-
camera.aspect = width / height;
138-
camera.fov = Utils.calculateVerticalFoV(
139-
90,
140-
Math.max(camera.aspect, 16 / 9)
141-
);
142-
camera.updateProjectionMatrix();
143-
pipeline.setSize(width, height);
144-
145-
}
146-
147-
window.addEventListener("resize", onResize);
148-
onResize();
149-
150-
// Render Loop
151-
152-
requestAnimationFrame(function render(timestamp: number): void {
153-
154-
fpsGraph.begin();
155-
controls.update(timestamp);
156-
pipeline.render(timestamp);
157-
fpsGraph.end();
158-
159-
requestAnimationFrame(render);
160-
161-
});
162-
163-
})
164-
);
48+
window.addEventListener("load", () => void load().then((assets) => {
49+
50+
// Renderer
51+
52+
const renderer = new WebGLRenderer({
53+
powerPreference: "high-performance",
54+
antialias: false,
55+
stencil: false,
56+
depth: false
57+
});
58+
59+
renderer.debug.checkShaderErrors = Utils.isLocalhost;
60+
const container = document.querySelector(".viewport") as HTMLElement;
61+
container.prepend(renderer.domElement);
62+
63+
// Camera & Controls
64+
65+
const camera = new PerspectiveCamera();
66+
const controls = new SpatialControls(
67+
camera.position,
68+
camera.quaternion,
69+
renderer.domElement
70+
);
71+
const settings = controls.settings;
72+
settings.rotation.sensitivity = 2.2;
73+
settings.rotation.damping = 0.05;
74+
settings.translation.damping = 0.1;
75+
controls.position.set(0, 1.5, 10);
76+
controls.lookAt(0, 1.35, 0);
77+
78+
// Scene, Lights, Objects
79+
80+
const scene = new Scene();
81+
const skyMap = assets.get("sky") as Texture;
82+
scene.background = skyMap;
83+
scene.environment = skyMap;
84+
scene.fog = DefaultEnvironment.createFog();
85+
scene.add(DefaultEnvironment.createEnvironment());
86+
87+
// Post Processing
88+
89+
const effect = new LensDistortionEffect();
90+
91+
const pipeline = new RenderPipeline(renderer);
92+
pipeline.add(
93+
new ClearPass(),
94+
new GeometryPass(scene, camera, {
95+
frameBufferType: HalfFloatType,
96+
samples: 4
97+
}),
98+
new EffectPass(effect, new ToneMappingEffect())
99+
);
100+
101+
// Settings
102+
103+
const pane = new Pane({ container: container.querySelector(".tp") as HTMLElement });
104+
const fpsGraph = Utils.createFPSGraph(pane);
105+
106+
const folder = pane.addFolder({ title: "Settings" });
107+
folder.addBinding(effect, "skew", { min: -90, max: 90, step: 0.1 });
108+
109+
folder.addBinding(effect, "distortion", {
110+
x: { min: -1, max: 1, step: 0.01 },
111+
y: { min: -1, max: 1, step: 0.01 }
112+
});
113+
114+
folder.addBinding(effect, "principalPoint", {
115+
x: { min: -1, max: 1, step: 0.01 },
116+
y: { min: -1, max: 1, step: 0.01 }
117+
});
118+
119+
folder.addBinding(effect, "focalLength", {
120+
x: { min: 0, max: 2, step: 0.01 },
121+
y: { min: 0, max: 2, step: 0.01 }
122+
});
123+
124+
// Resize Handler
125+
126+
function onResize(): void {
127+
128+
const width = container.clientWidth, height = container.clientHeight;
129+
camera.aspect = width / height;
130+
camera.fov = Utils.calculateVerticalFoV(90, Math.max(camera.aspect, 16 / 9));
131+
camera.updateProjectionMatrix();
132+
pipeline.setSize(width, height);
133+
134+
}
135+
136+
window.addEventListener("resize", onResize);
137+
onResize();
138+
139+
// Render Loop
140+
141+
requestAnimationFrame(function render(timestamp: number): void {
142+
143+
fpsGraph.begin();
144+
controls.update(timestamp);
145+
pipeline.render(timestamp);
146+
fpsGraph.end();
147+
148+
requestAnimationFrame(render);
149+
150+
});
151+
152+
}));

‎src/effects/LensDistortionEffect.ts

Lines changed: 52 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,48 @@
11
import { Uniform, Vector2 } from "three";
2-
32
import { Effect } from "./Effect.js";
3+
44
import fragmentShader from "./shaders/lens-distortion.frag";
55

6+
/**
7+
* LensDistortionEffect options.
8+
*
9+
* @category Effects
10+
*/
11+
612
export interface LensDistortionEffectOptions {
13+
14+
/**
15+
* The radial distortion coefficients.
16+
*
17+
* @defaultValue (0, 0)
18+
*/
19+
720
distortion?: Vector2;
21+
22+
/**
23+
* The principal point.
24+
*
25+
* @defaultValue (0, 0)
26+
*/
27+
828
principalPoint?: Vector2;
29+
30+
/**
31+
* The focal length.
32+
*
33+
* @defaultValue (1, 1)
34+
*/
35+
936
focalLength?: Vector2;
37+
38+
/**
39+
* The skew factor in radians.
40+
*
41+
* @defaultValue 0
42+
*/
43+
1044
skew?: number;
45+
1146
}
1247

1348
/**
@@ -21,7 +56,7 @@ export class LensDistortionEffect extends Effect {
2156
/**
2257
* Constructs a new lens distortion effect.
2358
*
24-
* @param {Object} options - The options.
59+
* @param options - The options.
2560
*/
2661

2762
constructor({
@@ -43,10 +78,12 @@ export class LensDistortionEffect extends Effect {
4378
}
4479

4580
/**
46-
* The radial distortion coefficients. Default is (0, 0).
81+
* The radial distortion coefficients.
82+
*
83+
* @defaultValue (0, 0)
4784
*/
4885

49-
get distortion() {
86+
get distortion(): Vector2 {
5087

5188
return this.input.uniforms.get("distortion")!.value as Vector2;
5289

@@ -59,10 +96,12 @@ export class LensDistortionEffect extends Effect {
5996
}
6097

6198
/**
62-
* The principal point. Default is (0, 0).
99+
* The principal point.
100+
*
101+
* @defaultValue (0, 0)
63102
*/
64103

65-
get principalPoint() {
104+
get principalPoint(): Vector2 {
66105

67106
return this.input.uniforms.get("principalPoint")!.value as Vector2;
68107

@@ -75,10 +114,12 @@ export class LensDistortionEffect extends Effect {
75114
}
76115

77116
/**
78-
* The focal length. Default is (1, 1).
117+
* The focal length.
118+
*
119+
* @defaultValue (1, 1)
79120
*/
80121

81-
get focalLength() {
122+
get focalLength(): Vector2 {
82123

83124
return this.input.uniforms.get("focalLength")!.value as Vector2;
84125

@@ -92,9 +133,11 @@ export class LensDistortionEffect extends Effect {
92133

93134
/**
94135
* The skew factor in radians.
136+
*
137+
* @defaultValue 0
95138
*/
96139

97-
get skew() {
140+
get skew(): number {
98141

99142
return this.input.uniforms.get("skew")!.value as number;
100143

0 commit comments

Comments
 (0)