Skip to content

Commit 46ff2b0

Browse files
vanruescvanruesc
committed
Update ascii.js
Addresses #683
1 parent 06f73ad commit 46ff2b0

1 file changed

Lines changed: 106 additions & 89 deletions

File tree

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

Lines changed: 106 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
import {
2-
CubeTextureLoader,
3-
FogExp2,
4-
LoadingManager,
5-
PerspectiveCamera,
6-
Scene,
7-
SRGBColorSpace,
8-
WebGLRenderer
2+
CubeTextureLoader,
3+
FogExp2,
4+
LoadingManager,
5+
PerspectiveCamera,
6+
Scene,
7+
SRGBColorSpace,
8+
WebGLRenderer
99
} from "three";
1010

1111
import {
12-
AsciiEffect,
13-
EffectComposer,
14-
EffectPass,
15-
RenderPass
12+
ASCIIEffect,
13+
ASCIITexture,
14+
BlendFunction,
15+
EffectComposer,
16+
EffectPass,
17+
RenderPass
1618
} from "postprocessing";
1719

1820
import { Pane } from "tweakpane";
@@ -22,117 +24,132 @@ import * as Domain from "../objects/Domain";
2224

2325
function load() {
2426

25-
const assets = new Map();
26-
const loadingManager = new LoadingManager();
27-
const cubeTextureLoader = new CubeTextureLoader(loadingManager);
27+
const assets = new Map();
28+
const loadingManager = new LoadingManager();
29+
const cubeTextureLoader = new CubeTextureLoader(loadingManager);
2830

29-
const path = document.baseURI + "img/textures/skies/sunset/";
30-
const format = ".png";
31-
const urls = [
32-
path + "px" + format, path + "nx" + format,
33-
path + "py" + format, path + "ny" + format,
34-
path + "pz" + format, path + "nz" + format
35-
];
31+
const path = document.baseURI + "img/textures/skies/sunset/";
32+
const format = ".png";
33+
const urls = [
34+
path + "px" + format, path + "nx" + format,
35+
path + "py" + format, path + "ny" + format,
36+
path + "pz" + format, path + "nz" + format
37+
];
3638

37-
return new Promise((resolve, reject) => {
39+
return new Promise((resolve, reject) => {
3840

39-
loadingManager.onLoad = () => resolve(assets);
40-
loadingManager.onError = (url) => reject(new Error(`Failed to load ${url}`));
41+
loadingManager.onLoad = () => resolve(assets);
42+
loadingManager.onError = (url) => reject(new Error(`Failed to load ${url}`));
4143

42-
cubeTextureLoader.load(urls, (t) => {
44+
cubeTextureLoader.load(urls, (t) => {
4345

44-
t.colorSpace = SRGBColorSpace;
45-
assets.set("sky", t);
46+
t.colorSpace = SRGBColorSpace;
47+
assets.set("sky", t);
4648

47-
});
49+
});
4850

49-
});
51+
});
5052

5153
}
5254

