9 | *
Child 0
10 | *
Child 1
11 | *
Child 2
12 | *
13 | *
14 | * .my-class .grid-template-columns\:auto-fit {
15 | * --child-min-width: 500px;
16 | * }
17 | *
18 | * @see
19 | * https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/
20 | */
21 | .grid-template-columns\:auto-fit {
22 | /* stylelint-disable-next-line unit-whitelist */
23 | --child-min-width: 321px;
24 |
25 | display: grid;
26 | grid-column-gap: 1rem;
27 | grid-row-gap: 1rem;
28 | /* stylelint-disable-next-line unit-whitelist */
29 | grid-template-columns: repeat(auto-fit, minmax(var(--child-min-width), 1fr));
30 | }
31 |
32 | /**
33 | * @see
34 | * http://wellcaffeinated.net/articles/2012/12/10/very-simple-css-only-proportional-resizing-of-elements
35 | */
36 | .preserve-aspect-ratio {
37 | --aspect: calc(4 / 3);
38 |
39 | padding-top: calc(100% / var(--aspect));
40 | position: relative;
41 | width: calc(100% - var(--grid-column-gap));
42 | }
43 |
44 | .preserve-aspect-ratio > * {
45 | bottom: 0;
46 | left: 0;
47 | position: absolute;
48 | right: 0;
49 | top: 0;
50 | }
51 |
52 | .preserve-aspect-ratio > * > * {
53 | height: 100%;
54 | width: 100%;
55 | }
56 |
57 | /**
58 | * Lobotomized owl to set margin-left for all children but the last one.
59 | *
60 | * This will probably no longer be necessary when browsers will implement `gap`
61 | * for flex containers.
62 | * https://caniuse.com/#search=gap
63 | *
64 | * @example
65 | *
66 | * Child 0
67 | * Child 1
68 | * Child 2 (this one has no margin-left)
69 | *
70 | *
71 | * ul.lobotomized-owl\:margin-left {
72 | * --space: 1.5rem;
73 | * }
74 | *
75 | * @see
76 | * https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/
77 | */
78 | .lobotomized-owl\:margin-left > * + * {
79 | margin-left: var(--space);
80 | }
81 |
82 | .site {
83 | background-color: var(--color-background-primary);
84 | display: flex;
85 | flex-direction: column;
86 | min-height: 100vh;
87 | }
88 |
89 | .site > main {
90 | background-color: var(--color-background-secondary);
91 | flex: 1 0 auto;
92 | }
93 |
94 | .ghost-button {
95 | color: var(--color-font-primary);
96 | outline: 0.1rem solid var(--color-highlighted);
97 | padding: 0 var(--geometry-space-small);
98 | text-decoration: none;
99 | }
100 |
101 | .ghost-button:hover {
102 | color: var(--color-highlighted);
103 | text-decoration: underline;
104 | }
105 |
106 | .no-margins {
107 | margin: 0;
108 | }
109 |
110 | .single-responsive-element {
111 | left: 0;
112 | position: relative;
113 | width: 100%;
114 | }
115 |
116 | .display\:none {
117 | display: none;
118 | }
119 |
--------------------------------------------------------------------------------
/src/css/index.css:
--------------------------------------------------------------------------------
1 | /**
2 | * CSS files for the application.
3 | *
4 | * @font-face rules should be defined first in your main CSS file
5 | *
6 | * @see
7 | * https://alligator.io/css/font-face/
8 | */
9 | @import "../css/font-face-rules.css";
10 | @import "../css/variables.css";
11 | @import "../css/typography.css";
12 | @import "../css/layouts/index.css";
13 | @import "../css/components/index.css";
14 | @import "../css/helpers.css";
15 | @import "../css/defaults.css";
16 | @import "../css/media-queries.css";
17 |
--------------------------------------------------------------------------------
/src/css/layouts/README.md:
--------------------------------------------------------------------------------
1 | # Layouts
2 |
3 | Set of [layout primitives](https://absolutely.every-layout.dev/layouts/).
4 |
5 | These files' only concern is layout (arrangement of boxes).
6 |
7 | They should not be used for branding/aesthetic (fonts, colors, shadows, etc).
8 |
--------------------------------------------------------------------------------
/src/css/layouts/box.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Box layout
3 | *
4 | * A box element applies a padding on all sides. Set the --space CSS custom
5 | * property to set the amount of this padding.
6 | *
7 | * @example
8 | *
9 | *
Child (there is padding around me)
10 | *
11 | *
12 | * div.box {
13 | * --space: 3rem;
14 | * }
15 | *
16 | * @see
17 | * https://absolutely.every-layout.dev/layouts/box/
18 | */
19 |
20 | .box {
21 | --space: var(--geometry-space-small);
22 |
23 | padding: var(--space);
24 | }
25 |
--------------------------------------------------------------------------------
/src/css/layouts/cluster.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Cluster layout
3 | *
4 | * A cluster element is a container that lets its grandchildren wrap on the next
5 | * row when they would otherwise overflow. Set the --space CSS custom property
6 | * to control the space between its grandchildren.
7 | *
8 | * @example
9 | *
10 | *
11 | *
Logo (grandchild 0)
12 | *
List of links (grandchild 1)
13 | *
15 | *
16 | * nav.cluster {
17 | * --space: 3rem;
18 | * }
19 | *
20 | * @see
21 | * https://absolutely.every-layout.dev/layouts/cluster/
22 | */
23 |
24 | .cluster {
25 | --space: 1rem;
26 |
27 | overflow: hidden;
28 | }
29 |
30 | .cluster > * {
31 | align-items: center;
32 | display: flex;
33 | flex-wrap: wrap;
34 | justify-content: flex-start;
35 | margin: calc(var(--space) / 2 * -1);
36 | }
37 |
38 | .cluster > * > * {
39 | margin: calc(var(--space) / 2);
40 | }
41 |
--------------------------------------------------------------------------------
/src/css/layouts/index.css:
--------------------------------------------------------------------------------
1 | @import "./box.css";
2 | @import "./cluster.css";
3 | @import "./stack.css";
4 |
--------------------------------------------------------------------------------
/src/css/layouts/stack.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Stack layout
3 | *
4 | * A stack element is a container that controls the vertical margins of its
5 | * children. Set the --space CSS custom property to control the vertical space
6 | * between its children.
7 | *
8 | * @example
9 | *
10 | *
Child 0
11 | *
Child 1
12 | *
Child 2
13 | *
14 | *
15 | * div.stack {
16 | * --space: 3rem;
17 | * }
18 | *
19 | * @see
20 | * https://absolutely.every-layout.dev/layouts/stack/
21 | */
22 | .stack {
23 | --space: 1rem;
24 |
25 | display: flex;
26 | flex-direction: column;
27 | justify-content: flex-start;
28 | }
29 |
30 | .stack > * {
31 | margin-bottom: 0;
32 | margin-top: 0;
33 | }
34 |
35 | .stack > * + * {
36 | margin-top: var(--space);
37 | }
38 |
--------------------------------------------------------------------------------
/src/css/media-queries.css:
--------------------------------------------------------------------------------
1 | /* stylelint-disable unit-whitelist */
2 | @media only screen and (min-width: 321px) {
3 | .single-responsive-element {
4 | left: 5%;
5 | width: 90%;
6 | }
7 | }
8 |
9 | @media only screen and (min-width: 1300px) {
10 | .single-responsive-element {
11 | left: 10%;
12 | width: 80%;
13 | }
14 | }
15 |
16 | @media only screen and (min-width: 1500px) {
17 | .single-responsive-element {
18 | left: 12.5%;
19 | width: 75%;
20 | }
21 | }
22 |
23 | @media only screen and (min-width: 1700px) {
24 | .single-responsive-element {
25 | left: 15%;
26 | width: 70%;
27 | }
28 | }
29 |
30 | @media only screen and (min-width: 1900px) {
31 | .single-responsive-element {
32 | left: 17.5%;
33 | width: 65%;
34 | }
35 | }
36 |
37 | @media only screen and (min-width: 2200px) {
38 | .single-responsive-element {
39 | left: 22.5%;
40 | width: 55%;
41 | }
42 | }
43 |
44 | @media only screen and (min-width: 600px) {
45 | .nav-grid {
46 | grid-template-areas: "home pages";
47 | }
48 |
49 | .nav-grid-hamburger {
50 | display: none;
51 | }
52 |
53 | .nav-grid-pages {
54 | display: flex;
55 | justify-self: flex-end;
56 | }
57 | }
58 |
59 | @media only screen and (min-width: 800px) {
60 | .transfer-demo-grid {
61 | grid-template-areas:
62 | "buttons buttons"
63 | "scene messages";
64 | grid-template-columns: 1fr 1fr;
65 | }
66 |
67 | .transfer-demo-grid .messages {
68 | max-height: 50vh;
69 | }
70 | }
71 |
72 | /* stylelint-enable unit-whitelist */
73 |
--------------------------------------------------------------------------------
/src/css/typography.css:
--------------------------------------------------------------------------------
1 | h1,
2 | h2,
3 | h3,
4 | h4,
5 | h5,
6 | h6 {
7 | font-family: var(--typography-font-family-headline);
8 | }
9 |
10 | a,
11 | button,
12 | div,
13 | figcaption,
14 | li,
15 | main,
16 | p,
17 | span {
18 | font-family: var(--typography-font-family-body);
19 | }
20 |
21 | button,
22 | figcaption,
23 | h1,
24 | h2,
25 | h3,
26 | h4,
27 | h5,
28 | h6,
29 | p,
30 | span {
31 | color: var(--color-font-primary);
32 | }
33 |
--------------------------------------------------------------------------------
/src/css/variables.css:
--------------------------------------------------------------------------------
1 | :root {
2 | /* COLORS */
3 | --color-background-primary: #374047;
4 | --color-background-secondary: #5f6e78;
5 | --color-font-primary: white;
6 | --color-highlighted: orange;
7 |
8 | /* GEOMETRY */
9 | --geometry-space-small: 1rem;
10 | --geometry-space-medium: 2rem;
11 | --geometry-space-big: 3rem;
12 |
13 | /* TYPOGRAPHY */
14 | --typography-font-family-headline: "Syne-Extra", sans-serif;
15 | --typography-font-family-body: "Syne-Regular", sans-serif;
16 |
17 | /* --typography-font-family-body: "Raleway", sans-serif; */
18 | }
19 |
--------------------------------------------------------------------------------
/src/fonts/Syne/README.md:
--------------------------------------------------------------------------------
1 | # Syne
2 |
3 | See [here](https://gitlab.com/bonjour-monde/fonderie/syne-typeface).
4 |
--------------------------------------------------------------------------------
/src/fonts/Syne/Syne-Extra.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jackdbd/threejs-es6-webpack-starter/e4b00bbbfdb93016fbd486ec4a4b3456587b61fd/src/fonts/Syne/Syne-Extra.ttf
--------------------------------------------------------------------------------
/src/fonts/Syne/Syne-Extra.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jackdbd/threejs-es6-webpack-starter/e4b00bbbfdb93016fbd486ec4a4b3456587b61fd/src/fonts/Syne/Syne-Extra.woff
--------------------------------------------------------------------------------
/src/fonts/Syne/Syne-Extra.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jackdbd/threejs-es6-webpack-starter/e4b00bbbfdb93016fbd486ec4a4b3456587b61fd/src/fonts/Syne/Syne-Extra.woff2
--------------------------------------------------------------------------------
/src/fonts/Syne/Syne-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jackdbd/threejs-es6-webpack-starter/e4b00bbbfdb93016fbd486ec4a4b3456587b61fd/src/fonts/Syne/Syne-Regular.ttf
--------------------------------------------------------------------------------
/src/fonts/Syne/Syne-Regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jackdbd/threejs-es6-webpack-starter/e4b00bbbfdb93016fbd486ec4a4b3456587b61fd/src/fonts/Syne/Syne-Regular.woff
--------------------------------------------------------------------------------
/src/fonts/Syne/Syne-Regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jackdbd/threejs-es6-webpack-starter/e4b00bbbfdb93016fbd486ec4a4b3456587b61fd/src/fonts/Syne/Syne-Regular.woff2
--------------------------------------------------------------------------------
/src/glsl/README.md:
--------------------------------------------------------------------------------
1 | # GLSL
2 |
3 | This directory contains glsl code for vertex shaders and fragment shaders.
4 |
--------------------------------------------------------------------------------
/src/glsl/fragmentShader.glsl:
--------------------------------------------------------------------------------
1 | uniform float delta;
2 | varying float vOpacity;
3 | varying vec3 vUv;
4 |
5 | void main() {
6 | float r = 1.0 + cos(vUv.x * delta);
7 | float g = 0.5 + sin(delta) * 0.5;
8 | float b = 0.0;
9 | vec3 rgb = vec3(r, g, b);
10 |
11 | gl_FragColor = vec4(rgb, vOpacity);
12 | }
--------------------------------------------------------------------------------
/src/glsl/vertexShader.glsl:
--------------------------------------------------------------------------------
1 | attribute float vertexDisplacement;
2 | uniform float delta;
3 | varying float vOpacity;
4 | varying vec3 vUv;
5 |
6 | void main() {
7 | vUv = position;
8 | vOpacity = vertexDisplacement;
9 |
10 | vec3 p = position;
11 |
12 | p.x += sin(vertexDisplacement) * 50.0;
13 | p.y += cos(vertexDisplacement) * 50.0;
14 |
15 | vec4 modelViewPosition = modelViewMatrix * vec4(p, 1.0);
16 | gl_Position = projectionMatrix * modelViewPosition;
17 | }
18 |
--------------------------------------------------------------------------------
/src/html/documents/404.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | ${require('../fragments/head.html')}
4 |
5 | ${require('../fragments/navbar.html')}
6 |
7 | Ops. We could not find that page.
8 | Back to homepage
9 |
10 | ${require('../fragments/footer.html')}
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/html/documents/README.md:
--------------------------------------------------------------------------------
1 | # HTML documents
2 |
3 | Each file in this directory represents a page in the application.
4 |
5 | This is a multi page aplication, so [each Webpack entry point](https://webpack.js.org/concepts/entry-points/#multi-page-application) associated to a page uses one of these files as a template.
6 |
7 | [html-webpack-plugin](https://webpack.js.org/plugins/html-webpack-plugin/) picks the HTML document associated to the entry point and injects the [chunks](https://github.com/jantimon/html-webpack-plugin#filtering-chunks) required for the page.
8 |
--------------------------------------------------------------------------------
/src/html/documents/about.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | ${require('../fragments/head.html')}
4 |
5 | ${require('../fragments/navbar.html')}
6 |
7 | About
8 |
9 | Examples with Three.js running in the main thread or in web workers.
10 |
11 |
12 | ${require('../fragments/footer.html')}
13 |
14 |
15 |
--------------------------------------------------------------------------------
/src/html/documents/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | ${require('../fragments/head.html')}
4 |
5 | ${require('../fragments/navbar.html')}
6 |
7 |
8 |
13 |
14 |
15 | A scene with a spotlight, a directional light, an ambient light, a
16 | particle system, a custom material and several helpers.
17 |
18 |
19 | ${require('../fragments/footer.html')}
20 |
21 |
22 |
--------------------------------------------------------------------------------
/src/html/documents/offscreen-bitmaprenderer.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | ${require('../fragments/head.html')}
4 |
5 | ${require('../fragments/navbar.html')}
6 |
7 |
8 |
9 |
10 |
17 | Low Res
18 |
19 |
20 |
27 | Medium Res
28 |
29 |
30 |
37 | High Res
38 |
39 |
40 |
41 |
Messages between main thread and web worker
42 |
43 |
44 |
46 | ${require('../fragments/footer.html')}
47 |
48 |
49 |
--------------------------------------------------------------------------------
/src/html/documents/offscreen-transfer.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | ${require('../fragments/head.html')}
4 |
5 | ${require('../fragments/navbar.html')}
6 |
7 |
8 |
9 |
10 |
11 |
12 |
16 | Start
17 |
18 |
22 | Stop
23 |
24 |
28 | Terminate worker
29 |
30 |
34 | Instantiate worker
35 |
36 |
37 |
38 |
39 |
40 |
41 |
48 | Canvas Transfer
49 |
50 |
51 |
52 |
Messages between main thread and web worker
53 |
54 |
55 |
56 |
58 | ${require('../fragments/footer.html')}
59 |
60 |
61 |
--------------------------------------------------------------------------------
/src/html/fragments/README.md:
--------------------------------------------------------------------------------
1 | # HTML document fragments
2 |
3 | Each file in this directory defines a HTML [DocumentFragment](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment).
4 |
5 | These fragments are reused across multiple HTML documents (i.e. pages in the application) to avoid duplicate code.
6 |
7 | The fragments are injected in a HTML document thanks to [html-loader's interpolate](https://webpack.js.org/loaders/html-loader/#interpolate) option.
8 |
--------------------------------------------------------------------------------
/src/html/fragments/footer.html:
--------------------------------------------------------------------------------
1 |
28 |
--------------------------------------------------------------------------------
/src/html/fragments/head.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
${APP_NAME}
4 |
5 |
9 |
10 |
11 |
15 |
16 |
22 |
28 |
34 |
35 |
39 |
40 |
--------------------------------------------------------------------------------
/src/html/fragments/navbar.html:
--------------------------------------------------------------------------------
1 |
2 |
10 |
11 |
12 |
14 |
15 |
35 |
36 |
--------------------------------------------------------------------------------
/src/js/404.js:
--------------------------------------------------------------------------------
1 | import "../css/index.css";
2 |
3 | import { toggleMobileNav } from "./components/navbar";
4 |
5 | window.toggleMobileNav = toggleMobileNav;
6 |
--------------------------------------------------------------------------------
/src/js/README.md:
--------------------------------------------------------------------------------
1 | # JS
2 |
3 | These files are organized in this way:
4 |
5 | - vendor: vendor code that this application relies on
6 | - [workers/](./workers/README.md): scripts that run in background threads. There are [dedicated web workers](https://developer.mozilla.org/en-US/docs/Web/API/Worker/Worker) and [shared web workers](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker).
--------------------------------------------------------------------------------
/src/js/about.js:
--------------------------------------------------------------------------------
1 | import "../css/index.css";
2 |
3 | import { toggleMobileNav } from "./components/navbar";
4 |
5 | window.toggleMobileNav = toggleMobileNav;
6 |
--------------------------------------------------------------------------------
/src/js/application.js:
--------------------------------------------------------------------------------
1 | import * as THREE from "three";
2 | // TODO: OrbitControls import three.js on its own, so the webpack bundle includes three.js twice!
3 | import OrbitControls from "orbit-controls-es6";
4 | import { Interaction } from "three.interaction";
5 |
6 | import * as Detector from "../js/vendor/Detector";
7 | import * as DAT from "../js/vendor/dat.gui.min";
8 |
9 | const checkerboard = require("../textures/checkerboard.jpg");
10 | const star = require("../textures/star.png");
11 | const vertexShader = require("../glsl/vertexShader.glsl");
12 | const fragmentShader = require("../glsl/fragmentShader.glsl");
13 |
14 | const CAMERA_NAME = "Perspective Camera";
15 | const DIRECTIONAL_LIGHT_NAME = "Directional Light";
16 | const SPOT_LIGHT_NAME = "Spotlight";
17 | const CUSTOM_MESH_NAME = "Custom Mesh";
18 |
19 | export class Application {
20 | constructor(opts) {
21 | this.showHelpers =
22 | opts && opts.showHelpers !== undefined ? opts.showHelpers : true;
23 | this.canvas = document.getElementById("application-canvas");
24 | this.container = document.querySelector("main .canvas-container-inner");
25 | this.createTooltip();
26 | this.textureLoader = new THREE.TextureLoader();
27 |
28 | if (Detector.webgl) {
29 | this.bindEventHandlers();
30 | this.init(this.canvas);
31 | this.render();
32 | } else {
33 | // console.warn("WebGL NOT supported in your browser!");
34 | const warning = Detector.getWebGLErrorMessage();
35 | this.container.appendChild(warning);
36 | }
37 | }
38 |
39 | /**
40 | * Bind event handlers to the Application instance.
41 | */
42 | bindEventHandlers() {
43 | this.handleClick = this.handleClick.bind(this);
44 | this.handleMouseMove = this.handleMouseMove.bind(this);
45 | this.handleResize = this.handleResize.bind(this);
46 | this.showTooltip = this.showTooltip.bind(this);
47 | this.hideTooltip = this.hideTooltip.bind(this);
48 | }
49 |
50 | init(canvas) {
51 | const showGUI = false;
52 | window.addEventListener("resize", this.handleResize);
53 | this.setupScene();
54 | this.setupRenderer(canvas);
55 | this.setupCamera();
56 | const interaction = new Interaction(this.renderer, this.scene, this.camera);
57 | this.setupLights();
58 | if (this.showHelpers) {
59 | this.setupHelpers();
60 | }
61 | this.setupRay();
62 | this.setupControls();
63 |
64 | if (showGUI) {
65 | this.setupGUI();
66 | }
67 |
68 | this.addFloor(100, 100);
69 | this.addCube(20);
70 | this.addCustomMesh();
71 |
72 | const particleSpecs = { spread: { x: 50, y: 100, z: 50 } };
73 | this.addParticleSystem(300, 5, particleSpecs);
74 |
75 | const boxSpecs = {
76 | depth: 20,
77 | height: 10,
78 | spread: { x: 20, y: 20, z: 50 },
79 | width: 5,
80 | };
81 | this.addGroupObject(10, boxSpecs);
82 | }
83 |
84 | render() {
85 | this.controls.update();
86 | this.updateCustomMesh();
87 | this.renderer.render(this.scene, this.camera);
88 | // when render is invoked via requestAnimationFrame(this.render) there is
89 | // no 'this', so either we bind it explicitly or use an es6 arrow function.
90 | // requestAnimationFrame(this.render.bind(this));
91 | requestAnimationFrame(() => this.render());
92 | }
93 |
94 | createTooltip() {
95 | const main = document.querySelector("main");
96 | if (!main) {
97 | alert(`You have no '
' tag on ythe HTML page. You need exactly ONE`);
98 | }
99 | const div = document.createElement("div");
100 | div.setAttribute("class", "tooltip");
101 | div.setAttribute("data-cy", "tooltip");
102 | main.appendChild(div);
103 | this.tooltip = div;
104 | }
105 |
106 | handleClick(event) {
107 | const [x, y] = this.getNDCCoordinates(event, true);
108 | this.raycaster.setFromCamera({ x, y }, this.camera);
109 | const intersects = this.raycaster.intersectObjects(this.scene.children);
110 |
111 | if (intersects.length > 0) {
112 | const hexColor = Math.random() * 0xffffff;
113 | const intersection = intersects[0];
114 | intersection.object.material.color.setHex(hexColor);
115 |
116 | const { direction, origin } = this.raycaster.ray;
117 | const arrow = new THREE.ArrowHelper(direction, origin, 100, hexColor);
118 | this.scene.add(arrow);
119 | }
120 | }
121 |
122 | handleMouseMove(event) {
123 | const [x, y] = this.getNDCCoordinates(event);
124 | }
125 |
126 | handleResize(event) {
127 | // console.warn(event);
128 | const { clientWidth, clientHeight } = this.container;
129 | this.camera.aspect = clientWidth / clientHeight;
130 | this.camera.updateProjectionMatrix();
131 | this.renderer.setSize(clientWidth, clientHeight);
132 | }
133 |
134 | showTooltip(interactionEvent) {
135 | const { name, uuid, type } = interactionEvent.target;
136 | const { x, y } = interactionEvent.data.global;
137 | const [xScreen, yScreen] = this.getScreenCoordinates(x, y);
138 | this.tooltip.innerHTML = `${name} (${type}) Click to cast a ray WebGL .here .',
40 | ].join("\n")
41 | : [
42 | 'Your browser does not seem to support WebGL .here .',
44 | ].join("\n");
45 | }
46 |
47 | return element;
48 | },
49 |
50 | addGetWebGLMessage: function(parameters) {
51 | var parent, id, element;
52 |
53 | parameters = parameters || {};
54 |
55 | parent =
56 | parameters.parent !== undefined ? parameters.parent : document.body;
57 | id = parameters.id !== undefined ? parameters.id : "oldie";
58 |
59 | element = Detector.getWebGLErrorMessage();
60 | element.id = id;
61 |
62 | parent.appendChild(element);
63 | },
64 | };
65 |
66 | // browserify support
67 | if (typeof module === "object") {
68 | module.exports = Detector;
69 | }
70 |
--------------------------------------------------------------------------------
/src/js/vendor/OBJLoader2.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Kai Salmen / https://kaisalmen.de
3 | * Development repository: https://github.com/kaisalmen/WWOBJLoader
4 | */
5 |
6 | import { FileLoader, Object3D, Loader } from "three";
7 |
8 | import { OBJLoader2Parser } from "./obj2/worker/parallel/OBJLoader2Parser";
9 | import { MeshReceiver } from "./obj2/shared/MeshReceiver";
10 | import { MaterialHandler } from "./obj2/shared/MaterialHandler";
11 |
12 | /**
13 | * Creates a new OBJLoader2. Use it to load OBJ data from files or to parse OBJ data from arraybuffer or text.
14 | *
15 | * @param {LoadingManager} [manager] The loadingManager for the loader to use. Default is {@link LoadingManager}
16 | * @constructor
17 | */
18 | const OBJLoader2 = function(manager) {
19 | Loader.call(this, manager);
20 |
21 | this.parser = new OBJLoader2Parser();
22 |
23 | this.modelName = "";
24 | this.instanceNo = 0;
25 | this.baseObject3d = new Object3D();
26 |
27 | this.materialHandler = new MaterialHandler();
28 | this.meshReceiver = new MeshReceiver(this.materialHandler);
29 |
30 | // as OBJLoader2 is no longer derived from OBJLoader2Parser, we need to override the default onAssetAvailable callback
31 | let scope = this;
32 | let defaultOnAssetAvailable = function(payload) {
33 | scope._onAssetAvailable(payload);
34 | };
35 | this.parser.setCallbackOnAssetAvailable(defaultOnAssetAvailable);
36 | };
37 |
38 | OBJLoader2.OBJLOADER2_VERSION = "3.1.1";
39 | console.info("Using OBJLoader2 version: " + OBJLoader2.OBJLOADER2_VERSION);
40 |
41 | OBJLoader2.prototype = Object.assign(Object.create(Loader.prototype), {
42 | constructor: OBJLoader2,
43 |
44 | /**
45 | * See {@link OBJLoader2Parser.setLogging}
46 | * @return {OBJLoader2}
47 | */
48 | setLogging: function(enabled, debug) {
49 | this.parser.setLogging(enabled, debug);
50 | return this;
51 | },
52 |
53 | /**
54 | * See {@link OBJLoader2Parser.setMaterialPerSmoothingGroup}
55 | * @return {OBJLoader2}
56 | */
57 | setMaterialPerSmoothingGroup: function(materialPerSmoothingGroup) {
58 | this.parser.setMaterialPerSmoothingGroup(materialPerSmoothingGroup);
59 | return this;
60 | },
61 |
62 | /**
63 | * See {@link OBJLoader2Parser.setUseOAsMesh}
64 | * @return {OBJLoader2}
65 | */
66 | setUseOAsMesh: function(useOAsMesh) {
67 | this.parser.setUseOAsMesh(useOAsMesh);
68 | return this;
69 | },
70 |
71 | /**
72 | * See {@link OBJLoader2Parser.setUseIndices}
73 | * @return {OBJLoader2}
74 | */
75 | setUseIndices: function(useIndices) {
76 | this.parser.setUseIndices(useIndices);
77 | return this;
78 | },
79 |
80 | /**
81 | * See {@link OBJLoader2Parser.setDisregardNormals}
82 | * @return {OBJLoader2}
83 | */
84 | setDisregardNormals: function(disregardNormals) {
85 | this.parser.setDisregardNormals(disregardNormals);
86 | return this;
87 | },
88 |
89 | /**
90 | * Set the name of the model.
91 | *
92 | * @param {string} modelName
93 | * @return {OBJLoader2}
94 | */
95 | setModelName: function(modelName) {
96 | this.modelName = modelName ? modelName : this.modelName;
97 | return this;
98 | },
99 |
100 | /**
101 | * Set the node where the loaded objects will be attached directly.
102 | *
103 | * @param {Object3D} baseObject3d Object already attached to scenegraph where new meshes will be attached to
104 | * @return {OBJLoader2}
105 | */
106 | setBaseObject3d: function(baseObject3d) {
107 | this.baseObject3d =
108 | baseObject3d === undefined || baseObject3d === null
109 | ? this.baseObject3d
110 | : baseObject3d;
111 | return this;
112 | },
113 |
114 | /**
115 | * Add materials as associated array.
116 | *
117 | * @param {Object} materials Object with named {@link Material}
118 | * @param overrideExisting boolean Override existing material
119 | * @return {OBJLoader2}
120 | */
121 | addMaterials: function(materials, overrideExisting) {
122 | this.materialHandler.addMaterials(materials, overrideExisting);
123 | return this;
124 | },
125 |
126 | /**
127 | * See {@link OBJLoader2Parser.setCallbackOnAssetAvailable}
128 | * @return {OBJLoader2}
129 | */
130 | setCallbackOnAssetAvailable: function(onAssetAvailable) {
131 | this.parser.setCallbackOnAssetAvailable(onAssetAvailable);
132 | return this;
133 | },
134 |
135 | /**
136 | * See {@link OBJLoader2Parser.setCallbackOnProgress}
137 | * @return {OBJLoader2}
138 | */
139 | setCallbackOnProgress: function(onProgress) {
140 | this.parser.setCallbackOnProgress(onProgress);
141 | return this;
142 | },
143 |
144 | /**
145 | * See {@link OBJLoader2Parser.setCallbackOnError}
146 | * @return {OBJLoader2}
147 | */
148 | setCallbackOnError: function(onError) {
149 | this.parser.setCallbackOnError(onError);
150 | return this;
151 | },
152 |
153 | /**
154 | * See {@link OBJLoader2Parser.setCallbackOnLoad}
155 | * @return {OBJLoader2}
156 | */
157 | setCallbackOnLoad: function(onLoad) {
158 | this.parser.setCallbackOnLoad(onLoad);
159 | return this;
160 | },
161 |
162 | /**
163 | * Register a function that is called once a single mesh is available and it could be altered by the supplied function.
164 | *
165 | * @param {Function} [onMeshAlter]
166 | * @return {OBJLoader2}
167 | */
168 | setCallbackOnMeshAlter: function(onMeshAlter) {
169 | this.meshReceiver._setCallbacks(
170 | this.parser.callbacks.onProgress,
171 | onMeshAlter
172 | );
173 | return this;
174 | },
175 |
176 | /**
177 | * Register a function that is called once all materials have been loaded and they could be altered by the supplied function.
178 | *
179 | * @param {Function} [onLoadMaterials]
180 | * @return {OBJLoader2}
181 | */
182 | setCallbackOnLoadMaterials: function(onLoadMaterials) {
183 | this.materialHandler._setCallbacks(onLoadMaterials);
184 | return this;
185 | },
186 |
187 | /**
188 | * Use this convenient method to load a file at the given URL. By default the fileLoader uses an ArrayBuffer.
189 | *
190 | * @param {string} url A string containing the path/URL of the file to be loaded.
191 | * @param {function} onLoad A function to be called after loading is successfully completed. The function receives loaded Object3D as an argument.
192 | * @param {function} [onFileLoadProgress] A function to be called while the loading is in progress. The argument will be the XMLHttpRequest instance, which contains total and Integer bytes.
193 | * @param {function} [onError] A function to be called if an error occurs during loading. The function receives the error as an argument.
194 | * @param {function} [onMeshAlter] Called after every single mesh is made available by the parser
195 | */
196 | load: function(url, onLoad, onFileLoadProgress, onError, onMeshAlter) {
197 | let scope = this;
198 | if (
199 | onLoad === null ||
200 | onLoad === undefined ||
201 | !(onLoad instanceof Function)
202 | ) {
203 | let errorMessage = "onLoad is not a function! Aborting...";
204 | scope.parser.callbacks.onError(errorMessage);
205 | throw errorMessage;
206 | } else {
207 | this.parser.setCallbackOnLoad(onLoad);
208 | }
209 | if (
210 | onError === null ||
211 | onError === undefined ||
212 | !(onError instanceof Function)
213 | ) {
214 | onError = function(event) {
215 | let errorMessage = event;
216 | if (event.currentTarget && event.currentTarget.statusText !== null) {
217 | errorMessage =
218 | "Error occurred while downloading!\nurl: " +
219 | event.currentTarget.responseURL +
220 | "\nstatus: " +
221 | event.currentTarget.statusText;
222 | }
223 | scope.parser.callbacks.onError(errorMessage);
224 | };
225 | }
226 | if (!url) {
227 | onError("An invalid url was provided. Unable to continue!");
228 | }
229 |
230 | // This does not work in a web worker because window is not available.
231 | // let urlFull = new URL(url, window.location.href).href;
232 | const urlFull = new URL(url).href;
233 |
234 | let filename = urlFull;
235 | let urlParts = urlFull.split("/");
236 | if (urlParts.length > 2) {
237 | filename = urlParts[urlParts.length - 1];
238 | let urlPartsPath = urlParts.slice(0, urlParts.length - 1).join("/") + "/";
239 | if (urlPartsPath !== undefined && urlPartsPath !== null)
240 | this.path = urlPartsPath;
241 | }
242 | if (
243 | onFileLoadProgress === null ||
244 | onFileLoadProgress === undefined ||
245 | !(onFileLoadProgress instanceof Function)
246 | ) {
247 | let numericalValueRef = 0;
248 | let numericalValue = 0;
249 | onFileLoadProgress = function(event) {
250 | if (!event.lengthComputable) return;
251 |
252 | numericalValue = event.loaded / event.total;
253 | if (numericalValue > numericalValueRef) {
254 | numericalValueRef = numericalValue;
255 | let output =
256 | 'Download of "' +
257 | url +
258 | '": ' +
259 | (numericalValue * 100).toFixed(2) +
260 | "%";
261 | scope.parser.callbacks.onProgress(
262 | "progressLoad",
263 | output,
264 | numericalValue
265 | );
266 | }
267 | };
268 | }
269 |
270 | this.setCallbackOnMeshAlter(onMeshAlter);
271 | let fileLoaderOnLoad = function(content) {
272 | scope.parser.callbacks.onLoad(
273 | scope.parse(content),
274 | "OBJLoader2#load: Parsing completed"
275 | );
276 | };
277 | let fileLoader = new FileLoader(this.manager);
278 | fileLoader.setPath(this.path || this.resourcePath);
279 | fileLoader.setResponseType("arraybuffer");
280 | fileLoader.load(filename, fileLoaderOnLoad, onFileLoadProgress, onError);
281 | },
282 |
283 | /**
284 | * Parses OBJ data synchronously from arraybuffer or string and returns the {@link Object3D}.
285 | *
286 | * @param {arraybuffer|string} content OBJ data as Uint8Array or String
287 | * @return {Object3D}
288 | */
289 | parse: function(content) {
290 | // fast-fail in case of illegal data
291 | if (content === null || content === undefined) {
292 | throw "Provided content is not a valid ArrayBuffer or String. Unable to continue parsing";
293 | }
294 | if (this.parser.logging.enabled) {
295 | console.time("OBJLoader parse: " + this.modelName);
296 | }
297 |
298 | // Create default materials beforehand, but do not override previously set materials (e.g. during init)
299 | this.materialHandler.createDefaultMaterials(false);
300 |
301 | // code works directly on the material references, parser clear its materials before updating
302 | this.parser.setMaterials(this.materialHandler.getMaterials());
303 |
304 | if (content instanceof ArrayBuffer || content instanceof Uint8Array) {
305 | if (this.parser.logging.enabled) console.info("Parsing arrayBuffer...");
306 | this.parser.execute(content);
307 | } else if (typeof content === "string" || content instanceof String) {
308 | if (this.parser.logging.enabled) console.info("Parsing text...");
309 | this.parser.executeLegacy(content);
310 | } else {
311 | this.parser.callbacks.onError(
312 | "Provided content was neither of type String nor Uint8Array! Aborting..."
313 | );
314 | }
315 | if (this.parser.logging.enabled) {
316 | console.timeEnd("OBJLoader parse: " + this.modelName);
317 | }
318 | return this.baseObject3d;
319 | },
320 |
321 | _onAssetAvailable: function(payload) {
322 | if (payload.cmd !== "assetAvailable") return;
323 |
324 | if (payload.type === "mesh") {
325 | let meshes = this.meshReceiver.buildMeshes(payload);
326 | for (let mesh of meshes) {
327 | this.baseObject3d.add(mesh);
328 | }
329 | } else if (payload.type === "material") {
330 | this.materialHandler.addPayloadMaterials(payload);
331 | }
332 | },
333 | });
334 |
335 | export { OBJLoader2 };
336 |
--------------------------------------------------------------------------------
/src/js/vendor/obj2/shared/MaterialHandler.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Kai Salmen / https://kaisalmen.de
3 | * Development repository: https://github.com/kaisalmen/WWOBJLoader
4 | */
5 | import {
6 | LineBasicMaterial,
7 | MaterialLoader,
8 | MeshStandardMaterial,
9 | PointsMaterial,
10 | VertexColors,
11 | } from "three";
12 |
13 | const MaterialHandler = function() {
14 | this.logging = {
15 | enabled: false,
16 | debug: false,
17 | };
18 |
19 | this.callbacks = {
20 | onLoadMaterials: null,
21 | };
22 | this.materials = {};
23 | };
24 |
25 | MaterialHandler.prototype = {
26 | constructor: MaterialHandler,
27 |
28 | /**
29 | * Enable or disable logging in general (except warn and error), plus enable or disable debug logging.
30 | *
31 | * @param {boolean} enabled True or false.
32 | * @param {boolean} debug True or false.
33 | */
34 | setLogging: function(enabled, debug) {
35 | this.logging.enabled = enabled === true;
36 | this.logging.debug = debug === true;
37 | },
38 |
39 | _setCallbacks: function(onLoadMaterials) {
40 | if (
41 | onLoadMaterials !== undefined &&
42 | onLoadMaterials !== null &&
43 | onLoadMaterials instanceof Function
44 | ) {
45 | this.callbacks.onLoadMaterials = onLoadMaterials;
46 | }
47 | },
48 |
49 | /**
50 | * Creates default materials and adds them to the materials object.
51 | *
52 | * @param overrideExisting boolean Override existing material
53 | */
54 | createDefaultMaterials: function(overrideExisting) {
55 | let defaultMaterial = new MeshStandardMaterial({ color: 0xdcf1ff });
56 | defaultMaterial.name = "defaultMaterial";
57 |
58 | let defaultVertexColorMaterial = new MeshStandardMaterial({
59 | color: 0xdcf1ff,
60 | });
61 | defaultVertexColorMaterial.name = "defaultVertexColorMaterial";
62 | defaultVertexColorMaterial.vertexColors = VertexColors;
63 |
64 | let defaultLineMaterial = new LineBasicMaterial();
65 | defaultLineMaterial.name = "defaultLineMaterial";
66 |
67 | let defaultPointMaterial = new PointsMaterial({ size: 0.1 });
68 | defaultPointMaterial.name = "defaultPointMaterial";
69 |
70 | let runtimeMaterials = {};
71 | runtimeMaterials[defaultMaterial.name] = defaultMaterial;
72 | runtimeMaterials[
73 | defaultVertexColorMaterial.name
74 | ] = defaultVertexColorMaterial;
75 | runtimeMaterials[defaultLineMaterial.name] = defaultLineMaterial;
76 | runtimeMaterials[defaultPointMaterial.name] = defaultPointMaterial;
77 |
78 | this.addMaterials(runtimeMaterials, overrideExisting);
79 | },
80 |
81 | /**
82 | * Updates the materials with contained material objects (sync) or from alteration instructions (async).
83 | *
84 | * @param {Object} materialPayload Material update instructions
85 | * @returns {Object} Map of {@link Material}
86 | */
87 | addPayloadMaterials: function(materialPayload) {
88 | let material, materialName;
89 | let materialCloneInstructions =
90 | materialPayload.materials.materialCloneInstructions;
91 | let newMaterials = {};
92 |
93 | if (
94 | materialCloneInstructions !== undefined &&
95 | materialCloneInstructions !== null
96 | ) {
97 | let materialNameOrg = materialCloneInstructions.materialNameOrg;
98 | materialNameOrg =
99 | materialNameOrg !== undefined && materialNameOrg !== null
100 | ? materialNameOrg
101 | : "";
102 | let materialOrg = this.materials[materialNameOrg];
103 | if (materialOrg) {
104 | material = materialOrg.clone();
105 |
106 | materialName = materialCloneInstructions.materialName;
107 | material.name = materialName;
108 |
109 | Object.assign(material, materialCloneInstructions.materialProperties);
110 |
111 | this.materials[materialName] = material;
112 | newMaterials[materialName] = material;
113 | } else {
114 | if (this.logging.enabled) {
115 | console.info(
116 | 'Requested material "' + materialNameOrg + '" is not available!'
117 | );
118 | }
119 | }
120 | }
121 |
122 | let materials = materialPayload.materials.serializedMaterials;
123 | if (
124 | materials !== undefined &&
125 | materials !== null &&
126 | Object.keys(materials).length > 0
127 | ) {
128 | let loader = new MaterialLoader();
129 | let materialJson;
130 | for (materialName in materials) {
131 | materialJson = materials[materialName];
132 | if (materialJson !== undefined && materialJson !== null) {
133 | material = loader.parse(materialJson);
134 | if (this.logging.enabled) {
135 | console.info(
136 | 'De-serialized material with name "' +
137 | materialName +
138 | '" will be added.'
139 | );
140 | }
141 | this.materials[materialName] = material;
142 | newMaterials[materialName] = material;
143 | }
144 | }
145 | }
146 | materials = materialPayload.materials.runtimeMaterials;
147 | newMaterials = this.addMaterials(materials, true, newMaterials);
148 |
149 | return newMaterials;
150 | },
151 |
152 | /**
153 | * Set materials loaded by any supplier of an Array of {@link Material}.
154 | *
155 | * @param materials Object with named {@link Material}
156 | * @param overrideExisting boolean Override existing material
157 | * @param newMaterials [Object] with named {@link Material}
158 | */
159 | addMaterials: function(materials, overrideExisting, newMaterials) {
160 | if (newMaterials === undefined || newMaterials === null) {
161 | newMaterials = {};
162 | }
163 | if (
164 | materials !== undefined &&
165 | materials !== null &&
166 | Object.keys(materials).length > 0
167 | ) {
168 | let material;
169 | let existingMaterial;
170 | let add;
171 | for (let materialName in materials) {
172 | material = materials[materialName];
173 | add = overrideExisting === true;
174 | if (!add) {
175 | existingMaterial = this.materials[materialName];
176 | add = existingMaterial === null || existingMaterial === undefined;
177 | }
178 | if (add) {
179 | this.materials[materialName] = material;
180 | newMaterials[materialName] = material;
181 | }
182 | if (this.logging.enabled && this.logging.debug) {
183 | console.info('Material with name "' + materialName + '" was added.');
184 | }
185 | }
186 | }
187 |
188 | if (this.callbacks.onLoadMaterials) {
189 | this.callbacks.onLoadMaterials(newMaterials);
190 | }
191 | return newMaterials;
192 | },
193 |
194 | /**
195 | * Returns the mapping object of material name and corresponding material.
196 | *
197 | * @returns {Object} Map of {@link Material}
198 | */
199 | getMaterials: function() {
200 | return this.materials;
201 | },
202 |
203 | /**
204 | *
205 | * @param {String} materialName
206 | * @returns {Material}
207 | */
208 | getMaterial: function(materialName) {
209 | return this.materials[materialName];
210 | },
211 |
212 | /**
213 | * Returns the mapping object of material name and corresponding jsonified material.
214 | *
215 | * @returns {Object} Map of Materials in JSON representation
216 | */
217 | getMaterialsJSON: function() {
218 | let materialsJSON = {};
219 | let material;
220 | for (let materialName in this.materials) {
221 | material = this.materials[materialName];
222 | materialsJSON[materialName] = material.toJSON();
223 | }
224 |
225 | return materialsJSON;
226 | },
227 |
228 | /**
229 | * Removes all materials
230 | */
231 | clearMaterials: function() {
232 | this.materials = {};
233 | },
234 | };
235 |
236 | export { MaterialHandler };
237 |
--------------------------------------------------------------------------------
/src/js/vendor/obj2/shared/MeshReceiver.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Kai Salmen / https://kaisalmen.de
3 | * Development repository: https://github.com/kaisalmen/WWOBJLoader
4 | */
5 |
6 | import {
7 | BufferAttribute,
8 | BufferGeometry,
9 | LineSegments,
10 | Mesh,
11 | Points,
12 | } from "three";
13 |
14 | /**
15 | *
16 | * @param {MaterialHandler} materialHandler
17 | * @constructor
18 | */
19 | const MeshReceiver = function(materialHandler) {
20 | this.logging = {
21 | enabled: false,
22 | debug: false,
23 | };
24 |
25 | this.callbacks = {
26 | onProgress: null,
27 | onMeshAlter: null,
28 | };
29 | this.materialHandler = materialHandler;
30 | };
31 |
32 | MeshReceiver.prototype = {
33 | constructor: MeshReceiver,
34 |
35 | /**
36 | * Enable or disable logging in general (except warn and error), plus enable or disable debug logging.
37 | *
38 | * @param {boolean} enabled True or false.
39 | * @param {boolean} debug True or false.
40 | */
41 | setLogging: function(enabled, debug) {
42 | this.logging.enabled = enabled === true;
43 | this.logging.debug = debug === true;
44 | },
45 |
46 | /**
47 | *
48 | * @param {Function} onProgress
49 | * @param {Function} onMeshAlter
50 | * @private
51 | */
52 | _setCallbacks: function(onProgress, onMeshAlter) {
53 | if (
54 | onProgress !== null &&
55 | onProgress !== undefined &&
56 | onProgress instanceof Function
57 | ) {
58 | this.callbacks.onProgress = onProgress;
59 | }
60 | if (
61 | onMeshAlter !== null &&
62 | onMeshAlter !== undefined &&
63 | onMeshAlter instanceof Function
64 | ) {
65 | this.callbacks.onMeshAlter = onMeshAlter;
66 | }
67 | },
68 |
69 | /**
70 | * Builds one or multiple meshes from the data described in the payload (buffers, params, material info).
71 | *
72 | * @param {Object} meshPayload Raw mesh description (buffers, params, materials) used to build one to many meshes.
73 | * @returns {Mesh[]} mesh Array of {@link Mesh}
74 | */
75 | buildMeshes: function(meshPayload) {
76 | let meshName = meshPayload.params.meshName;
77 | let buffers = meshPayload.buffers;
78 |
79 | let bufferGeometry = new BufferGeometry();
80 | if (buffers.vertices !== undefined && buffers.vertices !== null) {
81 | bufferGeometry.setAttribute(
82 | "position",
83 | new BufferAttribute(new Float32Array(buffers.vertices), 3)
84 | );
85 | }
86 | if (buffers.indices !== undefined && buffers.indices !== null) {
87 | bufferGeometry.setIndex(
88 | new BufferAttribute(new Uint32Array(buffers.indices), 1)
89 | );
90 | }
91 | if (buffers.colors !== undefined && buffers.colors !== null) {
92 | bufferGeometry.setAttribute(
93 | "color",
94 | new BufferAttribute(new Float32Array(buffers.colors), 3)
95 | );
96 | }
97 | if (buffers.normals !== undefined && buffers.normals !== null) {
98 | bufferGeometry.setAttribute(
99 | "normal",
100 | new BufferAttribute(new Float32Array(buffers.normals), 3)
101 | );
102 | } else {
103 | bufferGeometry.computeVertexNormals();
104 | }
105 | if (buffers.uvs !== undefined && buffers.uvs !== null) {
106 | bufferGeometry.setAttribute(
107 | "uv",
108 | new BufferAttribute(new Float32Array(buffers.uvs), 2)
109 | );
110 | }
111 | if (buffers.skinIndex !== undefined && buffers.skinIndex !== null) {
112 | bufferGeometry.setAttribute(
113 | "skinIndex",
114 | new BufferAttribute(new Uint16Array(buffers.skinIndex), 4)
115 | );
116 | }
117 | if (buffers.skinWeight !== undefined && buffers.skinWeight !== null) {
118 | bufferGeometry.setAttribute(
119 | "skinWeight",
120 | new BufferAttribute(new Float32Array(buffers.skinWeight), 4)
121 | );
122 | }
123 |
124 | let material, materialName, key;
125 | let materialNames = meshPayload.materials.materialNames;
126 | let createMultiMaterial = meshPayload.materials.multiMaterial;
127 | let multiMaterials = [];
128 | for (key in materialNames) {
129 | materialName = materialNames[key];
130 | material = this.materialHandler.getMaterial(materialName);
131 | if (createMultiMaterial) multiMaterials.push(material);
132 | }
133 | if (createMultiMaterial) {
134 | material = multiMaterials;
135 | let materialGroups = meshPayload.materials.materialGroups;
136 | let materialGroup;
137 | for (key in materialGroups) {
138 | materialGroup = materialGroups[key];
139 | bufferGeometry.addGroup(
140 | materialGroup.start,
141 | materialGroup.count,
142 | materialGroup.index
143 | );
144 | }
145 | }
146 |
147 | let meshes = [];
148 | let mesh;
149 | let callbackOnMeshAlterResult;
150 | let useOrgMesh = true;
151 | let geometryType =
152 | meshPayload.geometryType === null ? 0 : meshPayload.geometryType;
153 |
154 | if (this.callbacks.onMeshAlter) {
155 | callbackOnMeshAlterResult = this.callbacks.onMeshAlter({
156 | detail: {
157 | meshName: meshName,
158 | bufferGeometry: bufferGeometry,
159 | material: material,
160 | geometryType: geometryType,
161 | },
162 | });
163 | }
164 |
165 | // here LoadedMeshUserOverride is required to be provided by the callback used to alter the results
166 | if (callbackOnMeshAlterResult) {
167 | if (callbackOnMeshAlterResult.isDisregardMesh()) {
168 | useOrgMesh = false;
169 | } else if (callbackOnMeshAlterResult.providesAlteredMeshes()) {
170 | for (let i in callbackOnMeshAlterResult.meshes) {
171 | meshes.push(callbackOnMeshAlterResult.meshes[i]);
172 | }
173 | useOrgMesh = false;
174 | }
175 | }
176 | if (useOrgMesh) {
177 | if (meshPayload.computeBoundingSphere)
178 | bufferGeometry.computeBoundingSphere();
179 | if (geometryType === 0) {
180 | mesh = new Mesh(bufferGeometry, material);
181 | } else if (geometryType === 1) {
182 | mesh = new LineSegments(bufferGeometry, material);
183 | } else {
184 | mesh = new Points(bufferGeometry, material);
185 | }
186 | mesh.name = meshName;
187 | meshes.push(mesh);
188 | }
189 |
190 | let progressMessage = meshPayload.params.meshName;
191 | if (meshes.length > 0) {
192 | let meshNames = [];
193 | for (let i in meshes) {
194 | mesh = meshes[i];
195 | meshNames[i] = mesh.name;
196 | }
197 | progressMessage +=
198 | ": Adding mesh(es) (" +
199 | meshNames.length +
200 | ": " +
201 | meshNames +
202 | ") from input mesh: " +
203 | meshName;
204 | progressMessage +=
205 | " (" + (meshPayload.progress.numericalValue * 100).toFixed(2) + "%)";
206 | } else {
207 | progressMessage += ": Not adding mesh: " + meshName;
208 | progressMessage +=
209 | " (" + (meshPayload.progress.numericalValue * 100).toFixed(2) + "%)";
210 | }
211 | if (this.callbacks.onProgress) {
212 | this.callbacks.onProgress(
213 | "progress",
214 | progressMessage,
215 | meshPayload.progress.numericalValue
216 | );
217 | }
218 |
219 | return meshes;
220 | },
221 | };
222 |
223 | /**
224 | * Object to return by callback onMeshAlter. Used to disregard a certain mesh or to return one to many meshes.
225 | * @class
226 | *
227 | * @param {boolean} disregardMesh=false Tell implementation to completely disregard this mesh
228 | * @param {boolean} disregardMesh=false Tell implementation that mesh(es) have been altered or added
229 | */
230 | const LoadedMeshUserOverride = function(disregardMesh, alteredMesh) {
231 | this.disregardMesh = disregardMesh === true;
232 | this.alteredMesh = alteredMesh === true;
233 | this.meshes = [];
234 | };
235 |
236 | LoadedMeshUserOverride.prototype = {
237 | constructor: LoadedMeshUserOverride,
238 |
239 | /**
240 | * Add a mesh created within callback.
241 | *
242 | * @param {Mesh} mesh
243 | */
244 | addMesh: function(mesh) {
245 | this.meshes.push(mesh);
246 | this.alteredMesh = true;
247 | },
248 |
249 | /**
250 | * Answers if mesh shall be disregarded completely.
251 | *
252 | * @returns {boolean}
253 | */
254 | isDisregardMesh: function() {
255 | return this.disregardMesh;
256 | },
257 |
258 | /**
259 | * Answers if new mesh(es) were created.
260 | *
261 | * @returns {boolean}
262 | */
263 | providesAlteredMeshes: function() {
264 | return this.alteredMesh;
265 | },
266 | };
267 |
268 | export { MeshReceiver, LoadedMeshUserOverride };
269 |
--------------------------------------------------------------------------------
/src/js/vendor/obj2/worker/parallel/OBJLoader2Parser.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Kai Salmen / https://kaisalmen.de
3 | * Development repository: https://github.com/kaisalmen/WWOBJLoader
4 | */
5 |
6 | /**
7 | * Parse OBJ data either from ArrayBuffer or string
8 | */
9 | const OBJLoader2Parser = function() {
10 | this.logging = {
11 | enabled: false,
12 | debug: false,
13 | };
14 |
15 | let scope = this;
16 | this.callbacks = {
17 | onProgress: function(text) {
18 | scope._onProgress(text);
19 | },
20 | onAssetAvailable: function(payload) {
21 | scope._onAssetAvailable(payload);
22 | },
23 | onError: function(errorMessage) {
24 | scope._onError(errorMessage);
25 | },
26 | onLoad: function(object3d, message) {
27 | scope._onLoad(object3d, message);
28 | },
29 | };
30 | this.contentRef = null;
31 | this.legacyMode = false;
32 |
33 | this.materials = {};
34 | this.materialPerSmoothingGroup = false;
35 | this.useOAsMesh = false;
36 | this.useIndices = false;
37 | this.disregardNormals = false;
38 |
39 | this.vertices = [];
40 | this.colors = [];
41 | this.normals = [];
42 | this.uvs = [];
43 |
44 | this.rawMesh = {
45 | objectName: "",
46 | groupName: "",
47 | activeMtlName: "",
48 | mtllibName: "",
49 |
50 | // reset with new mesh
51 | faceType: -1,
52 | subGroups: [],
53 | subGroupInUse: null,
54 | smoothingGroup: {
55 | splitMaterials: false,
56 | normalized: -1,
57 | real: -1,
58 | },
59 | counts: {
60 | doubleIndicesCount: 0,
61 | faceCount: 0,
62 | mtlCount: 0,
63 | smoothingGroupCount: 0,
64 | },
65 | };
66 |
67 | this.inputObjectCount = 1;
68 | this.outputObjectCount = 1;
69 | this.globalCounts = {
70 | vertices: 0,
71 | faces: 0,
72 | doubleIndicesCount: 0,
73 | lineByte: 0,
74 | currentByte: 0,
75 | totalBytes: 0,
76 | };
77 | };
78 |
79 | OBJLoader2Parser.prototype = {
80 | constructor: OBJLoader2Parser,
81 |
82 | _resetRawMesh: function() {
83 | // faces are stored according combined index of group, material and smoothingGroup (0 or not)
84 | this.rawMesh.subGroups = [];
85 | this.rawMesh.subGroupInUse = null;
86 | this.rawMesh.smoothingGroup.normalized = -1;
87 | this.rawMesh.smoothingGroup.real = -1;
88 |
89 | // this default index is required as it is possible to define faces without 'g' or 'usemtl'
90 | this._pushSmoothingGroup(1);
91 |
92 | this.rawMesh.counts.doubleIndicesCount = 0;
93 | this.rawMesh.counts.faceCount = 0;
94 | this.rawMesh.counts.mtlCount = 0;
95 | this.rawMesh.counts.smoothingGroupCount = 0;
96 | },
97 |
98 | /**
99 | * Tells whether a material shall be created per smoothing group.
100 | *
101 | * @param {boolean} materialPerSmoothingGroup=false
102 | * @return {OBJLoader2Parser}
103 | */
104 | setMaterialPerSmoothingGroup: function(materialPerSmoothingGroup) {
105 | this.materialPerSmoothingGroup = materialPerSmoothingGroup === true;
106 | return this;
107 | },
108 |
109 | /**
110 | * Usually 'o' is meta-information and does not result in creation of new meshes, but mesh creation on occurrence of "o" can be enforced.
111 | *
112 | * @param {boolean} useOAsMesh=false
113 | * @return {OBJLoader2Parser}
114 | */
115 | setUseOAsMesh: function(useOAsMesh) {
116 | this.useOAsMesh = useOAsMesh === true;
117 | return this;
118 | },
119 |
120 | /**
121 | * Instructs loaders to create indexed {@link BufferGeometry}.
122 | *
123 | * @param {boolean} useIndices=false
124 | * @return {OBJLoader2Parser}
125 | */
126 | setUseIndices: function(useIndices) {
127 | this.useIndices = useIndices === true;
128 | return this;
129 | },
130 |
131 | /**
132 | * Tells whether normals should be completely disregarded and regenerated.
133 | *
134 | * @param {boolean} disregardNormals=false
135 | * @return {OBJLoader2Parser}
136 | */
137 | setDisregardNormals: function(disregardNormals) {
138 | this.disregardNormals = disregardNormals === true;
139 | return this;
140 | },
141 |
142 | /**
143 | * Clears materials object and sets the new ones.
144 | *
145 | * @param {Object} materials Object with named materials
146 | */
147 | setMaterials: function(materials) {
148 | this.materials = Object.assign({}, materials);
149 | },
150 |
151 | /**
152 | * Register a function that is called once an asset (mesh/material) becomes available.
153 | *
154 | * @param onAssetAvailable
155 | * @return {OBJLoader2Parser}
156 | */
157 | setCallbackOnAssetAvailable: function(onAssetAvailable) {
158 | if (
159 | onAssetAvailable !== null &&
160 | onAssetAvailable !== undefined &&
161 | onAssetAvailable instanceof Function
162 | ) {
163 | this.callbacks.onAssetAvailable = onAssetAvailable;
164 | }
165 | return this;
166 | },
167 |
168 | /**
169 | * Register a function that is used to report overall processing progress.
170 | *
171 | * @param {Function} onProgress
172 | * @return {OBJLoader2Parser}
173 | */
174 | setCallbackOnProgress: function(onProgress) {
175 | if (
176 | onProgress !== null &&
177 | onProgress !== undefined &&
178 | onProgress instanceof Function
179 | ) {
180 | this.callbacks.onProgress = onProgress;
181 | }
182 | return this;
183 | },
184 |
185 | /**
186 | * Register an error handler function that is called if errors occur. It can decide to just log or to throw an exception.
187 | *
188 | * @param {Function} onError
189 | * @return {OBJLoader2Parser}
190 | */
191 | setCallbackOnError: function(onError) {
192 | if (
193 | onError !== null &&
194 | onError !== undefined &&
195 | onError instanceof Function
196 | ) {
197 | this.callbacks.onError = onError;
198 | }
199 | return this;
200 | },
201 |
202 | /**
203 | * Register a function that is called when parsing was completed.
204 | *
205 | * @param {Function} onLoad
206 | * @return {OBJLoader2Parser}
207 | */
208 | setCallbackOnLoad: function(onLoad) {
209 | if (onLoad !== null && onLoad !== undefined && onLoad instanceof Function) {
210 | this.callbacks.onLoad = onLoad;
211 | }
212 | return this;
213 | },
214 |
215 | /**
216 | * Announce parse progress feedback which is logged to the console.
217 | * @private
218 | *
219 | * @param {string} text Textual description of the event
220 | */
221 | _onProgress: function(text) {
222 | let message = text ? text : "";
223 | if (this.logging.enabled && this.logging.debug) {
224 | console.log(message);
225 | }
226 | },
227 |
228 | /**
229 | * Announce error feedback which is logged as error message.
230 | * @private
231 | *
232 | * @param {String} errorMessage The event containing the error
233 | */
234 | _onError: function(errorMessage) {
235 | if (this.logging.enabled && this.logging.debug) {
236 | console.error(errorMessage);
237 | }
238 | },
239 |
240 | _onAssetAvailable: function(payload) {
241 | let errorMessage =
242 | "OBJLoader2Parser does not provide implementation for onAssetAvailable. Aborting...";
243 | this.callbacks.onError(errorMessage);
244 | throw errorMessage;
245 | },
246 |
247 | _onLoad: function(object3d, message) {
248 | console.log("You reached parser default onLoad callback: " + message);
249 | },
250 |
251 | /**
252 | * Enable or disable logging in general (except warn and error), plus enable or disable debug logging.
253 | *
254 | * @param {boolean} enabled True or false.
255 | * @param {boolean} debug True or false.
256 | *
257 | * @return {OBJLoader2Parser}
258 | */
259 | setLogging: function(enabled, debug) {
260 | this.logging.enabled = enabled === true;
261 | this.logging.debug = debug === true;
262 | return this;
263 | },
264 |
265 | _configure: function() {
266 | this._pushSmoothingGroup(1);
267 | if (this.logging.enabled) {
268 | let matKeys = Object.keys(this.materials);
269 | let matNames =
270 | matKeys.length > 0
271 | ? "\n\tmaterialNames:\n\t\t- " + matKeys.join("\n\t\t- ")
272 | : "\n\tmaterialNames: None";
273 | let printedConfig =
274 | "OBJLoader.Parser configuration:" +
275 | matNames +
276 | "\n\tmaterialPerSmoothingGroup: " +
277 | this.materialPerSmoothingGroup +
278 | "\n\tuseOAsMesh: " +
279 | this.useOAsMesh +
280 | "\n\tuseIndices: " +
281 | this.useIndices +
282 | "\n\tdisregardNormals: " +
283 | this.disregardNormals;
284 | printedConfig +=
285 | "\n\tcallbacks.onProgress: " + this.callbacks.onProgress.name;
286 | printedConfig +=
287 | "\n\tcallbacks.onAssetAvailable: " +
288 | this.callbacks.onAssetAvailable.name;
289 | printedConfig += "\n\tcallbacks.onError: " + this.callbacks.onError.name;
290 | console.info(printedConfig);
291 | }
292 | },
293 |
294 | /**
295 | * Parse the provided arraybuffer
296 | *
297 | * @param {Uint8Array} arrayBuffer OBJ data as Uint8Array
298 | */
299 | execute: function(arrayBuffer) {
300 | if (this.logging.enabled) console.time("OBJLoader2Parser.execute");
301 | this._configure();
302 |
303 | let arrayBufferView = new Uint8Array(arrayBuffer);
304 | this.contentRef = arrayBufferView;
305 | let length = arrayBufferView.byteLength;
306 | this.globalCounts.totalBytes = length;
307 | let buffer = new Array(128);
308 |
309 | for (
310 | let code, word = "", bufferPointer = 0, slashesCount = 0, i = 0;
311 | i < length;
312 | i++
313 | ) {
314 | code = arrayBufferView[i];
315 | switch (code) {
316 | // space
317 | case 32:
318 | if (word.length > 0) buffer[bufferPointer++] = word;
319 | word = "";
320 | break;
321 | // slash
322 | case 47:
323 | if (word.length > 0) buffer[bufferPointer++] = word;
324 | slashesCount++;
325 | word = "";
326 | break;
327 |
328 | // LF
329 | case 10:
330 | if (word.length > 0) buffer[bufferPointer++] = word;
331 | word = "";
332 | this.globalCounts.lineByte = this.globalCounts.currentByte;
333 | this.globalCounts.currentByte = i;
334 | this._processLine(buffer, bufferPointer, slashesCount);
335 | bufferPointer = 0;
336 | slashesCount = 0;
337 | break;
338 |
339 | // CR
340 | case 13:
341 | break;
342 |
343 | default:
344 | word += String.fromCharCode(code);
345 | break;
346 | }
347 | }
348 | this._finalizeParsing();
349 | if (this.logging.enabled) console.timeEnd("OBJLoader2Parser.execute");
350 | },
351 |
352 | /**
353 | * Parse the provided text
354 | *
355 | * @param {string} text OBJ data as string
356 | */
357 | executeLegacy: function(text) {
358 | if (this.logging.enabled) console.time("OBJLoader2Parser.executeLegacy");
359 | this._configure();
360 | this.legacyMode = true;
361 | this.contentRef = text;
362 | let length = text.length;
363 | this.globalCounts.totalBytes = length;
364 | let buffer = new Array(128);
365 |
366 | for (
367 | let char, word = "", bufferPointer = 0, slashesCount = 0, i = 0;
368 | i < length;
369 | i++
370 | ) {
371 | char = text[i];
372 | switch (char) {
373 | case " ":
374 | if (word.length > 0) buffer[bufferPointer++] = word;
375 | word = "";
376 | break;
377 |
378 | case "/":
379 | if (word.length > 0) buffer[bufferPointer++] = word;
380 | slashesCount++;
381 | word = "";
382 | break;
383 |
384 | case "\n":
385 | if (word.length > 0) buffer[bufferPointer++] = word;
386 | word = "";
387 | this.globalCounts.lineByte = this.globalCounts.currentByte;
388 | this.globalCounts.currentByte = i;
389 | this._processLine(buffer, bufferPointer, slashesCount);
390 | bufferPointer = 0;
391 | slashesCount = 0;
392 | break;
393 |
394 | case "\r":
395 | break;
396 |
397 | default:
398 | word += char;
399 | }
400 | }
401 | this._finalizeParsing();
402 | if (this.logging.enabled) console.timeEnd("OBJLoader2Parser.executeLegacy");
403 | },
404 |
405 | _processLine: function(buffer, bufferPointer, slashesCount) {
406 | if (bufferPointer < 1) return;
407 |
408 | let reconstructString = function(content, legacyMode, start, stop) {
409 | let line = "";
410 | if (stop > start) {
411 | let i;
412 | if (legacyMode) {
413 | for (i = start; i < stop; i++) line += content[i];
414 | } else {
415 | for (i = start; i < stop; i++)
416 | line += String.fromCharCode(content[i]);
417 | }
418 | line = line.trim();
419 | }
420 | return line;
421 | };
422 |
423 | let bufferLength, length, i, lineDesignation;
424 | lineDesignation = buffer[0];
425 | switch (lineDesignation) {
426 | case "v":
427 | this.vertices.push(parseFloat(buffer[1]));
428 | this.vertices.push(parseFloat(buffer[2]));
429 | this.vertices.push(parseFloat(buffer[3]));
430 | if (bufferPointer > 4) {
431 | this.colors.push(parseFloat(buffer[4]));
432 | this.colors.push(parseFloat(buffer[5]));
433 | this.colors.push(parseFloat(buffer[6]));
434 | }
435 | break;
436 |
437 | case "vt":
438 | this.uvs.push(parseFloat(buffer[1]));
439 | this.uvs.push(parseFloat(buffer[2]));
440 | break;
441 |
442 | case "vn":
443 | this.normals.push(parseFloat(buffer[1]));
444 | this.normals.push(parseFloat(buffer[2]));
445 | this.normals.push(parseFloat(buffer[3]));
446 | break;
447 |
448 | case "f":
449 | bufferLength = bufferPointer - 1;
450 |
451 | // "f vertex ..."
452 | if (slashesCount === 0) {
453 | this._checkFaceType(0);
454 | for (i = 2, length = bufferLength; i < length; i++) {
455 | this._buildFace(buffer[1]);
456 | this._buildFace(buffer[i]);
457 | this._buildFace(buffer[i + 1]);
458 | }
459 |
460 | // "f vertex/uv ..."
461 | } else if (bufferLength === slashesCount * 2) {
462 | this._checkFaceType(1);
463 | for (i = 3, length = bufferLength - 2; i < length; i += 2) {
464 | this._buildFace(buffer[1], buffer[2]);
465 | this._buildFace(buffer[i], buffer[i + 1]);
466 | this._buildFace(buffer[i + 2], buffer[i + 3]);
467 | }
468 |
469 | // "f vertex/uv/normal ..."
470 | } else if (bufferLength * 2 === slashesCount * 3) {
471 | this._checkFaceType(2);
472 | for (i = 4, length = bufferLength - 3; i < length; i += 3) {
473 | this._buildFace(buffer[1], buffer[2], buffer[3]);
474 | this._buildFace(buffer[i], buffer[i + 1], buffer[i + 2]);
475 | this._buildFace(buffer[i + 3], buffer[i + 4], buffer[i + 5]);
476 | }
477 |
478 | // "f vertex//normal ..."
479 | } else {
480 | this._checkFaceType(3);
481 | for (i = 3, length = bufferLength - 2; i < length; i += 2) {
482 | this._buildFace(buffer[1], undefined, buffer[2]);
483 | this._buildFace(buffer[i], undefined, buffer[i + 1]);
484 | this._buildFace(buffer[i + 2], undefined, buffer[i + 3]);
485 | }
486 | }
487 | break;
488 |
489 | case "l":
490 | case "p":
491 | bufferLength = bufferPointer - 1;
492 | if (bufferLength === slashesCount * 2) {
493 | this._checkFaceType(4);
494 | for (i = 1, length = bufferLength + 1; i < length; i += 2)
495 | this._buildFace(buffer[i], buffer[i + 1]);
496 | } else {
497 | this._checkFaceType(lineDesignation === "l" ? 5 : 6);
498 | for (i = 1, length = bufferLength + 1; i < length; i++)
499 | this._buildFace(buffer[i]);
500 | }
501 | break;
502 |
503 | case "s":
504 | this._pushSmoothingGroup(buffer[1]);
505 | break;
506 |
507 | case "g":
508 | // 'g' leads to creation of mesh if valid data (faces declaration was done before), otherwise only groupName gets set
509 | this._processCompletedMesh();
510 | this.rawMesh.groupName = reconstructString(
511 | this.contentRef,
512 | this.legacyMode,
513 | this.globalCounts.lineByte + 2,
514 | this.globalCounts.currentByte
515 | );
516 | break;
517 |
518 | case "o":
519 | // 'o' is meta-information and usually does not result in creation of new meshes, but can be enforced with "useOAsMesh"
520 | if (this.useOAsMesh) this._processCompletedMesh();
521 | this.rawMesh.objectName = reconstructString(
522 | this.contentRef,
523 | this.legacyMode,
524 | this.globalCounts.lineByte + 2,
525 | this.globalCounts.currentByte
526 | );
527 | break;
528 |
529 | case "mtllib":
530 | this.rawMesh.mtllibName = reconstructString(
531 | this.contentRef,
532 | this.legacyMode,
533 | this.globalCounts.lineByte + 7,
534 | this.globalCounts.currentByte
535 | );
536 | break;
537 |
538 | case "usemtl":
539 | let mtlName = reconstructString(
540 | this.contentRef,
541 | this.legacyMode,
542 | this.globalCounts.lineByte + 7,
543 | this.globalCounts.currentByte
544 | );
545 | if (mtlName !== "" && this.rawMesh.activeMtlName !== mtlName) {
546 | this.rawMesh.activeMtlName = mtlName;
547 | this.rawMesh.counts.mtlCount++;
548 | this._checkSubGroup();
549 | }
550 | break;
551 |
552 | default:
553 | break;
554 | }
555 | },
556 |
557 | _pushSmoothingGroup: function(smoothingGroup) {
558 | let smoothingGroupInt = parseInt(smoothingGroup);
559 | if (isNaN(smoothingGroupInt)) {
560 | smoothingGroupInt = smoothingGroup === "off" ? 0 : 1;
561 | }
562 |
563 | let smoothCheck = this.rawMesh.smoothingGroup.normalized;
564 | this.rawMesh.smoothingGroup.normalized = this.rawMesh.smoothingGroup
565 | .splitMaterials
566 | ? smoothingGroupInt
567 | : smoothingGroupInt === 0
568 | ? 0
569 | : 1;
570 | this.rawMesh.smoothingGroup.real = smoothingGroupInt;
571 |
572 | if (smoothCheck !== smoothingGroupInt) {
573 | this.rawMesh.counts.smoothingGroupCount++;
574 | this._checkSubGroup();
575 | }
576 | },
577 |
578 | /**
579 | * Expanded faceTypes include all four face types, both line types and the point type
580 | * faceType = 0: "f vertex ..."
581 | * faceType = 1: "f vertex/uv ..."
582 | * faceType = 2: "f vertex/uv/normal ..."
583 | * faceType = 3: "f vertex//normal ..."
584 | * faceType = 4: "l vertex/uv ..." or "l vertex ..."
585 | * faceType = 5: "l vertex ..."
586 | * faceType = 6: "p vertex ..."
587 | */
588 | _checkFaceType: function(faceType) {
589 | if (this.rawMesh.faceType !== faceType) {
590 | this._processCompletedMesh();
591 | this.rawMesh.faceType = faceType;
592 | this._checkSubGroup();
593 | }
594 | },
595 |
596 | _checkSubGroup: function() {
597 | let index =
598 | this.rawMesh.activeMtlName + "|" + this.rawMesh.smoothingGroup.normalized;
599 | this.rawMesh.subGroupInUse = this.rawMesh.subGroups[index];
600 |
601 | if (
602 | this.rawMesh.subGroupInUse === undefined ||
603 | this.rawMesh.subGroupInUse === null
604 | ) {
605 | this.rawMesh.subGroupInUse = {
606 | index: index,
607 | objectName: this.rawMesh.objectName,
608 | groupName: this.rawMesh.groupName,
609 | materialName: this.rawMesh.activeMtlName,
610 | smoothingGroup: this.rawMesh.smoothingGroup.normalized,
611 | vertices: [],
612 | indexMappingsCount: 0,
613 | indexMappings: [],
614 | indices: [],
615 | colors: [],
616 | uvs: [],
617 | normals: [],
618 | };
619 | this.rawMesh.subGroups[index] = this.rawMesh.subGroupInUse;
620 | }
621 | },
622 |
623 | _buildFace: function(faceIndexV, faceIndexU, faceIndexN) {
624 | let subGroupInUse = this.rawMesh.subGroupInUse;
625 | let scope = this;
626 | let updateSubGroupInUse = function() {
627 | let faceIndexVi = parseInt(faceIndexV);
628 | let indexPointerV =
629 | 3 *
630 | (faceIndexVi > 0
631 | ? faceIndexVi - 1
632 | : faceIndexVi + scope.vertices.length / 3);
633 | let indexPointerC = scope.colors.length > 0 ? indexPointerV : null;
634 |
635 | let vertices = subGroupInUse.vertices;
636 | vertices.push(scope.vertices[indexPointerV++]);
637 | vertices.push(scope.vertices[indexPointerV++]);
638 | vertices.push(scope.vertices[indexPointerV]);
639 |
640 | if (indexPointerC !== null) {
641 | let colors = subGroupInUse.colors;
642 | colors.push(scope.colors[indexPointerC++]);
643 | colors.push(scope.colors[indexPointerC++]);
644 | colors.push(scope.colors[indexPointerC]);
645 | }
646 | if (faceIndexU) {
647 | let faceIndexUi = parseInt(faceIndexU);
648 | let indexPointerU =
649 | 2 *
650 | (faceIndexUi > 0
651 | ? faceIndexUi - 1
652 | : faceIndexUi + scope.uvs.length / 2);
653 | let uvs = subGroupInUse.uvs;
654 | uvs.push(scope.uvs[indexPointerU++]);
655 | uvs.push(scope.uvs[indexPointerU]);
656 | }
657 | if (faceIndexN && !scope.disregardNormals) {
658 | let faceIndexNi = parseInt(faceIndexN);
659 | let indexPointerN =
660 | 3 *
661 | (faceIndexNi > 0
662 | ? faceIndexNi - 1
663 | : faceIndexNi + scope.normals.length / 3);
664 | let normals = subGroupInUse.normals;
665 | normals.push(scope.normals[indexPointerN++]);
666 | normals.push(scope.normals[indexPointerN++]);
667 | normals.push(scope.normals[indexPointerN]);
668 | }
669 | };
670 |
671 | if (this.useIndices) {
672 | if (this.disregardNormals) faceIndexN = undefined;
673 | let mappingName =
674 | faceIndexV +
675 | (faceIndexU ? "_" + faceIndexU : "_n") +
676 | (faceIndexN ? "_" + faceIndexN : "_n");
677 | let indicesPointer = subGroupInUse.indexMappings[mappingName];
678 | if (indicesPointer === undefined || indicesPointer === null) {
679 | indicesPointer = this.rawMesh.subGroupInUse.vertices.length / 3;
680 | updateSubGroupInUse();
681 | subGroupInUse.indexMappings[mappingName] = indicesPointer;
682 | subGroupInUse.indexMappingsCount++;
683 | } else {
684 | this.rawMesh.counts.doubleIndicesCount++;
685 | }
686 | subGroupInUse.indices.push(indicesPointer);
687 | } else {
688 | updateSubGroupInUse();
689 | }
690 | this.rawMesh.counts.faceCount++;
691 | },
692 |
693 | _createRawMeshReport: function(inputObjectCount) {
694 | return (
695 | "Input Object number: " +
696 | inputObjectCount +
697 | "\n\tObject name: " +
698 | this.rawMesh.objectName +
699 | "\n\tGroup name: " +
700 | this.rawMesh.groupName +
701 | "\n\tMtllib name: " +
702 | this.rawMesh.mtllibName +
703 | "\n\tVertex count: " +
704 | this.vertices.length / 3 +
705 | "\n\tNormal count: " +
706 | this.normals.length / 3 +
707 | "\n\tUV count: " +
708 | this.uvs.length / 2 +
709 | "\n\tSmoothingGroup count: " +
710 | this.rawMesh.counts.smoothingGroupCount +
711 | "\n\tMaterial count: " +
712 | this.rawMesh.counts.mtlCount +
713 | "\n\tReal MeshOutputGroup count: " +
714 | this.rawMesh.subGroups.length
715 | );
716 | },
717 |
718 | /**
719 | * Clear any empty subGroup and calculate absolute vertex, normal and uv counts
720 | */
721 | _finalizeRawMesh: function() {
722 | let meshOutputGroupTemp = [];
723 | let meshOutputGroup;
724 | let absoluteVertexCount = 0;
725 | let absoluteIndexMappingsCount = 0;
726 | let absoluteIndexCount = 0;
727 | let absoluteColorCount = 0;
728 | let absoluteNormalCount = 0;
729 | let absoluteUvCount = 0;
730 | let indices;
731 | for (let name in this.rawMesh.subGroups) {
732 | meshOutputGroup = this.rawMesh.subGroups[name];
733 | if (meshOutputGroup.vertices.length > 0) {
734 | indices = meshOutputGroup.indices;
735 | if (indices.length > 0 && absoluteIndexMappingsCount > 0) {
736 | for (let i = 0; i < indices.length; i++) {
737 | indices[i] = indices[i] + absoluteIndexMappingsCount;
738 | }
739 | }
740 | meshOutputGroupTemp.push(meshOutputGroup);
741 | absoluteVertexCount += meshOutputGroup.vertices.length;
742 | absoluteIndexMappingsCount += meshOutputGroup.indexMappingsCount;
743 | absoluteIndexCount += meshOutputGroup.indices.length;
744 | absoluteColorCount += meshOutputGroup.colors.length;
745 | absoluteUvCount += meshOutputGroup.uvs.length;
746 | absoluteNormalCount += meshOutputGroup.normals.length;
747 | }
748 | }
749 |
750 | // do not continue if no result
751 | let result = null;
752 | if (meshOutputGroupTemp.length > 0) {
753 | result = {
754 | name:
755 | this.rawMesh.groupName !== ""
756 | ? this.rawMesh.groupName
757 | : this.rawMesh.objectName,
758 | subGroups: meshOutputGroupTemp,
759 | absoluteVertexCount: absoluteVertexCount,
760 | absoluteIndexCount: absoluteIndexCount,
761 | absoluteColorCount: absoluteColorCount,
762 | absoluteNormalCount: absoluteNormalCount,
763 | absoluteUvCount: absoluteUvCount,
764 | faceCount: this.rawMesh.counts.faceCount,
765 | doubleIndicesCount: this.rawMesh.counts.doubleIndicesCount,
766 | };
767 | }
768 | return result;
769 | },
770 |
771 | _processCompletedMesh: function() {
772 | let result = this._finalizeRawMesh();
773 | let haveMesh = result !== null;
774 | if (haveMesh) {
775 | if (
776 | this.colors.length > 0 &&
777 | this.colors.length !== this.vertices.length
778 | ) {
779 | this.callbacks.onError(
780 | "Vertex Colors were detected, but vertex count and color count do not match!"
781 | );
782 | }
783 | if (this.logging.enabled && this.logging.debug)
784 | console.debug(this._createRawMeshReport(this.inputObjectCount));
785 | this.inputObjectCount++;
786 |
787 | this._buildMesh(result);
788 | let progressBytesPercent =
789 | this.globalCounts.currentByte / this.globalCounts.totalBytes;
790 | this._onProgress(
791 | "Completed [o: " +
792 | this.rawMesh.objectName +
793 | " g:" +
794 | this.rawMesh.groupName +
795 | "" +
796 | "] Total progress: " +
797 | (progressBytesPercent * 100).toFixed(2) +
798 | "%"
799 | );
800 | this._resetRawMesh();
801 | }
802 | return haveMesh;
803 | },
804 |
805 | /**
806 | * SubGroups are transformed to too intermediate format that is forwarded to the MeshReceiver.
807 | * It is ensured that SubGroups only contain objects with vertices (no need to check).
808 | *
809 | * @param result
810 | */
811 | _buildMesh: function(result) {
812 | let meshOutputGroups = result.subGroups;
813 |
814 | let vertexFA = new Float32Array(result.absoluteVertexCount);
815 | this.globalCounts.vertices += result.absoluteVertexCount / 3;
816 | this.globalCounts.faces += result.faceCount;
817 | this.globalCounts.doubleIndicesCount += result.doubleIndicesCount;
818 | let indexUA =
819 | result.absoluteIndexCount > 0
820 | ? new Uint32Array(result.absoluteIndexCount)
821 | : null;
822 | let colorFA =
823 | result.absoluteColorCount > 0
824 | ? new Float32Array(result.absoluteColorCount)
825 | : null;
826 | let normalFA =
827 | result.absoluteNormalCount > 0
828 | ? new Float32Array(result.absoluteNormalCount)
829 | : null;
830 | let uvFA =
831 | result.absoluteUvCount > 0
832 | ? new Float32Array(result.absoluteUvCount)
833 | : null;
834 | let haveVertexColors = colorFA !== null;
835 |
836 | let meshOutputGroup;
837 | let materialNames = [];
838 |
839 | let createMultiMaterial = meshOutputGroups.length > 1;
840 | let materialIndex = 0;
841 | let materialIndexMapping = [];
842 | let selectedMaterialIndex;
843 | let materialGroup;
844 | let materialGroups = [];
845 |
846 | let vertexFAOffset = 0;
847 | let indexUAOffset = 0;
848 | let colorFAOffset = 0;
849 | let normalFAOffset = 0;
850 | let uvFAOffset = 0;
851 | let materialGroupOffset = 0;
852 | let materialGroupLength = 0;
853 |
854 | let materialOrg, material, materialName, materialNameOrg;
855 | // only one specific face type
856 | for (let oodIndex in meshOutputGroups) {
857 | if (!meshOutputGroups.hasOwnProperty(oodIndex)) continue;
858 | meshOutputGroup = meshOutputGroups[oodIndex];
859 |
860 | materialNameOrg = meshOutputGroup.materialName;
861 | if (this.rawMesh.faceType < 4) {
862 | materialName =
863 | materialNameOrg +
864 | (haveVertexColors ? "_vertexColor" : "") +
865 | (meshOutputGroup.smoothingGroup === 0 ? "_flat" : "");
866 | } else {
867 | materialName =
868 | this.rawMesh.faceType === 6
869 | ? "defaultPointMaterial"
870 | : "defaultLineMaterial";
871 | }
872 | materialOrg = this.materials[materialNameOrg];
873 | material = this.materials[materialName];
874 |
875 | // both original and derived names do not lead to an existing material => need to use a default material
876 | if (
877 | (materialOrg === undefined || materialOrg === null) &&
878 | (material === undefined || material === null)
879 | ) {
880 | materialName = haveVertexColors
881 | ? "defaultVertexColorMaterial"
882 | : "defaultMaterial";
883 | material = this.materials[materialName];
884 | if (this.logging.enabled) {
885 | console.info(
886 | 'object_group "' +
887 | meshOutputGroup.objectName +
888 | "_" +
889 | meshOutputGroup.groupName +
890 | '" was defined with unresolvable material "' +
891 | materialNameOrg +
892 | '"! Assigning "' +
893 | materialName +
894 | '".'
895 | );
896 | }
897 | }
898 | if (material === undefined || material === null) {
899 | let materialCloneInstructions = {
900 | materialNameOrg: materialNameOrg,
901 | materialName: materialName,
902 | materialProperties: {
903 | vertexColors: haveVertexColors ? 2 : 0,
904 | flatShading: meshOutputGroup.smoothingGroup === 0,
905 | },
906 | };
907 | let payload = {
908 | cmd: "assetAvailable",
909 | type: "material",
910 | materials: {
911 | materialCloneInstructions: materialCloneInstructions,
912 | },
913 | };
914 | this.callbacks.onAssetAvailable(payload);
915 |
916 | // only set materials if they don't exist, yet
917 | let matCheck = this.materials[materialName];
918 | if (matCheck === undefined || matCheck === null) {
919 | this.materials[materialName] = materialCloneInstructions;
920 | }
921 | }
922 |
923 | if (createMultiMaterial) {
924 | // re-use material if already used before. Reduces materials array size and eliminates duplicates
925 | selectedMaterialIndex = materialIndexMapping[materialName];
926 | if (!selectedMaterialIndex) {
927 | selectedMaterialIndex = materialIndex;
928 | materialIndexMapping[materialName] = materialIndex;
929 | materialNames.push(materialName);
930 | materialIndex++;
931 | }
932 | materialGroupLength = this.useIndices
933 | ? meshOutputGroup.indices.length
934 | : meshOutputGroup.vertices.length / 3;
935 | materialGroup = {
936 | start: materialGroupOffset,
937 | count: materialGroupLength,
938 | index: selectedMaterialIndex,
939 | };
940 | materialGroups.push(materialGroup);
941 | materialGroupOffset += materialGroupLength;
942 | } else {
943 | materialNames.push(materialName);
944 | }
945 |
946 | vertexFA.set(meshOutputGroup.vertices, vertexFAOffset);
947 | vertexFAOffset += meshOutputGroup.vertices.length;
948 |
949 | if (indexUA) {
950 | indexUA.set(meshOutputGroup.indices, indexUAOffset);
951 | indexUAOffset += meshOutputGroup.indices.length;
952 | }
953 |
954 | if (colorFA) {
955 | colorFA.set(meshOutputGroup.colors, colorFAOffset);
956 | colorFAOffset += meshOutputGroup.colors.length;
957 | }
958 |
959 | if (normalFA) {
960 | normalFA.set(meshOutputGroup.normals, normalFAOffset);
961 | normalFAOffset += meshOutputGroup.normals.length;
962 | }
963 | if (uvFA) {
964 | uvFA.set(meshOutputGroup.uvs, uvFAOffset);
965 | uvFAOffset += meshOutputGroup.uvs.length;
966 | }
967 |
968 | if (this.logging.enabled && this.logging.debug) {
969 | let materialIndexLine =
970 | selectedMaterialIndex === undefined || selectedMaterialIndex === null
971 | ? ""
972 | : "\n\t\tmaterialIndex: " + selectedMaterialIndex;
973 | let createdReport =
974 | "\tOutput Object no.: " +
975 | this.outputObjectCount +
976 | "\n\t\tgroupName: " +
977 | meshOutputGroup.groupName +
978 | "\n\t\tIndex: " +
979 | meshOutputGroup.index +
980 | "\n\t\tfaceType: " +
981 | this.rawMesh.faceType +
982 | "\n\t\tmaterialName: " +
983 | meshOutputGroup.materialName +
984 | "\n\t\tsmoothingGroup: " +
985 | meshOutputGroup.smoothingGroup +
986 | materialIndexLine +
987 | "\n\t\tobjectName: " +
988 | meshOutputGroup.objectName +
989 | "\n\t\t#vertices: " +
990 | meshOutputGroup.vertices.length / 3 +
991 | "\n\t\t#indices: " +
992 | meshOutputGroup.indices.length +
993 | "\n\t\t#colors: " +
994 | meshOutputGroup.colors.length / 3 +
995 | "\n\t\t#uvs: " +
996 | meshOutputGroup.uvs.length / 2 +
997 | "\n\t\t#normals: " +
998 | meshOutputGroup.normals.length / 3;
999 | console.debug(createdReport);
1000 | }
1001 | }
1002 | this.outputObjectCount++;
1003 | this.callbacks.onAssetAvailable(
1004 | {
1005 | cmd: "assetAvailable",
1006 | type: "mesh",
1007 | progress: {
1008 | numericalValue:
1009 | this.globalCounts.currentByte / this.globalCounts.totalBytes,
1010 | },
1011 | params: {
1012 | meshName: result.name,
1013 | },
1014 | materials: {
1015 | multiMaterial: createMultiMaterial,
1016 | materialNames: materialNames,
1017 | materialGroups: materialGroups,
1018 | },
1019 | buffers: {
1020 | vertices: vertexFA,
1021 | indices: indexUA,
1022 | colors: colorFA,
1023 | normals: normalFA,
1024 | uvs: uvFA,
1025 | },
1026 | // 0: mesh, 1: line, 2: point
1027 | geometryType:
1028 | this.rawMesh.faceType < 4 ? 0 : this.rawMesh.faceType === 6 ? 2 : 1,
1029 | },
1030 | [vertexFA.buffer],
1031 | indexUA !== null ? [indexUA.buffer] : null,
1032 | colorFA !== null ? [colorFA.buffer] : null,
1033 | normalFA !== null ? [normalFA.buffer] : null,
1034 | uvFA !== null ? [uvFA.buffer] : null
1035 | );
1036 | },
1037 |
1038 | _finalizeParsing: function() {
1039 | if (this.logging.enabled)
1040 | console.info("Global output object count: " + this.outputObjectCount);
1041 | if (this._processCompletedMesh() && this.logging.enabled) {
1042 | let parserFinalReport =
1043 | "Overall counts: " +
1044 | "\n\tVertices: " +
1045 | this.globalCounts.vertices +
1046 | "\n\tFaces: " +
1047 | this.globalCounts.faces +
1048 | "\n\tMultiple definitions: " +
1049 | this.globalCounts.doubleIndicesCount;
1050 | console.info(parserFinalReport);
1051 | }
1052 | },
1053 | };
1054 |
1055 | export { OBJLoader2Parser };
1056 |
--------------------------------------------------------------------------------
/src/js/worker-actions.js:
--------------------------------------------------------------------------------
1 | // Actions sent by main thread to the web worker
2 | export const MainThreadAction = Object.freeze({
3 | INIT_WORKER_STATE: "initialize-worker-state",
4 | REQUEST_BITMAPS: "request-bitmaps",
5 | START_RENDER_LOOP: "start-render-loop",
6 | STOP_RENDER_LOOP: "stop-render-loop",
7 | });
8 |
9 | // Actions sent by the web worker to the main thread
10 | export const WorkerAction = Object.freeze({
11 | BITMAPS: "bitmaps",
12 | NOTIFY: "notify",
13 | TERMINATE_ME: "terminate-me",
14 | });
15 |
--------------------------------------------------------------------------------
/src/js/workers/bitmap-worker.js:
--------------------------------------------------------------------------------
1 | import {
2 | AmbientLight,
3 | AxesHelper,
4 | Color,
5 | CubeGeometry,
6 | DirectionalLight,
7 | GridHelper,
8 | Mesh,
9 | MeshLambertMaterial,
10 | PerspectiveCamera,
11 | Scene,
12 | WebGLRenderer,
13 | } from "three";
14 |
15 | import { MainThreadAction, WorkerAction } from "../worker-actions";
16 |
17 | const NAME = "bitmap-worker";
18 |
19 | // stop the demo after x renderers (just to test worker.terminate())
20 | const NUM_RENDER_FOR_DEMO = 300;
21 |
22 | // internal state of this web worker
23 | const state = {};
24 |
25 | /**
26 | * Initialize a Three.js scene in this web worker's state.
27 | */
28 | const initScene = ({ name = "Default Scene name", addAxesHelpers = true }) => {
29 | const scene = new Scene();
30 | scene.autoUpdate = true;
31 | const color = new Color(0x222222); // it's a dark gray
32 | scene.background = color;
33 | scene.fog = null;
34 | scene.name = name;
35 |
36 | const side = 30;
37 | const geometry = new CubeGeometry(side, side, side);
38 | const material = new MeshLambertMaterial({ color: 0xfbbc05 });
39 | const cube = new Mesh(geometry, material);
40 | cube.name = "Cube";
41 | cube.position.set(0, side / 2, 0);
42 | scene.add(cube);
43 |
44 | const gridHelper = new GridHelper(200, 16);
45 | gridHelper.name = "Floor GridHelper";
46 | scene.add(gridHelper);
47 |
48 | if (addAxesHelpers) {
49 | // XYZ axes helper (XYZ axes are RGB colors, respectively)
50 | const axesHelper = new AxesHelper(75);
51 | axesHelper.name = "XYZ AzesHelper";
52 | scene.add(axesHelper);
53 | }
54 |
55 | const dirLight = new DirectionalLight(0x4682b4, 1); // steelblue
56 | dirLight.position.set(120, 30, -200);
57 | dirLight.castShadow = true;
58 | dirLight.shadow.camera.near = 10;
59 | scene.add(dirLight);
60 |
61 | const ambientLight = new AmbientLight(0xffffff, 0.2);
62 | scene.add(ambientLight);
63 |
64 | state.scene = scene;
65 | postMessage({
66 | action: WorkerAction.NOTIFY,
67 | payload: { info: `scene '${name}' initialized` },
68 | source: NAME,
69 | });
70 | };
71 |
72 | const initRenderer = () => {
73 | if (!state.canvas) {
74 | throw new Error("Cannot initialize a renderer without a canvas");
75 | }
76 | const gl = state.canvas.getContext("webgl");
77 | state.renderer = new WebGLRenderer({
78 | antialias: true,
79 | canvas: state.canvas,
80 | });
81 |
82 | state.renderer.setClearColor(0x222222); // it's a dark gray
83 |
84 | // We are not in the DOM, so we don't have access to window.devicePixelRatio.
85 | // Maybe I could compute the aspect in the onscreen canvas and pass it here
86 | // within the message payload.
87 | state.renderer.setPixelRatio(1);
88 |
89 | // We are rendering offscreen, so there is no DOM and we cannot set the inline
90 | // style of the canvas.
91 | state.renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight, false);
92 |
93 | state.renderer.shadowMap.enabled = true;
94 |
95 | postMessage({
96 | action: WorkerAction.NOTIFY,
97 | payload: { info: "renderer initialized" },
98 | source: NAME,
99 | });
100 | };
101 |
102 | const initCamera = ({
103 | aspect = 1,
104 | far = 10000,
105 | fov,
106 | name = "Default camera name",
107 | near = 0.1,
108 | }) => {
109 | if (!state.scene) {
110 | throw new Error("Cannot initialize camera without a scene");
111 | }
112 | state.camera = new PerspectiveCamera(fov, aspect, near, far);
113 | state.camera.name = name;
114 | state.camera.position.set(100, 100, 100);
115 | state.camera.lookAt(state.scene.position);
116 |
117 | postMessage({
118 | action: WorkerAction.NOTIFY,
119 | payload: { info: `camera '${state.camera.name}' initialized` },
120 | source: NAME,
121 | });
122 | };
123 |
124 | const initState = payload => {
125 | const { height, sceneName, width } = payload;
126 | state.canvas = new OffscreenCanvas(width, height);
127 |
128 | initScene({ addAxesHelpers: false, sceneName });
129 |
130 | const cameraConfig = {
131 | aspect: state.canvas.width / state.canvas.height,
132 | fov: 75,
133 | name: "My Perspective Camera",
134 | };
135 | initCamera(cameraConfig);
136 |
137 | initRenderer();
138 |
139 | state.counter = 0;
140 | };
141 |
142 | const set2DRenderingContexts = resolutions => {
143 | const contexts = resolutions.map(r => {
144 | const canvas = new OffscreenCanvas(r.width, r.height);
145 | return canvas.getContext("2d");
146 | });
147 | state.contexts = contexts;
148 | };
149 |
150 | /**
151 | * Render the scene to the offscreen canvas, then create a bitmap and send it to
152 | * the main thread with a zero-copy operation.
153 | *
154 | * We call the transferToImageBitmap method on the offscreen canvas and send the
155 | * bitmap to the main thread synchronously.
156 | *
157 | * Note: requestAnimationFrame and cancelAnimationFrame are available for web
158 | * workers. But we can also use requestAnimationFrame in the main thread and
159 | * send a message to the web worker requesting a new bitmap when the main thread
160 | * needs it.
161 | */
162 | const render = resolutions => {
163 | // This web worker has some internal state. If these conditions are not
164 | // satisfied we crash and burn, so the main thread knows there is a problem.
165 | if (!state.renderer) {
166 | throw new Error(
167 | `Cannot call "render" without a renderer in ${NAME}'s state`
168 | );
169 | }
170 | if (!state.canvas) {
171 | throw new Error(`Cannot call "render" without a canvas in ${NAME}'s state`);
172 | }
173 | if (!state.camera) {
174 | throw new Error(`Cannot call "render" without a camera in ${NAME}'s state`);
175 | }
176 | if (!state.scene) {
177 | throw new Error(`Cannot call "render" without a scene in ${NAME}'s state`);
178 | }
179 |
180 | // signal to the main thread that this web worker is done, so this worker's
181 | // heap can be freed. You can see that this web worker's heap disappears in
182 | // the Chrome Dev Tools Memory tab.
183 | if (state.counter > NUM_RENDER_FOR_DEMO) {
184 | state.scene.dispose();
185 | postMessage({ action: WorkerAction.TERMINATE_ME, source: NAME });
186 | }
187 |
188 | // render the scene in a "source" OffscreenCanvas only once
189 | state.renderer.render(state.scene, state.camera);
190 |
191 | // copy the "source" canvas to N "destination" canvases, one for each
192 | // requested bitmap
193 | const bitmaps = state.contexts.map((ctx, i) => {
194 | ctx.globalCompositeOperation = "copy";
195 | // ctx.fillStyle = "rgb(200,0,0)";
196 | // ctx.fillRect(10, 10, 55, 50);
197 | const { width, height } = resolutions[i];
198 | // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
199 | ctx.drawImage(state.canvas, 0, 0, width, height);
200 | return ctx.canvas.transferToImageBitmap();
201 | });
202 |
203 | // in other use-cases the web worker could send back a `Blob` with
204 | // `canvas.convertToBlob().then(blob => postMessage({ blob }, [blob]))`
205 |
206 | const message = {
207 | action: WorkerAction.BITMAPS,
208 | payload: { bitmaps },
209 | source: NAME,
210 | };
211 |
212 | // ImageBitmap implements the Transerable interface, so we can send it to the
213 | // main thread WITHOUT using the structured clone algorithm. In other words,
214 | // this `postMessage` is a ZERO-COPY operation: we are passing each bitmap BY
215 | // REFERENCE, NOT BY VALUE.
216 | // https://developer.mozilla.org/en-US/docs/Web/API/Transferable
217 | // https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm
218 | postMessage(message, bitmaps);
219 | };
220 |
221 | const style = "color: red; font-weight: normal";
222 |
223 | const onMessage = event => {
224 | const label = `[${event.data.source} --> ${NAME}] - ${event.data.action}`;
225 | // console.groupCollapsed(`%c${label}`, style);
226 | // if (event.data.payload) {
227 | // console.log(`payload: ${JSON.stringify(event.data.payload)}`);
228 | // // console.table(event.data);
229 | // }
230 | // console.groupEnd();
231 | console.log(`%c${label}`, style);
232 |
233 | switch (event.data.action) {
234 | case MainThreadAction.INIT_WORKER_STATE:
235 | console.log("SELF NAME (DedicatedWorkerGlobalScope name)", self.name);
236 | initState(event.data.payload);
237 | break;
238 | case MainThreadAction.REQUEST_BITMAPS: {
239 | state.counter++;
240 | state.camera.rotateZ(0.2);
241 | set2DRenderingContexts(event.data.payload.resolutions);
242 | render(event.data.payload.resolutions);
243 | break;
244 | }
245 | default: {
246 | console.warn(`${NAME} received a message that does not handle`, event);
247 | }
248 | }
249 | };
250 | onmessage = onMessage;
251 |
--------------------------------------------------------------------------------
/src/js/workers/transfer-worker.js:
--------------------------------------------------------------------------------
1 | import {
2 | AmbientLight,
3 | AxesHelper,
4 | CanvasTexture,
5 | Color,
6 | CubeGeometry,
7 | DirectionalLight,
8 | GridHelper,
9 | ImageBitmapLoader,
10 | LoadingManager,
11 | Mesh,
12 | MeshBasicMaterial,
13 | MeshLambertMaterial,
14 | ObjectLoader,
15 | PerspectiveCamera,
16 | Scene,
17 | WebGLRenderer,
18 | } from "three";
19 |
20 | import { MainThreadAction, WorkerAction } from "../worker-actions";
21 | import { OBJLoader2 } from "../vendor/OBJLoader2";
22 | import * as relativeURL from "../../models/male02.obj";
23 |
24 | // https://bwasty.github.io/gltf-loader-ts/index.html
25 | // https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/
26 | // https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_gltf.html
27 | import { GltfLoader } from "gltf-loader-ts";
28 |
29 | const NAME = "transfer-worker";
30 |
31 | const gltfLoader = new GltfLoader();
32 |
33 | const makeScene = name => {
34 | const scene = new Scene();
35 | scene.autoUpdate = true;
36 | const color = new Color(0x222222); // it's a dark gray
37 | scene.background = color;
38 | scene.fog = null;
39 | // Any Three.js object in the scene (and the scene itself) can have a name.
40 | scene.name = name;
41 |
42 | const side = 10;
43 | const geometry = new CubeGeometry(side, side, side);
44 | const material = new MeshLambertMaterial({ color: 0xfbbc05 });
45 | const cube = new Mesh(geometry, material);
46 | cube.name = "Cube";
47 | cube.position.set(0, side / 2, 0);
48 | scene.add(cube);
49 |
50 | const gridHelper = new GridHelper(200, 16);
51 | gridHelper.name = "Floor GridHelper";
52 | scene.add(gridHelper);
53 |
54 | // XYZ axes helper (XYZ axes are RGB colors, respectively)
55 | const axesHelper = new AxesHelper(75);
56 | axesHelper.name = "XYZ AzesHelper";
57 | scene.add(axesHelper);
58 |
59 | const dirLight = new DirectionalLight(0x4682b4, 1); // steelblue
60 | dirLight.position.set(120, 30, -200);
61 | dirLight.castShadow = true;
62 | dirLight.shadow.camera.near = 10;
63 | scene.add(dirLight);
64 |
65 | const ambientLight = new AmbientLight(0xffffff, 0.2);
66 | scene.add(ambientLight);
67 |
68 | return scene;
69 | };
70 |
71 | const makeRenderer = canvas => {
72 | const gl = canvas.getContext("webgl");
73 | const renderer = new WebGLRenderer({
74 | antialias: true,
75 | canvas,
76 | });
77 |
78 | renderer.setClearColor(0x222222); // it's a dark gray
79 |
80 | // We are not in the DOM, so we don't have access to window.devicePixelRatio.
81 | // Maybe I could compute the aspect in the onscreen canvas and pass it here
82 | // within the message payload.
83 | renderer.setPixelRatio(1);
84 |
85 | // We are rendering offscreen, so there is no DOM and we cannot set the inline
86 | // style of the canvas.
87 | const updateStyle = false;
88 | renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight, updateStyle);
89 | renderer.shadowMap.enabled = true;
90 | return renderer;
91 | };
92 |
93 | const makeCamera = (canvas, scene) => {
94 | const fov = 75;
95 | // There are no clientWith and clientHeight in an OffscreenCanvas
96 | // const { clientWidth, clientHeight } = canvas;
97 | // const aspect = clientWidth / clientHeight;
98 | const aspect = canvas.width / canvas.height;
99 | const near = 0.1;
100 | const far = 10000;
101 | const camera = new PerspectiveCamera(fov, aspect, near, far);
102 | camera.name = "my-camera";
103 | // camera.position.set(100, 100, 100);
104 | // Axes Helpers: RED (X), GREEN (Y), BLUE (Z)
105 | camera.position.set(100, 50, 200);
106 | camera.lookAt(scene.position);
107 |
108 | return camera;
109 | };
110 |
111 | const tryGltf = uri => {
112 | return new Promise((resolve, reject) => {
113 | return gltfLoader
114 | .load(uri)
115 | .then(asset => {
116 | // console.log("tryGltf -> asset", asset);
117 | const gltf = asset.gltf;
118 | // console.log("GLTF", gltf);
119 | resolve(gltf);
120 | })
121 | .catch(err => {
122 | reject(err);
123 | });
124 | });
125 | };
126 |
127 | // async function tryGltf(uri) {
128 | // const asset = await gltfLoader.load(uri);
129 | // console.log("tryGltf -> asset", asset);
130 | // let gltf = asset.gltf;
131 | // console.log("GLTF", gltf);
132 | // // let data = await asset.accessorData(0); // fetches BoxTextured0.bin
133 | // // let image: Image = await asset.imageData.get(0); // fetches CesiumLogoFlat.png
134 | // }
135 |
136 | const init = payload => {
137 | const { canvas, sceneName } = payload;
138 |
139 | postMessage({
140 | action: WorkerAction.NOTIFY,
141 | payload: { info: `[${NAME}] - scene initialized` },
142 | source: NAME,
143 | });
144 | const scene = makeScene(sceneName);
145 |
146 | postMessage({
147 | action: WorkerAction.NOTIFY,
148 | payload: { info: `[${NAME}] - renderer inizialized` },
149 | source: NAME,
150 | });
151 | const renderer = makeRenderer(canvas);
152 |
153 | postMessage({
154 | action: WorkerAction.NOTIFY,
155 | payload: { info: `[${NAME}] - camera inizialized` },
156 | source: NAME,
157 | });
158 | const camera = makeCamera(canvas, scene);
159 |
160 | const onManagerLoad = () => {
161 | postMessage({
162 | action: WorkerAction.NOTIFY,
163 | payload: {
164 | info: `[${NAME}] - Loaded all items`,
165 | },
166 | source: NAME,
167 | });
168 | };
169 |
170 | const onManagerProgress = (item, loaded, total) => {
171 | // console.log("LoadingManager progress:", item, loaded, total);
172 | postMessage({
173 | action: WorkerAction.NOTIFY,
174 | payload: {
175 | info: `[${NAME}] - Loaded ${loaded} of ${total} items`,
176 | },
177 | source: NAME,
178 | });
179 | };
180 |
181 | const onManagerStart = (url, itemsLoaded, itemsTotal) => {
182 | postMessage({
183 | action: WorkerAction.NOTIFY,
184 | payload: {
185 | info: `[${NAME}] - started loading file ${url} (Loaded ${itemsLoaded} of ${itemsTotal} items)`,
186 | },
187 | source: NAME,
188 | });
189 | };
190 |
191 | const onManagerError = error => {
192 | console.error("ERROR IN LOADING MANAGER", error);
193 | };
194 |
195 | const manager = new LoadingManager(
196 | onManagerLoad,
197 | onManagerProgress,
198 | onManagerError
199 | );
200 | manager.onStart = onManagerStart;
201 |
202 | const objectLoader = new ObjectLoader(manager);
203 | const bitmapLoader = new ImageBitmapLoader(manager);
204 | bitmapLoader.setOptions({ imageOrientation: "flipY" });
205 |
206 | const objLoader = new OBJLoader2(manager);
207 |
208 | const objURL = PUBLIC_URL.includes("github.io")
209 | ? `${PUBLIC_URL}/${relativeURL}`
210 | : `http://localhost:8080/${relativeURL}`;
211 |
212 | console.log(
213 | "=== PUBLIC_URL ===",
214 | PUBLIC_URL,
215 | "relativeURL",
216 | relativeURL,
217 | "objURL (3D model)",
218 | objURL
219 | );
220 |
221 | objLoader.load(objURL, object3D => {
222 | object3D.name = "male02";
223 | scene.add(object3D);
224 | });
225 |
226 | const onObjectLoad = object3D => {
227 | // console.log("=== object3D ===", object3D);
228 | const name = object3D.name || "unnamed-object";
229 | const info = `[${NAME}] - Loaded ${name} (geometry: ${object3D.geometry.type}, material: ${object3D.material.type})`;
230 | postMessage({
231 | action: WorkerAction.NOTIFY,
232 | payload: {
233 | info,
234 | },
235 | source: NAME,
236 | });
237 | // object3D.traverse(function(child) {
238 | // console.log("child", child);
239 | // if (child.isMesh) {
240 | // child.material.map = texture;
241 | // }
242 | // });
243 | object3D.position.set(50, 0, 50);
244 | object3D.scale.set(15, 15, 15);
245 | state.scene.add(object3D);
246 | };
247 |
248 | const onProgress = xhr => {
249 | if (xhr.lengthComputable) {
250 | const percentComplete = Math.round((xhr.loaded / xhr.total) * 100);
251 | postMessage({
252 | action: WorkerAction.NOTIFY,
253 | payload: {
254 | info: `[${NAME}] - downloading model (${percentComplete}%)`,
255 | },
256 | source: NAME,
257 | });
258 | }
259 | };
260 |
261 | const onError = error => {
262 | console.error("ERROR IN LOADER", error);
263 | };
264 |
265 | const url =
266 | "https://raw.githubusercontent.com/mrdoob/three.js/master/examples/models/json/teapot-claraio.json";
267 | objectLoader.load(url, onObjectLoad, onProgress, onError);
268 |
269 | // This one fails because it tries to access `window`, which of course is not
270 | // available in a web worker.
271 | // const url2 =
272 | // "https://raw.githubusercontent.com/mrdoob/three.js/master/examples/models/json/multimaterial.json";
273 | // objectLoader.load(url2, onLoad, onProgress, onError);
274 |
275 | const onBitmapLoad = bitmap => {
276 | const info = `[${NAME}] - Loaded bitmap (${bitmap.width}x${bitmap.height})`;
277 | postMessage({
278 | action: WorkerAction.NOTIFY,
279 | payload: {
280 | info,
281 | },
282 | source: NAME,
283 | });
284 | const texture = new CanvasTexture(bitmap);
285 | const materialWithTexture = new MeshBasicMaterial({ map: texture });
286 |
287 | const geom = new CubeGeometry(30, 30, 30);
288 | const cube = new Mesh(geom, materialWithTexture);
289 | cube.name = "Cube with textured material";
290 | cube.position.set(-50, 50, 50);
291 | scene.add(cube);
292 | };
293 |
294 | bitmapLoader.load(
295 | "https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/planets/earth_atmos_2048.jpg",
296 | onBitmapLoad,
297 | // onProgress callback currently not supported
298 | undefined,
299 | onError
300 | );
301 |
302 | tryGltf(
303 | "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxTextured/glTF/BoxTextured.gltf"
304 | )
305 | .then(glft => {
306 | console.log("glft", glft);
307 | // scene.add( gltf.scene );
308 |
309 | // gltf.animations; // Array
310 | // gltf.scene; // THREE.Group
311 | // gltf.scenes; // Array
312 | // gltf.cameras; // Array
313 | // gltf.asset; // Object
314 | })
315 | .catch(err => {
316 | console.log("err with gltf", err);
317 | });
318 |
319 | state.camera = camera;
320 | state.canvas = canvas;
321 | state.error = undefined;
322 | state.renderer = renderer;
323 | state.reqId = performance.now();
324 | state.scene = scene;
325 | };
326 |
327 | /**
328 | * Render the scene to the offscreen canvas.
329 | *
330 | * The scene rendered in the offscreen canvas appears automatically on the
331 | * onscreen canvas because the main thread transferred the ownership of the
332 | * rendering context to the offscreen canvas managed by this web worker.
333 | * The onscreen canvas is updated automatically and asynchronously.
334 | */
335 | const render = tick => {
336 | // We could use the tick to control the animation.
337 | if (!state.renderer) {
338 | state.error = new Error(
339 | `Cannot call "render" without a renderer in ${NAME}'s state`
340 | );
341 | return;
342 | }
343 | if (!state.canvas) {
344 | state.error = new Error(
345 | `Cannot call "render" without a canvas in ${NAME}'s state`
346 | );
347 | return;
348 | }
349 | if (!state.camera) {
350 | state.error = new Error(
351 | `Cannot call "render" without a camera in ${NAME}'s state`
352 | );
353 | return;
354 | }
355 | if (!state.scene) {
356 | state.error = new Error(
357 | `Cannot call "render" without a scene in ${NAME}'s state`
358 | );
359 | return;
360 | }
361 |
362 | // If we made it here, the web worker can safely render the scene.
363 | const male02 = state.scene.getObjectByName("male02");
364 | // console.log("Math.sin(tick)", Math.sin(tick));
365 | male02.rotateY(0.03);
366 | // male02.rotateZ(0.05);
367 | state.renderer.render(state.scene, state.camera);
368 |
369 | // Maybe the main thread is interested in knowing what this web worker is
370 | // doing, so we notify it about what has been done. Please note that the main
371 | // thread doesn't have to do anything, and CANNOT do anything on the canvas on
372 | // the screen, because it transferred the ownership of that canvas to the web
373 | // worker. So basically the visible, onscreen canvas is just a proxy for the
374 | // offscreen canvas.
375 | postMessage({
376 | action: WorkerAction.NOTIFY,
377 | payload: { info: `[${NAME}] - render loop` },
378 | source: NAME,
379 | });
380 | };
381 |
382 | let state = {
383 | camera: undefined,
384 | canvas: undefined,
385 | error: undefined,
386 | renderer: undefined,
387 | reqId: undefined,
388 | scene: undefined,
389 | };
390 |
391 | const style = "color: red; font-weight: normal";
392 |
393 | const onMessage = event => {
394 | // console.log(`%c${event.data.action}`, "color: red");
395 | const text = `[${event.data.source} --> ${NAME}] - ${event.data.action}`;
396 | console.log(`%c${text}`, style);
397 |
398 | switch (event.data.action) {
399 | case MainThreadAction.INIT_WORKER_STATE: {
400 | console.log("SELF NAME (DedicatedWorkerGlobalScope name)", self.name);
401 | init(event.data.payload);
402 | break;
403 | }
404 | case MainThreadAction.START_RENDER_LOOP: {
405 | renderLoop();
406 | break;
407 | }
408 | case MainThreadAction.STOP_RENDER_LOOP: {
409 | cancelAnimationFrame(state.reqId);
410 | break;
411 | }
412 | default: {
413 | console.warn(`${NAME} received a message that does not handle`, event);
414 | }
415 | }
416 | };
417 | onmessage = onMessage;
418 |
419 | const renderLoop = tick => {
420 | // state.camera.rotateZ(0.05);
421 | render(tick);
422 | if (state.error) {
423 | postMessage({
424 | action: WorkerAction.NOTIFY,
425 | payload: {
426 | info: `[${NAME}] - error: ${state.error.message}. Please terminate me.`,
427 | },
428 | source: NAME,
429 | });
430 | cancelAnimationFrame(state.reqId);
431 | postMessage({ action: WorkerAction.TERMINATE_ME, source: NAME });
432 | } else {
433 | state.reqId = requestAnimationFrame(renderLoop);
434 | }
435 | };
436 |
--------------------------------------------------------------------------------
/src/models/README.md:
--------------------------------------------------------------------------------
1 | # Models
2 |
3 | This directory contains 3D models in various formats.
4 |
5 | Each 3D model is emitted as a file in the output director, and can be required in JS, thanks to Webpack [file-loader](https://webpack.js.org/loaders/file-loader/).
6 |
7 | Here is the list of 3D models used in the application:
8 |
9 | - [male02](https://github.com/mrdoob/three.js/tree/master/examples/models/obj/male02/male02.obj)
10 |
--------------------------------------------------------------------------------
/src/textures/checkerboard.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jackdbd/threejs-es6-webpack-starter/e4b00bbbfdb93016fbd486ec4a4b3456587b61fd/src/textures/checkerboard.jpg
--------------------------------------------------------------------------------
/src/textures/star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jackdbd/threejs-es6-webpack-starter/e4b00bbbfdb93016fbd486ec4a4b3456587b61fd/src/textures/star.png
--------------------------------------------------------------------------------