5355
window.addEventListener("load", () => load().then((assets) => {
5456

55-
// Renderer
57+
// Renderer
5658

57-
const renderer = new WebGLRenderer({
58-
powerPreference: "high-performance",
59-
antialias: false,
60-
stencil: false,
61-
depth: false
62-
});
59+
const renderer = new WebGLRenderer({
60+
powerPreference: "high-performance",
61+
antialias: false,
62+
stencil: false,
63+
depth: false
64+
});
6365

64-
renderer.debug.checkShaderErrors = (window.location.hostname === "localhost");
65-
const container = document.querySelector(".viewport");
66-
container.prepend(renderer.domElement);
66+
renderer.debug.checkShaderErrors = (window.location.hostname === "localhost");
67+
const container = document.querySelector(".viewport");
68+
container.prepend(renderer.domElement);
6769

68-
// Camera & Controls
70+
// Camera & Controls
6971

70-
const camera = new PerspectiveCamera();
71-
const controls = new SpatialControls(camera.position, camera.quaternion, renderer.domElement);
72-
const settings = controls.settings;
73-
settings.rotation.sensitivity = 2.2;
74-
settings.rotation.damping = 0.05;
75-
settings.translation.damping = 0.1;
76-
controls.position.set(0, 0, 1);
77-
controls.lookAt(0, 0, 0);
72+
const camera = new PerspectiveCamera();
73+
const controls = new SpatialControls(camera.position, camera.quaternion, renderer.domElement);
74+
const settings = controls.settings;
75+
settings.rotation.sensitivity = 2.2;
76+
settings.rotation.damping = 0.05;
77+
settings.translation.damping = 0.1;
78+
controls.position.set(0, 10, 1);
79+
controls.lookAt(0, 10, -1);
7880

79-
// Scene, Lights, Objects
81+
// Scene, Lights, Objects
8082

81-
const scene = new Scene();
82-
scene.fog = new FogExp2(0x373134, 0.06);
83-
scene.background = assets.get("sky");
84-
scene.add(Domain.createLights());
83+
const scene = new Scene();
84+
scene.fog = new FogExp2(0x373134, 0.06);
85+
scene.background = assets.get("sky");
86+
scene.add(Domain.createLights());
87+
scene.add(Domain.createEnvironment(scene.background));
88+
scene.add(Domain.createActors(scene.background));
8589

86-
// Post Processing
90+
// Post Processing
8791

88-
const composer = new EffectComposer(renderer);
92+
const composer = new EffectComposer(renderer, {
93+
multisampling: Math.min(4, renderer.capabilities.maxSamples)
94+
});
8995

90-
const effect = new AsciiEffect({
91-
font: "arial",
92-
characters: ` .:,'-^=*+?!|0#X%WM@`,
93-
fontSize: 35,
94-
cellSize: 16,
95-
color: "#ffffff",
96-
invert: false,
97-
sceneColor: true
98-
});
99-
composer.addPass(new RenderPass(scene, camera));
100-
composer.addPass(new EffectPass(camera, effect));
96+
const effect = new ASCIIEffect({
97+
asciiTexture: new ASCIITexture({
98+
characters: " .:,'-^=*+?!|0#X%WM@",
99+
font: "Arial",
100+
fontSize: 54,
101+
size: 1024,
102+
maxCharsPerRow: 16
103+
}),
104+
cellSize: 12,
105+
inverted: false
106+
});
101107

102-
// Settings
108+
composer.addPass(new RenderPass(scene, camera));
109+
composer.addPass(new EffectPass(camera, effect));
103110

104-
const fpsMeter = new FPSMeter();
105-
const pane = new Pane({ container: container.querySelector(".tp") });
106-
pane.addBinding(fpsMeter, "fps", { readonly: true, label: "FPS" });
111+
// Settings
107112

108-
const folder = pane.addFolder({ title: "Settings" });
109-
// folder.addBinding(effect, "granularity", { min: 0, max: 20, step: 1 });
113+
const params = { useSceneColor: true };
110114

115+
const fpsMeter = new FPSMeter();
116+
const pane = new Pane({ container: container.querySelector(".tp") });
117+
pane.addBinding(fpsMeter, "fps", { readonly: true, label: "FPS" });
111118

112-
// Resize Handler
119+
const folder = pane.addFolder({ title: "Settings" });
120+
folder.addBinding(effect, "inverted");
121+
folder.addBinding(effect, "cellSize", { min: 2, max: 24, step: 2 });
122+
folder.addBinding(effect, "color", { color: { type: "float" } });
123+
folder.addBinding(params, "useSceneColor").on("change",
124+
(e) => void (effect.color = e.value ? null : effect.color.getHex()));
113125

114-
function onResize() {
126+
folder.addBinding(effect.blendMode.opacity, "value", { label: "opacity", min: 0, max: 1, step: 0.01 });
127+
folder.addBinding(effect.blendMode, "blendFunction", { options: BlendFunction });
115128

116-
const width = container.clientWidth, height = container.clientHeight;
117-
camera.aspect = width / height;
118-
camera.fov = calculateVerticalFoV(90, Math.max(camera.aspect, 16 / 9));
119-
camera.updateProjectionMatrix();
120-
composer.setSize(width, height);
129+
// Resize Handler
121130

122-
}
131+
function onResize() {
123132

124-
window.addEventListener("resize", onResize);
125-
onResize();
133+
const width = container.clientWidth, height = container.clientHeight;
134+
camera.aspect = width / height;
135+
camera.fov = calculateVerticalFoV(90, Math.max(camera.aspect, 16 / 9));
136+
camera.updateProjectionMatrix();
137+
composer.setSize(width, height);
126138

127-
// Render Loop
139+
}
128140

129-
requestAnimationFrame(function render(timestamp) {
141+
window.addEventListener("resize", onResize);
142+
onResize();
130143

131-
fpsMeter.update(timestamp);
132-
controls.update(timestamp);
133-
composer.render();
134-
requestAnimationFrame(render);
144+
// Render Loop
135145

136-
});
146+
requestAnimationFrame(function render(timestamp) {
147+
148+
fpsMeter.update(timestamp);
149+
controls.update(timestamp);
150+
composer.render();
151+
requestAnimationFrame(render);
152+
153+
});
137154

138155
}));

0 commit comments

Comments
 (0)