332 | varying vec2 vUv;
333 | uniform sampler2D colorTexture;
334 | uniform vec2 texSize;
335 | uniform vec2 direction;
336 |
337 | float gaussianPdf(in float x, in float sigma) {
338 | return 0.39894 * exp( -0.5 * x * x/( sigma * sigma))/sigma;
339 | }
340 | void main() {
341 | vec2 invSize = 1.0 / texSize;
342 | float fSigma = float(SIGMA);
343 | float weightSum = gaussianPdf(0.0, fSigma);
344 | vec3 diffuseSum = texture2D( colorTexture, vUv).rgb * weightSum;
345 | for( int i = 1; i < KERNEL_RADIUS; i ++ ) {
346 | float x = float(i);
347 | float w = gaussianPdf(x, fSigma);
348 | vec2 uvOffset = direction * invSize * x;
349 | vec3 sample1 = texture2D( colorTexture, vUv + uvOffset).rgb;
350 | vec3 sample2 = texture2D( colorTexture, vUv - uvOffset).rgb;
351 | diffuseSum += (sample1 + sample2) * w;
352 | weightSum += 2.0 * w;
353 | }
354 | gl_FragColor = vec4(diffuseSum/weightSum, 1.0);
355 | }`
356 | });
357 | },
358 |
359 | getCompositeMaterial: function(nMips) {
360 | return new ShaderMaterial({
361 | defines: {
362 | NUM_MIPS: nMips
363 | },
364 |
365 | uniforms: {
366 | blurTexture1: { value: null },
367 | blurTexture2: { value: null },
368 | blurTexture3: { value: null },
369 | blurTexture4: { value: null },
370 | blurTexture5: { value: null },
371 | dirtTexture: { value: null },
372 | bloomStrength: { value: 1.0 },
373 | bloomFactors: { value: null },
374 | bloomTintColors: { value: null },
375 | bloomRadius: { value: 0.0 }
376 | },
377 |
378 | vertexShader: `varying vec2 vUv;
379 | void main() {
380 | vUv = uv;
381 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
382 | }`,
383 |
384 | fragmentShader: `varying vec2 vUv;
385 | uniform sampler2D blurTexture1;
386 | uniform sampler2D blurTexture2;
387 | uniform sampler2D blurTexture3;
388 | uniform sampler2D blurTexture4;
389 | uniform sampler2D blurTexture5;
390 | uniform sampler2D dirtTexture;
391 | uniform float bloomStrength;
392 | uniform float bloomRadius;
393 | uniform float bloomFactors[NUM_MIPS];
394 | uniform vec3 bloomTintColors[NUM_MIPS];
395 |
396 | float lerpBloomFactor(const in float factor) {
397 | float mirrorFactor = 1.2 - factor;
398 | return mix(factor, mirrorFactor, bloomRadius);
399 | }
400 |
401 | void main() {
402 | gl_FragColor = bloomStrength * ( lerpBloomFactor(bloomFactors[0]) * vec4(bloomTintColors[0], 1.0) * texture2D(blurTexture1, vUv) +
403 | lerpBloomFactor(bloomFactors[1]) * vec4(bloomTintColors[1], 1.0) * texture2D(blurTexture2, vUv) +
404 | lerpBloomFactor(bloomFactors[2]) * vec4(bloomTintColors[2], 1.0) * texture2D(blurTexture3, vUv) +
405 | lerpBloomFactor(bloomFactors[3]) * vec4(bloomTintColors[3], 1.0) * texture2D(blurTexture4, vUv) +
406 | lerpBloomFactor(bloomFactors[4]) * vec4(bloomTintColors[4], 1.0) * texture2D(blurTexture5, vUv) );
407 | }`
408 | });
409 | }
410 | });
411 |
412 | UnrealBloomPass.BlurDirectionX = new Vector2(1.0, 0.0);
413 | UnrealBloomPass.BlurDirectionY = new Vector2(0.0, 1.0);
414 |
415 | export default UnrealBloomPass;
416 |
--------------------------------------------------------------------------------
/src/game/graphics/renderer.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from "react";
2 | import * as THREE from 'three';
3 | import EffectComposer from "./effect-composer";
4 | import RenderPass from "./passes/render-pass";
5 | import _ from "lodash";
6 |
7 | //-- https://medium.com/@colesayershapiro/using-three-js-in-react-6cb71e87bdf4
8 | //-- https://medium.com/@summerdeehan/a-beginners-guide-to-using-three-js-react-and-webgl-to-build-a-3d-application-with-interaction-5d7b2c7ca89a
9 | //-- https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
10 |
11 | class ThreeView extends PureComponent {
12 |
13 | componentDidMount() {
14 | const container = this.refs.container;
15 | const width = container.clientWidth;
16 | const height = container.clientHeight;
17 | const dpr = window.devicePixelRatio;
18 |
19 | this.props.camera.resize(width, height, dpr);
20 | this.renderer = new THREE.WebGLRenderer({ });
21 | this.renderer.setPixelRatio(dpr);
22 | this.renderer.setSize(width, height);
23 | this.renderer.setClearColor(0x020202, 1.0);
24 | this.composer = new EffectComposer(this.renderer);
25 |
26 | const passes = [
27 | new RenderPass(this.props.scene, this.props.camera),
28 | ...this.props.passes
29 | ]
30 |
31 | passes.forEach(p => this.composer.addPass(p))
32 | passes[passes.length-1].renderToScreen = true;
33 |
34 | window.addEventListener("resize", this.onResize);
35 |
36 | container.appendChild(this.renderer.domElement)
37 | }
38 |
39 | componentWillUnmount() {
40 | window.removeEventListener("resize", this.onResize);
41 |
42 | const container = this.refs.container;
43 | container.removeChild(this.renderer.domElement)
44 | }
45 |
46 | onResize = () => {
47 | const container = this.refs.container;
48 | const width = container.clientWidth;
49 | const height = container.clientHeight;
50 | const dpr = window.devicePixelRatio;
51 |
52 | this.props.camera.resize(width, height, dpr);
53 | this.renderer.setPixelRatio(dpr);
54 | this.renderer.setSize(width, height);
55 | };
56 |
57 | render() {
58 | if (this.composer) {
59 | this.composer.render();
60 | }
61 |
62 | return (
63 |
64 | );
65 | }
66 | }
67 |
68 | const css = {
69 | container: {
70 | height: "100vh",
71 | width: "100vw",
72 | overflow: "hidden"
73 | }
74 | }
75 |
76 | const renderHUD = (entities, window) => {
77 | if (!entities.hud) return null;
78 |
79 | const hud = entities.hud;
80 |
81 | if (typeof hud.renderer === "object")
82 | return ;
83 | else if (typeof hud.renderer === "function")
84 | return ;
85 | };
86 |
87 | const ThreeJSRenderer = (...passes) => (entities, window) => {
88 | if (!entities) return null;
89 | return [
90 | ,
96 | renderHUD(entities, window)
97 | ];
98 | };
99 |
100 | export default ThreeJSRenderer;
101 |
--------------------------------------------------------------------------------
/src/game/graphics/shaders/copy-shader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author alteredq / http://alteredqualia.com/
3 | *
4 | * Full-screen textured quad shader
5 | */
6 |
7 | const CopyShader = {
8 |
9 | uniforms: {
10 |
11 | "tDiffuse": { value: null },
12 | "opacity": { value: 1.0 }
13 |
14 | },
15 |
16 | vertexShader: [
17 |
18 | "varying vec2 vUv;",
19 |
20 | "void main() {",
21 |
22 | "vUv = uv;",
23 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
24 |
25 | "}"
26 |
27 | ].join( "\n" ),
28 |
29 | fragmentShader: [
30 |
31 | "uniform float opacity;",
32 |
33 | "uniform sampler2D tDiffuse;",
34 |
35 | "varying vec2 vUv;",
36 |
37 | "void main() {",
38 |
39 | "vec4 texel = texture2D( tDiffuse, vUv );",
40 | "gl_FragColor = opacity * texel;",
41 |
42 | "}"
43 |
44 | ].join( "\n" )
45 |
46 | };
47 |
48 | export default CopyShader;
--------------------------------------------------------------------------------
/src/game/graphics/shaders/luminosity-high-pass-shader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author bhouston / http://clara.io/
3 | *
4 | * Luminosity
5 | * http://en.wikipedia.org/wiki/Luminosity
6 | */
7 |
8 | import {
9 | Color
10 | } from "three";
11 |
12 | const LuminosityHighPassShader = {
13 |
14 | shaderID: "luminosityHighPass",
15 |
16 | uniforms: {
17 |
18 | "tDiffuse": { value: null },
19 | "luminosityThreshold": { value: 1.0 },
20 | "smoothWidth": { value: 1.0 },
21 | "defaultColor": { value: new Color( 0x000000 ) },
22 | "defaultOpacity": { value: 0.0 }
23 |
24 | },
25 |
26 | vertexShader: [
27 |
28 | "varying vec2 vUv;",
29 |
30 | "void main() {",
31 |
32 | "vUv = uv;",
33 |
34 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
35 |
36 | "}"
37 |
38 | ].join("\n"),
39 |
40 | fragmentShader: [
41 |
42 | "uniform sampler2D tDiffuse;",
43 | "uniform vec3 defaultColor;",
44 | "uniform float defaultOpacity;",
45 | "uniform float luminosityThreshold;",
46 | "uniform float smoothWidth;",
47 |
48 | "varying vec2 vUv;",
49 |
50 | "void main() {",
51 |
52 | "vec4 texel = texture2D( tDiffuse, vUv );",
53 |
54 | "vec3 luma = vec3( 0.299, 0.587, 0.114 );",
55 |
56 | "float v = dot( texel.xyz, luma );",
57 |
58 | "vec4 outputColor = vec4( defaultColor.rgb, defaultOpacity );",
59 |
60 | "float alpha = smoothstep( luminosityThreshold, luminosityThreshold + smoothWidth, v );",
61 |
62 | "gl_FragColor = mix( outputColor, texel, alpha );",
63 |
64 | "}"
65 |
66 | ].join("\n")
67 |
68 | };
69 |
70 | export default LuminosityHighPassShader;
--------------------------------------------------------------------------------
/src/game/graphics/shaders/pixel-shader.js:
--------------------------------------------------------------------------------
1 | import * as THREE from "three";
2 |
3 | export default ({
4 | pixelSize = 5,
5 | borderSize = 1,
6 | lightenFactor = 1.8,
7 | softenFactor = 0.75,
8 | darkenFactor = 0.5,
9 | resolution = new THREE.Vector2(window.innerWidth, window.innerHeight)
10 | } = {}) => {
11 | const pixelShader = {
12 | uniforms: {
13 | tDiffuse: { value: null },
14 | pixelSize: { value: pixelSize },
15 | borderFraction: { value: borderSize / pixelSize },
16 | lightenFactor: { value: lightenFactor },
17 | softenFactor: { value: softenFactor },
18 | darkenFactor: { value: darkenFactor },
19 | resolution: { value: resolution }
20 | },
21 |
22 | vertexShader: `
23 | varying highp vec2 vUv;
24 |
25 | void main() {
26 | vUv = uv;
27 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
28 | }`,
29 |
30 | fragmentShader: `
31 | uniform sampler2D tDiffuse;
32 | uniform float pixelSize;
33 | uniform float borderFraction;
34 | uniform float lightenFactor;
35 | uniform float softenFactor;
36 | uniform float darkenFactor;
37 | uniform vec2 resolution;
38 |
39 | varying highp vec2 vUv;
40 |
41 | void main(){
42 | vec2 dxy = pixelSize / resolution;
43 | vec2 pixel = vUv / dxy;
44 | vec2 fraction = fract(pixel);
45 | vec2 coord = dxy * floor(pixel);
46 | vec3 color = texture2D(tDiffuse, coord).xyz;
47 |
48 | if (fraction.y > (1.0 - borderFraction))
49 | color = color * lightenFactor;
50 |
51 | if (fraction.x < borderFraction)
52 | color = color * softenFactor;
53 |
54 | if (fraction.y < borderFraction)
55 | color = color * darkenFactor;
56 |
57 | gl_FragColor = vec4(color, 1);
58 | }`
59 | };
60 |
61 | return pixelShader;
62 | };
63 |
--------------------------------------------------------------------------------
/src/game/graphics/shaders/scanline-shader.js:
--------------------------------------------------------------------------------
1 | import * as THREE from "three";
2 |
3 | export default (thickness = 5.0, color = new THREE.Vector4(0, 0, 0, 1)) => {
4 | const scanlineShader = {
5 | uniforms: {
6 | tDiffuse: { value: null },
7 | thickness: { value: thickness },
8 | color: { value: color }
9 | },
10 |
11 | vertexShader: `
12 | varying vec2 vUv;
13 | void main() {
14 | vUv = uv;
15 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
16 | }
17 | `,
18 |
19 | fragmentShader: `
20 | const vec4 blank = vec4(0.0, 0.0, 0.0, 1.0);
21 | uniform sampler2D tDiffuse;
22 | uniform float thickness;
23 | uniform vec4 color;
24 | varying vec2 vUv;
25 | void main() {
26 | float result = floor(mod(gl_FragCoord.y, thickness));
27 | gl_FragColor = result == 0.0 ? texture2D(tDiffuse, vUv) : color;
28 | }
29 | `
30 | };
31 |
32 | return scanlineShader;
33 | };
34 |
--------------------------------------------------------------------------------
/src/game/graphics/shaders/sepia-shader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author alteredq / http://alteredqualia.com/
3 | *
4 | * Sepia tone shader
5 | * based on glfx.js sepia shader
6 | * https://github.com/evanw/glfx.js
7 | */
8 |
9 | export default (amount = 1.0) => {
10 | const sepiaShader = {
11 | uniforms: {
12 | tDiffuse: { value: null },
13 | amount: { value: amount }
14 | },
15 |
16 | vertexShader: [
17 | "varying vec2 vUv;",
18 |
19 | "void main() {",
20 |
21 | "vUv = uv;",
22 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
23 |
24 | "}"
25 | ].join("\n"),
26 |
27 | fragmentShader: [
28 | "uniform float amount;",
29 |
30 | "uniform sampler2D tDiffuse;",
31 |
32 | "varying vec2 vUv;",
33 |
34 | "void main() {",
35 |
36 | "vec4 color = texture2D( tDiffuse, vUv );",
37 | "vec3 c = color.rgb;",
38 |
39 | "color.r = dot( c, vec3( 1.0 - 0.607 * amount, 0.769 * amount, 0.189 * amount ) );",
40 | "color.g = dot( c, vec3( 0.349 * amount, 1.0 - 0.314 * amount, 0.168 * amount ) );",
41 | "color.b = dot( c, vec3( 0.272 * amount, 0.534 * amount, 1.0 - 0.869 * amount ) );",
42 |
43 | "gl_FragColor = vec4( min( vec3( 1.0 ), color.rgb ), color.a );",
44 |
45 | "}"
46 | ].join("\n")
47 | };
48 |
49 | return sepiaShader;
50 | };
51 |
--------------------------------------------------------------------------------
/src/game/graphics/shaders/tri-color-shader.js:
--------------------------------------------------------------------------------
1 | import { Color, Vector4 } from "three";
2 |
3 | export default ({ distance = 0.005, threshold = 0, colors = [new Color(0xFFFFFF), new Color(0x362928), new Color(0xFF3526)] } = {}) => {
4 | const triColorShader = {
5 | uniforms: {
6 | tDiffuse: { value: null },
7 | distance: { value: distance },
8 | threshold: { value: threshold },
9 | colors: {
10 | value: colors.map(x => new Vector4(x.r, x.g, x.b, 1))
11 | }
12 | },
13 |
14 | vertexShader: `
15 | varying vec2 vUv;
16 | void main() {
17 | vUv = uv;
18 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
19 | }`,
20 |
21 | fragmentShader: `
22 | uniform sampler2D tDiffuse;
23 | uniform float distance;
24 | uniform float threshold;
25 | uniform vec4 colors[3];
26 | varying vec2 vUv;
27 |
28 | void main() {
29 | vec4 tex = texture2D(tDiffuse, vUv);
30 | vec4 tex2 = texture2D(tDiffuse, vec2(vUv.x + distance, vUv.y));
31 |
32 | float test = tex.r + tex.g + tex.b;
33 | float test2 = tex2.r + tex2.g + tex2.b;
34 | float diff = test2 - test;
35 |
36 | if(diff < -threshold)
37 | tex = colors[0];
38 | else if (diff > threshold)
39 | tex = colors[1];
40 | else
41 | tex = colors[2];
42 |
43 | gl_FragColor = tex;
44 | }`
45 | };
46 |
47 | return triColorShader;
48 | };
49 |
--------------------------------------------------------------------------------
/src/game/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { GameEngine } from "react-game-engine";
3 | import Renderer from "./graphics/renderer";
4 | import Systems from "./systems";
5 | import Entities from "./entities";
6 |
7 | import ShaderPass from "./graphics/passes/shader-pass";
8 | import PixelShader from "./graphics/shaders/pixel-shader";
9 |
10 | import "../index.css";
11 |
12 | class Game extends React.Component {
13 | render() {
14 | return (
15 |
23 | );
24 | }
25 | }
26 |
27 | export default Game;
28 |
--------------------------------------------------------------------------------
/src/game/systems/basic-physics.js:
--------------------------------------------------------------------------------
1 | import { all } from "../utils";
2 |
3 | const Physics = entities => {
4 | const physicsEntities = all(entities, e => e.physics);
5 |
6 | physicsEntities.forEach(e => {
7 | const {
8 | mass,
9 | forces,
10 | acceleration,
11 | velocity,
12 | position,
13 | maxSpeed,
14 | damping
15 | } = e.physics;
16 |
17 | forces.divideScalar(mass);
18 | acceleration.add(forces);
19 |
20 | if (damping) velocity.multiplyScalar(1 - damping);
21 |
22 | velocity.add(acceleration);
23 |
24 | if (maxSpeed) velocity.clampLength(0, maxSpeed);
25 |
26 | position.add(velocity);
27 |
28 | forces.set(0, 0, 0);
29 | acceleration.set(0, 0, 0);
30 | });
31 |
32 | return entities;
33 | };
34 |
35 | export default Physics;
36 |
--------------------------------------------------------------------------------
/src/game/systems/camera.js:
--------------------------------------------------------------------------------
1 | import { rotateAroundPoint } from "../utils/three";
2 |
3 | const Camera = ({
4 | yawSpeed = 0.01,
5 | pitchSpeed = 0.01,
6 | zoomSpeed = 0.02
7 | } = {}) => {
8 | return (entities, { keyboardController }) => {
9 | const camera = entities.camera;
10 |
11 | if (camera && keyboardController) {
12 | const { w, a, s, d, space, control } = keyboardController;
13 |
14 | //-- Yaw and pitch rotation
15 | if (w || a || s || d) {
16 | rotateAroundPoint(camera, camera.target, {
17 | y: (a ? 1 : d ? -1 : 0) * yawSpeed,
18 | x: (w ? 1 : s ? -1 : 0) * pitchSpeed
19 | });
20 | camera.lookAt(camera.target);
21 | }
22 |
23 | //-- Zooming (pinching)
24 | if (space || control) {
25 | const zoomFactor = (space ? 1 : control ? -1 : 0) * zoomSpeed;
26 |
27 | camera.zoom += zoomFactor;
28 | camera.updateProjectionMatrix();
29 | }
30 | }
31 |
32 | return entities;
33 | };
34 | };
35 |
36 | export default Camera;
37 |
--------------------------------------------------------------------------------
/src/game/systems/collisions.js:
--------------------------------------------------------------------------------
1 | import { allKeys } from "../utils";
2 | import { QuadTree, Box, Point, Circle } from "js-quadtree";
3 | import _ from "lodash";
4 |
5 | const createTree = (collideableKeys, entities, { x = -50, y = -50, width = 100, height = 100 } = {}) => {
6 | const tree = new QuadTree(
7 | new Box(x, y, width, height)
8 | );
9 |
10 | for (let i = 0; i < collideableKeys.length; i++) {
11 | const key = collideableKeys[i];
12 | const collideable = entities[key];
13 |
14 | tree.insert(
15 | new Point(
16 | collideable.physics.position.x,
17 | collideable.physics.position.z,
18 | { entityId: key }
19 | )
20 | );
21 | }
22 |
23 | return tree;
24 | };
25 |
26 | const queryTree = (tree, collideable) => {
27 | return tree.query(
28 | new Circle(
29 | collideable.physics.position.x,
30 | collideable.physics.position.z,
31 | collideable.collisions.sweepRadius
32 | )
33 | );
34 | };
35 |
36 | const hitTests = [
37 | ["isBox3", "isBox3", (b1, b2) => b1.intersectsBox(b2)],
38 | ["isBox3", "isSphere", (b1, b2) => b1.intersectsSphere(b2)],
39 | ["isBox3", "isPlane", (b1, b2) => b1.intersectsPlane(b2)],
40 | ["isSphere", "isBox3", (b1, b2) => b1.intersectsBox(b2)],
41 | ["isSphere", "isSphere", (b1, b2) => b1.intersectsSphere(b2)],
42 | ["isSphere", "isPlane", (b1, b2) => b1.intersectsPlane(b2)],
43 | ["isPlane", "isBox3", (b1, b2) => b1.intersectsBox(b2)],
44 | ["isPlane", "isSphere", (b1, b2) => b1.intersectsSphere(b2)]
45 | ];
46 |
47 | const collided = (hitTest, bounds, otherBounds) => {
48 | //-- This could be extended to handle the case where bounds
49 | //-- and otherBounds are arrays (for complex models)
50 | return (
51 | bounds[hitTest[0]] &&
52 | otherBounds[hitTest[1]] &&
53 | hitTest[2](bounds, otherBounds)
54 | );
55 | };
56 |
57 | const notify = (defer, key, otherKey, collideable, other, force) => {
58 | defer({
59 | type: "collision",
60 | entities: [collideable, other],
61 | keys: [key, otherKey],
62 | force
63 | });
64 | };
65 |
66 | const Collisions = config => (entities, args) => {
67 | const collideableKeys = allKeys(entities, e => e.collisions && e.physics);
68 |
69 | if (collideableKeys.length) {
70 | //-- Populate tree
71 |
72 | const tree = createTree(collideableKeys, entities, config);
73 |
74 | //-- Query tree
75 |
76 | for (let i = 0; i < collideableKeys.length; i++) {
77 | const key = collideableKeys[i];
78 | const entity = entities[key];
79 | const entityCollisions = entity.collisions;
80 |
81 | //-- Continue if this entity is a hit target
82 |
83 | if (entityCollisions.predicate) {
84 | const results = queryTree(tree, entity);
85 |
86 | //-- Continue if another entity was found in the vicinity
87 |
88 | if (results.length > 1) {
89 | const bounds = _.isFunction(entityCollisions.bounds)
90 | ? entityCollisions.bounds()
91 | : entityCollisions.bounds;
92 |
93 | for (let j = 0; j < results.length; j++) {
94 | const otherKey = results[j].data.entityId;
95 | const other = entities[otherKey];
96 | const otherCollisions = other.collisions;
97 |
98 | if (key === otherKey) continue;
99 |
100 | //-- Does the current entity care about the one he has collied with?
101 |
102 | if (entityCollisions.predicate(entity, other)) {
103 | const otherBounds = _.isFunction(otherCollisions.bounds)
104 | ? otherCollisions.bounds()
105 | : otherCollisions.bounds;
106 |
107 | for (let k = 0; k < hitTests.length; k++) {
108 | const test = hitTests[k];
109 |
110 | //-- Check whether an actual collision occured using proper bounds
111 |
112 | if (collided(test, bounds, otherBounds)) {
113 | const force = entity.physics.velocity
114 | .clone()
115 | .multiplyScalar(entity.physics.mass)
116 | .add(
117 | other.physics.velocity
118 | .clone()
119 | .multiplyScalar(other.physics.mass)
120 | );
121 |
122 | if (entityCollisions.hit)
123 | entityCollisions.hit(entity, other, force, args);
124 |
125 | if (entityCollisions.notify)
126 | notify(args.defer, key, otherKey, entity, other, force, args);
127 |
128 | break;
129 | }
130 | }
131 | }
132 | }
133 | }
134 | }
135 | }
136 | }
137 |
138 | return entities;
139 | };
140 |
141 | export default Collisions;
142 |
--------------------------------------------------------------------------------
/src/game/systems/gamepad-controller.js:
--------------------------------------------------------------------------------
1 | const getGamepad = () => navigator.getGamepads()[0] || navigator.getGamepads()[1] || navigator.getGamepads()[2] || navigator.getGamepads()[3];
2 |
3 | const vibrate = gp => {
4 | return effect => {
5 | if (gp && gp.vibrationActuator)
6 | gp.vibrationActuator.playEffect("dual-rumble", effect);
7 | };
8 | };
9 |
10 | const createGamepadButtonReader = (buttonIndices = []) => {
11 | return gp => {
12 | if (gp) {
13 | return buttonIndices.map(idx => gp.buttons[idx].pressed);
14 | }
15 | }
16 | };
17 |
18 | const createGamepadButtonValueReader = (buttonIndices = [], threshold = 0.05) => {
19 | return gp => {
20 | if (gp) {
21 | return buttonIndices.map(idx => {
22 | const button = gp.buttons[idx];
23 |
24 | return button.pressed && button.value > threshold ? button.value : 0;
25 | });
26 | }
27 | }
28 | };
29 |
30 | const createGamepadAxesReader = (axisIndices = [], mapper = x => x, threshold = 0.05) => {
31 | return gp => {
32 | if (gp) {
33 | return axisIndices.map(idx => {
34 | const val = gp.axes[idx];
35 |
36 | return Math.abs(val) > threshold ? val : 0;
37 | })
38 | }
39 | }
40 | };
41 |
42 | const stick = (xIdx, yIdx) => {
43 | const reader = createGamepadAxesReader([xIdx, yIdx]);
44 |
45 | return gp => {
46 | const [x, y] = reader(gp) || [0, 0];
47 |
48 | return { x, y, heading: (x + y) ? Math.atan2(y, x) : null };
49 | }
50 | };
51 |
52 | const button = (idx) => {
53 | const reader = createGamepadButtonReader([idx]);
54 |
55 | return gp => {
56 | const [val] = reader(gp) || [false];
57 |
58 | return val;
59 | }
60 | };
61 |
62 | const buttonValue = (idx) => {
63 | const reader = createGamepadButtonValueReader([idx]);
64 |
65 | return gp => {
66 | const [val] = reader(gp) || [0];
67 |
68 | return val;
69 | }
70 | };
71 |
72 | const leftStick = stick(0, 1);
73 | const rightStick = stick(2, 3);
74 | const button0 = button(0);
75 | const button1 = button(1);
76 | const leftTrigger = buttonValue(6);
77 | const rightTrigger = buttonValue(7);
78 |
79 | let previous = { };
80 |
81 | const GamepadController = (Wrapped = x => x) => (entities, args) => {
82 |
83 | if (!args.gamepadController) {
84 | const gamepad = getGamepad();
85 |
86 | const current = {
87 | leftStick: leftStick(gamepad),
88 | rightStick: rightStick(gamepad),
89 | button0: button0(gamepad),
90 | button1: button1(gamepad),
91 | leftTrigger: leftTrigger(gamepad),
92 | rightTrigger: rightTrigger(gamepad),
93 | vibrate: vibrate(gamepad)
94 | };
95 |
96 | args.gamepadController = Object.assign({}, current, { previous });
97 |
98 | previous = current;
99 | }
100 |
101 | return Wrapped(entities, args);
102 | };
103 |
104 | export default GamepadController;
--------------------------------------------------------------------------------
/src/game/systems/gravity.js:
--------------------------------------------------------------------------------
1 | import * as THREE from "three";
2 | import { all } from "../utils";
3 |
4 | const g = new THREE.Vector3(0, -0.08, 0);
5 |
6 | const Gravity = entities => {
7 | const gravityEntities = all(entities, e => e.gravity && e.physics);
8 |
9 | gravityEntities.forEach(e => {
10 | e.physics.forces.add(e.gravity.isVector3 ? e.gravity : g);
11 | });
12 |
13 | return entities;
14 | };
15 |
16 | export default Gravity;
17 |
--------------------------------------------------------------------------------
/src/game/systems/hud.js:
--------------------------------------------------------------------------------
1 | const HUD = (entities, args) => {
2 |
3 | const hud = entities.hud;
4 |
5 | if (hud) {
6 | hud.gamepadController = args.gamepadController;
7 | hud.keyboardController = args.keyboardController;
8 | hud.mouseController = args.mouseController;
9 | }
10 |
11 | return entities;
12 | };
13 |
14 | export default HUD;
--------------------------------------------------------------------------------
/src/game/systems/index.js:
--------------------------------------------------------------------------------
1 | import Camera from "./camera";
2 | import Particles from "./particles";
3 | import Removal from "./removal";
4 | import Rotation from "./rotation";
5 | import Timeline from "./timeline";
6 | import HUD from "./hud";
7 | import GamepadController from "./gamepad-controller";
8 | import KeyboardController from "./keyboard-controller";
9 | import MouseController from "./mouse-controller";
10 | import Physics from "./physics";
11 | import Spawn from "./spawn";
12 |
13 | export default [
14 | GamepadController(),
15 | KeyboardController(),
16 | MouseController(),
17 | Camera({ pitchSpeed: -0.02, yawSpeed: 0.02 }),
18 | Particles,
19 | Removal,
20 | Rotation,
21 | Timeline,
22 | Spawn,
23 | Physics,
24 | HUD
25 | ];
26 |
--------------------------------------------------------------------------------
/src/game/systems/keyboard-controller.js:
--------------------------------------------------------------------------------
1 | const readKey = (input, keys, name) => input.find(x => x.name === name && keys.indexOf(x.payload.key) !== -1);
2 |
3 | const createKeyReader = keys => {
4 | let down = false;
5 |
6 | return input => {
7 | if (readKey(input, keys, "onKeyDown"))
8 | down = true;
9 |
10 | if (readKey(input, keys, "onKeyUp"))
11 | down = false;
12 |
13 | return down;
14 | }
15 | };
16 |
17 | const w = createKeyReader(["w", "W", "ArrowUp"]);
18 | const a = createKeyReader(["a", "A", "ArrowLeft"]);
19 | const s = createKeyReader(["s", "S", "ArrowDown"]);
20 | const d = createKeyReader(["d", "D", "ArrowRight"]);
21 | const space = createKeyReader([" "]);
22 | const control = createKeyReader(["Control"]);
23 |
24 | let previous = { };
25 |
26 | const KeyboardController = (Wrapped = x => x) => (entities, args) => {
27 |
28 | if (!args.keyboardController) {
29 | const input = args.input;
30 |
31 | const current = {
32 | w: w(input),
33 | a: a(input),
34 | s: s(input),
35 | d: d(input),
36 | space: space(input),
37 | control: control(input)
38 | };
39 |
40 | args.keyboardController = Object.assign({}, current, { previous });
41 |
42 | previous = current;
43 | }
44 |
45 | return Wrapped(entities, args);
46 | };
47 |
48 | export default KeyboardController;
--------------------------------------------------------------------------------
/src/game/systems/mouse-controller.js:
--------------------------------------------------------------------------------
1 | const readButton = (input, buttons, name) => input.find(x => x.name === name && buttons.indexOf(x.payload.button) !== -1);
2 |
3 | const createButtonReader = buttons => {
4 | let down = false;
5 |
6 | return input => {
7 | if (readButton(input, buttons, "onMouseDown"))
8 | down = true;
9 |
10 | if (readButton(input, buttons, "onMouseUp"))
11 | down = false;
12 |
13 | return down;
14 | }
15 | };
16 |
17 | const createPositionReader = () => {
18 | let position = { x: 0, y: 0 };
19 |
20 | return input => {
21 | const move = input.find(x => x.name === "onMouseMove");
22 |
23 | if (move) {
24 | position = {
25 | x: move.payload.pageX,
26 | y: move.payload.pageY
27 | }
28 | }
29 |
30 | return position;
31 | }
32 | }
33 |
34 | const createWheelReader = () => {
35 | let value = 0;
36 |
37 | return input => {
38 | const wheel = input.find(x => x.name === "onWheel");
39 |
40 | if (wheel) {
41 | if (wheel.payload.deltaY < 0)
42 | value--;
43 | else
44 | value++;
45 | }
46 |
47 | return value;
48 | }
49 | }
50 |
51 | const left = createButtonReader([0]);
52 | const middle = createButtonReader([1]);
53 | const right = createButtonReader([2]);
54 | const position = createPositionReader();
55 | const wheel = createWheelReader();
56 |
57 | let previous = { };
58 |
59 | const MouseController = (Wrapped = x => x) => (entities, args) => {
60 |
61 | if (!args.mouseController) {
62 | const input = args.input;
63 |
64 | const current = {
65 | left: left(input),
66 | middle: middle(input),
67 | right: right(input),
68 | position: position(input),
69 | wheel: wheel(input)
70 | };
71 |
72 | args.mouseController = Object.assign({}, current, { previous });
73 |
74 | previous = current;
75 | }
76 |
77 | return Wrapped(entities, args);
78 | };
79 |
80 | export default MouseController;
--------------------------------------------------------------------------------
/src/game/systems/particles.js:
--------------------------------------------------------------------------------
1 | import { all } from "../utils";
2 |
3 | const Particles = (entities, args) => {
4 | const { time } = args;
5 | const entitiesWithParticles = all(entities, e => e.particles);
6 |
7 | for (let i = 0; i < entitiesWithParticles.length; i++) {
8 | const entity = entitiesWithParticles[i];
9 | const keys = Object.keys(entity.particles);
10 |
11 | for (let j = 0; j < keys.length; j++) {
12 | const ps = entity.particles[keys[j]];
13 | const { spawnOptions, options, beforeSpawn } = ps;
14 | const delta = (time.delta / 1000) * spawnOptions.timeScale;
15 |
16 | ps.tick += delta;
17 |
18 | if (ps.tick < 0) ps.tick = 0;
19 |
20 | if (delta > 0) {
21 | beforeSpawn(entity, entities, ps, args);
22 |
23 | for (let x = 0; x < spawnOptions.spawnRate * delta; x++) {
24 | ps.emitter.spawnParticle(options);
25 | }
26 | }
27 |
28 | ps.emitter.update(ps.tick);
29 | }
30 | }
31 |
32 | return entities;
33 | };
34 |
35 | export default Particles;
36 |
--------------------------------------------------------------------------------
/src/game/systems/physics.js:
--------------------------------------------------------------------------------
1 | import { all } from "../utils";
2 |
3 | const Physics = (entities, args) => {
4 | const world = entities.world;
5 | const entitiesWithBodies = all(entities, e => e.bodies && e.model);
6 |
7 | if (world)
8 | world.step();
9 |
10 | for (let x = 0; x < entitiesWithBodies.length; x++) {
11 | const entity = entitiesWithBodies[x];
12 | const model = entity.model;
13 | const body = entity.bodies[0];
14 | const collision = entity.collision;
15 |
16 | if (!body.sleeping) {
17 | model.position.copy(body.getPosition());
18 | model.quaternion.copy(body.getQuaternion());
19 | }
20 |
21 | if (collision) {
22 | for (let y = 0; y < entitiesWithBodies.length; y++) {
23 | if (x === y)
24 | continue;
25 |
26 | const otherEntity = entitiesWithBodies[y];
27 | const otherBody = otherEntity.bodies[0];
28 | const contact = world.getContact(body, otherBody);
29 |
30 | if (contact)
31 | collision(entity, otherEntity, contact, entities, args);
32 | }
33 | }
34 | }
35 |
36 | return entities;
37 | };
38 |
39 | export default Physics;
40 |
--------------------------------------------------------------------------------
/src/game/systems/removal.js:
--------------------------------------------------------------------------------
1 | import * as THREE from "three";
2 | import { remove } from "../utils";
3 | import _ from "lodash";
4 |
5 | //-- https://gist.github.com/zentrope/5022d89cfa995ac71978
6 |
7 | const frustum = new THREE.Frustum();
8 | const cameraViewProjectionMatrix = new THREE.Matrix4();
9 |
10 | const Removal = entities => {
11 | const camera = entities.camera;
12 | const removeableKeys = Object.keys(entities).filter(
13 | x => entities[x].removable
14 | );
15 |
16 | camera.updateMatrixWorld();
17 | camera.matrixWorldInverse.getInverse(camera.matrixWorld);
18 | cameraViewProjectionMatrix.multiplyMatrices(
19 | camera.projectionMatrix,
20 | camera.matrixWorldInverse
21 | );
22 | frustum.setFromMatrix(cameraViewProjectionMatrix);
23 |
24 | removeableKeys.forEach(key => {
25 | const test = entities[key].removable;
26 |
27 | if (_.isFunction(test) ? test(frustum, entities[key], entities) : true)
28 | remove(entities, key);
29 | });
30 |
31 | return entities;
32 | };
33 |
34 | export default Removal;
35 |
--------------------------------------------------------------------------------
/src/game/systems/rotation.js:
--------------------------------------------------------------------------------
1 | import { all } from "../utils";
2 | import _ from "lodash";
3 |
4 | const Rotation = (entities, args) => {
5 | const rotatables = all(entities, e => e.rotation, e => e.model);
6 |
7 | for (let i = 0; i < rotatables.length; i++) {
8 | const r = rotatables[i];
9 |
10 | if (r.model.cellIndex !== undefined) {
11 | r.model.angle = _.isFunction(r.rotation)
12 | ? r.rotation(r, entities, args)
13 | : r.model.angle + r.rotation;
14 | } else {
15 | r.model.rotation.z = r.rotation.z
16 | ? _.isFunction(r.rotation.z)
17 | ? r.rotation.z(r, entities, args)
18 | : r.model.rotation.z + r.rotation.z
19 | : r.model.rotation.z;
20 | r.model.rotation.x = r.rotation.x
21 | ? _.isFunction(r.rotation.x)
22 | ? r.rotation.x(r, entities, args)
23 | : r.model.rotation.x + r.rotation.x
24 | : r.model.rotation.x;
25 | r.model.rotation.y = r.rotation.y
26 | ? _.isFunction(r.rotation.y)
27 | ? r.rotation.y(r, entities, args)
28 | : r.model.rotation.y + r.rotation.y
29 | : r.model.rotation.y;
30 | }
31 | }
32 |
33 | return entities;
34 | };
35 |
36 | export default Rotation;
37 |
--------------------------------------------------------------------------------
/src/game/systems/spawn.js:
--------------------------------------------------------------------------------
1 | import Box from "../components/box"
2 | import Cylinder from "../components/cylinder"
3 | import { id } from "../utils";
4 |
5 | const boxId = (id => () => id("box"))(id(0));
6 | const cylinderId = (id => () => id("cylinder"))(id(0));
7 |
8 | const Spawn = (entities, { gamepadController, mouseController }) => {
9 |
10 | const world = entities.world;
11 | const scene = entities.scene;
12 |
13 | if ((gamepadController.button0 && !gamepadController.previous.button0) || (mouseController.left && !mouseController.previous.left))
14 | entities[boxId()] = Box({ parent: scene, world, y: 5 });
15 |
16 | if ((gamepadController.button1 && !gamepadController.previous.button1) || (mouseController.right && !mouseController.previous.right))
17 | entities[cylinderId()] = Cylinder({ parent: scene, world, y: 5 });
18 |
19 | return entities;
20 | };
21 |
22 | export default Spawn;
23 |
--------------------------------------------------------------------------------
/src/game/systems/spring.js:
--------------------------------------------------------------------------------
1 | import * as THREE from "three";
2 | import { all } from "../utils";
3 |
4 | const Spring = entities => {
5 | const spingEntities = all(entities, e => e.spring && e.physics);
6 |
7 | spingEntities.forEach(e => {
8 | const {
9 | spring: { k, length, anchor, subtract },
10 | physics: { position, forces }
11 | } = e;
12 |
13 | const spring = subtract
14 | ? subtract(position, anchor, e.spring)
15 | : new THREE.Vector3().subVectors(position, anchor);
16 | const d = spring.length();
17 | const stretch = d - length;
18 |
19 | spring.normalize();
20 | spring.multiplyScalar(-1 * k * stretch);
21 |
22 | forces.add(spring);
23 | });
24 |
25 | return entities;
26 | };
27 |
28 | export default Spring;
29 |
--------------------------------------------------------------------------------
/src/game/systems/timeline.js:
--------------------------------------------------------------------------------
1 | import { all } from "../utils";
2 | import _ from "lodash";
3 |
4 | const start = (timeline, args) => {
5 | if (!timeline.start) timeline.start = args.time.current;
6 | };
7 |
8 | const update = (entity, entities, key, timeline, args) => {
9 | const time = args.time;
10 |
11 | if (timeline.duration) {
12 | let percent = (time.current - timeline.start) / timeline.duration;
13 |
14 | if (percent <= 1) {
15 | timeline.update(entity, entities, percent, timeline, args);
16 | } else {
17 | if (timeline.complete)
18 | timeline.complete(entity, entities, timeline, args);
19 |
20 | delete entity.timelines[key];
21 | }
22 | }
23 |
24 | if (timeline.while) {
25 | if (
26 | _.isFunction(timeline.while)
27 | ? timeline.while(entity, entities, timeline, args)
28 | : true
29 | ) {
30 | timeline.update(entity, entities, timeline, args);
31 | } else {
32 | if (timeline.complete)
33 | timeline.complete(entity, entities, timeline, args);
34 |
35 | delete entity.timelines[key];
36 | }
37 | }
38 | };
39 |
40 | const Timeline = (entities, args) => {
41 | const entitiesWithTimelines = all(entities, e => e.timelines);
42 |
43 | for (let i = 0; i < entitiesWithTimelines.length; i++) {
44 | const entity = entitiesWithTimelines[i];
45 | const keys = Object.keys(entity.timelines);
46 |
47 | for (let j = 0; j < keys.length; j++) {
48 | const key = keys[j];
49 | const timeline = entity.timelines[key];
50 |
51 | if (timeline) {
52 | start(timeline, args);
53 | update(entity, entities, key, timeline, args);
54 | }
55 | }
56 | }
57 |
58 | return entities;
59 | };
60 |
61 | export default Timeline;
62 |
--------------------------------------------------------------------------------
/src/game/utils/index.js:
--------------------------------------------------------------------------------
1 | import _ from "lodash";
2 | import { interpolate } from '@popmotion/popcorn';
3 | import * as ThreeUtils from "./three";
4 |
5 | const remove = (entities, key) => {
6 | const entity = entities[key];
7 |
8 | if (!entity)
9 | return;
10 |
11 | if (entity.model)
12 | ThreeUtils.remove(entity.model.parent, entity.model);
13 |
14 | if (entity.light)
15 | ThreeUtils.remove(entity.light.parent, entity.light);
16 |
17 | if (entity.particles) {
18 | Object.keys(entity.particles).forEach(k => {
19 | const emitter = entity.particles[k].emitter
20 | if (emitter)
21 | ThreeUtils.remove(emitter.parent, emitter);
22 | })
23 | }
24 |
25 | if (entity.bodies)
26 | entity.bodies.forEach(b => b.remove())
27 |
28 | delete entities[key];
29 |
30 | return entities;
31 | };
32 |
33 | const any = (arr = [], b = "", c) => {
34 | if (c) {
35 | if (Array.isArray(c) === false) c = [c];
36 |
37 | return _.isFunction(b)
38 | ? _.intersection(arr.map(b), c).length > 0
39 | : _.intersection(arr.map(x => x[b]), c).length > 0;
40 | }
41 |
42 | if (!b) return arr.length > 0;
43 |
44 | if (Array.isArray(b)) return _.intersection(arr, b).length > 0;
45 |
46 | if (_.isFunction(b)) return arr.find(b);
47 |
48 | return arr.indexOf(b) > -1;
49 | };
50 |
51 | const first = (entities, ...predicates) => {
52 | if (!entities) return;
53 | if (!predicates || predicates.length < 1) return entities[0];
54 |
55 | if (Array.isArray(entities))
56 | return entities.find(e => _.every(predicates, p => p(e)))
57 |
58 | return entities[Object.keys(entities).find(key => _.every(predicates, p => p(entities[key])))]
59 | }
60 |
61 | const firstKey = (entities, ...predicates) => {
62 | if (!entities) return;
63 | if (!predicates || predicates.length < 1) return Object.keys(entities)[0];
64 |
65 | return Object.keys(entities).find(key => _.every(predicates, p => p(entities[key])))
66 | }
67 |
68 | const all = (entities, ...predicates) => {
69 | if (!entities) return;
70 | if (!predicates || predicates.length < 1) return entities;
71 |
72 | if (Array.isArray(entities))
73 | return entities.filter(e => _.every(predicates, p => p(e)))
74 |
75 | return Object.keys(entities).filter(key => _.every(predicates, p => p(entities[key]))).map(key => entities[key])
76 | }
77 |
78 | const allKeys = (entities, ...predicates) => {
79 | if (!entities) return;
80 | if (!predicates || predicates.length < 1) return Object.keys(entities);
81 |
82 | return Object.keys(entities).filter(key => _.every(predicates, p => p(entities[key])));
83 | }
84 |
85 | //-- https://stackoverflow.com/a/7616484/138392
86 | const getHashCode = str => {
87 | var hash = 0, i, chr;
88 | if (str.length === 0) return hash;
89 | for (i = 0; i < str.length; i++) {
90 | chr = str.charCodeAt(i);
91 | hash = ((hash << 5) - hash) + chr;
92 | hash |= 0; // Convert to 32bit integer
93 | }
94 | return hash;
95 | };
96 |
97 | const positive = val => Math.abs(val)
98 |
99 | const negative = val => {
100 | if (val > 0) return -val
101 | return val
102 | }
103 |
104 | const remap = (n, start1, stop1, start2, stop2) => {
105 | return (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
106 | }
107 |
108 | const constrain = (n, low, high) => {
109 | return Math.max(Math.min(n, high), low);
110 | }
111 |
112 | const between = (n, low, high) => {
113 | return n > low && n < high
114 | }
115 |
116 | const pipe = (...funcs) => _.flow(_.flatten(funcs || []))
117 |
118 | const id = (seed = 0) => (prefix = "") => `${prefix}${++seed}`
119 |
120 | const cond = (condition, func) => {
121 | return (args) => {
122 | const test = _.isFunction(condition) ? condition(args) : condition
123 | return test ? func(args) : args
124 | }
125 | }
126 |
127 | const log = label => data => {
128 | console.log(label, data);
129 | return data;
130 | }
131 |
132 | const randomInt = (min = 0, max = 1) => Math.floor(Math.random() * (max - min + 1) + min);
133 |
134 | const throttle = (func, interval, defaultValue) => {
135 | let last = 0;
136 | return (...args) => {
137 | const current = performance.now();
138 | if ((current - last) > interval) {
139 | last = current;
140 | return func(...args);
141 | } else {
142 | return _.isFunction(defaultValue) ? defaultValue(...args) : defaultValue;
143 | }
144 | }
145 | }
146 |
147 | const screen = window.screen;
148 |
149 | const createSound = (asset, throttleInterval = 0) => {
150 | const audio = new Audio(asset);
151 | const play = () => audio.play();
152 |
153 | return throttleInterval ? throttle(play, throttleInterval) : play;
154 | };
155 |
156 | const find = _.find;
157 | const filter = _.filter;
158 | const clamp = constrain;
159 | const once = _.once;
160 | const memoize = _.memoize;
161 | const sound = createSound;
162 |
163 | export {
164 | remove,
165 | any,
166 | find,
167 | filter,
168 | first,
169 | firstKey,
170 | all,
171 | allKeys,
172 | getHashCode,
173 | positive,
174 | negative,
175 | remap,
176 | constrain,
177 | clamp,
178 | between,
179 | pipe,
180 | id,
181 | cond,
182 | interpolate,
183 | log,
184 | randomInt,
185 | once,
186 | memoize,
187 | throttle,
188 | screen,
189 | createSound,
190 | sound
191 | }
--------------------------------------------------------------------------------
/src/game/utils/perlin.js:
--------------------------------------------------------------------------------
1 | //////////////////////////////////////////////////////////////
2 |
3 | // http://mrl.nyu.edu/~perlin/noise/
4 | // Adapting from PApplet.java
5 | // which was adapted from toxi
6 | // which was adapted from the german demo group farbrausch
7 | // as used in their demo "art": http://www.farb-rausch.de/fr010src.zip
8 |
9 | // someday we might consider using "improved noise"
10 | // http://mrl.nyu.edu/~perlin/paper445.pdf
11 | // See: https://github.com/shiffman/The-Nature-of-Code-Examples-p5.js/
12 | // blob/master/introduction/Noise1D/noise.js
13 |
14 | /**
15 | * @module Math
16 | * @submodule Noise
17 | * @for p5
18 | * @requires core
19 | */
20 |
21 | var PERLIN_YWRAPB = 4;
22 | var PERLIN_YWRAP = 1 << PERLIN_YWRAPB;
23 | var PERLIN_ZWRAPB = 8;
24 | var PERLIN_ZWRAP = 1 << PERLIN_ZWRAPB;
25 | var PERLIN_SIZE = 4095;
26 |
27 | var perlin_octaves = 4; // default to medium smooth
28 | var perlin_amp_falloff = 0.5; // 50% reduction/octave
29 |
30 | var scaled_cosine = function(i) {
31 | return 0.5 * (1.0 - Math.cos(i * Math.PI));
32 | };
33 |
34 | var perlin; // will be initialized lazily by noise() or noiseSeed()
35 |
36 | /**
37 | * Returns the Perlin noise value at specified coordinates. Perlin noise is
38 | * a random sequence generator producing a more natural ordered, harmonic
39 | * succession of numbers compared to the standard random() function.
40 | * It was invented by Ken Perlin in the 1980s and been used since in
41 | * graphical applications to produce procedural textures, natural motion,
42 | * shapes, terrains etc.
The main difference to the
43 | * random() function is that Perlin noise is defined in an infinite
44 | * n-dimensional space where each pair of coordinates corresponds to a
45 | * fixed semi-random value (fixed only for the lifespan of the program; see
46 | * the noiseSeed() function). p5.js can compute 1D, 2D and 3D noise,
47 | * depending on the number of coordinates given. The resulting value will
48 | * always be between 0.0 and 1.0. The noise value can be animated by moving
49 | * through the noise space as demonstrated in the example above. The 2nd
50 | * and 3rd dimension can also be interpreted as time.
The actual
51 | * noise is structured similar to an audio signal, in respect to the
52 | * function's use of frequencies. Similar to the concept of harmonics in
53 | * physics, perlin noise is computed over several octaves which are added
54 | * together for the final result.
Another way to adjust the
55 | * character of the resulting sequence is the scale of the input
56 | * coordinates. As the function works within an infinite space the value of
57 | * the coordinates doesn't matter as such, only the distance between
58 | * successive coordinates does (eg. when using noise() within a
59 | * loop). As a general rule the smaller the difference between coordinates,
60 | * the smoother the resulting noise sequence will be. Steps of 0.005-0.03
61 | * work best for most applications, but this will differ depending on use.
62 | *
63 | *
64 | * @method noise
65 | * @param {Number} x x-coordinate in noise space
66 | * @param {Number} [y] y-coordinate in noise space
67 | * @param {Number} [z] z-coordinate in noise space
68 | * @return {Number} Perlin noise value (between 0 and 1) at specified
69 | * coordinates
70 | * @example
71 | *
72 | *
73 | * var xoff = 0.0;
74 | *
75 | * function draw() {
76 | * background(204);
77 | * xoff = xoff + 0.01;
78 | * var n = noise(xoff) * width;
79 | * line(n, 0, n, height);
80 | * }
81 | *
82 | *
83 | *
84 | * var noiseScale=0.02;
85 | *
86 | * function draw() {
87 | * background(0);
88 | * for (var x=0; x < width; x++) {
89 | * var noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);
90 | * stroke(noiseVal*255);
91 | * line(x, mouseY+noiseVal*80, x, height);
92 | * }
93 | * }
94 | *
95 | *
96 | *
97 | * @alt
98 | * vertical line moves left to right with updating noise values.
99 | * horizontal wave pattern effected by mouse x-position & updating noise values.
100 | *
101 | */
102 |
103 | const noise = function(x, y, z) {
104 | y = y || 0;
105 | z = z || 0;
106 |
107 | if (perlin == null) {
108 | perlin = new Array(PERLIN_SIZE + 1);
109 | for (var i = 0; i < PERLIN_SIZE + 1; i++) {
110 | perlin[i] = Math.random();
111 | }
112 | }
113 |
114 | if (x < 0) {
115 | x = -x;
116 | }
117 | if (y < 0) {
118 | y = -y;
119 | }
120 | if (z < 0) {
121 | z = -z;
122 | }
123 |
124 | var xi = Math.floor(x),
125 | yi = Math.floor(y),
126 | zi = Math.floor(z);
127 | var xf = x - xi;
128 | var yf = y - yi;
129 | var zf = z - zi;
130 | var rxf, ryf;
131 |
132 | var r = 0;
133 | var ampl = 0.5;
134 |
135 | var n1, n2, n3;
136 |
137 | for (var o = 0; o < perlin_octaves; o++) {
138 | var of = xi + (yi << PERLIN_YWRAPB) + (zi << PERLIN_ZWRAPB);
139 |
140 | rxf = scaled_cosine(xf);
141 | ryf = scaled_cosine(yf);
142 |
143 | n1 = perlin[of & PERLIN_SIZE];
144 | n1 += rxf * (perlin[(of + 1) & PERLIN_SIZE] - n1);
145 | n2 = perlin[(of + PERLIN_YWRAP) & PERLIN_SIZE];
146 | n2 += rxf * (perlin[(of + PERLIN_YWRAP + 1) & PERLIN_SIZE] - n2);
147 | n1 += ryf * (n2 - n1);
148 |
149 | of += PERLIN_ZWRAP;
150 | n2 = perlin[of & PERLIN_SIZE];
151 | n2 += rxf * (perlin[(of + 1) & PERLIN_SIZE] - n2);
152 | n3 = perlin[(of + PERLIN_YWRAP) & PERLIN_SIZE];
153 | n3 += rxf * (perlin[(of + PERLIN_YWRAP + 1) & PERLIN_SIZE] - n3);
154 | n2 += ryf * (n3 - n2);
155 |
156 | n1 += scaled_cosine(zf) * (n2 - n1);
157 |
158 | r += n1 * ampl;
159 | ampl *= perlin_amp_falloff;
160 | xi <<= 1;
161 | xf *= 2;
162 | yi <<= 1;
163 | yf *= 2;
164 | zi <<= 1;
165 | zf *= 2;
166 |
167 | if (xf >= 1.0) {
168 | xi++;
169 | xf--;
170 | }
171 | if (yf >= 1.0) {
172 | yi++;
173 | yf--;
174 | }
175 | if (zf >= 1.0) {
176 | zi++;
177 | zf--;
178 | }
179 | }
180 | return r;
181 | };
182 |
183 | /**
184 | *
185 | * Adjusts the character and level of detail produced by the Perlin noise
186 | * function. Similar to harmonics in physics, noise is computed over
187 | * several octaves. Lower octaves contribute more to the output signal and
188 | * as such define the overall intensity of the noise, whereas higher octaves
189 | * create finer grained details in the noise sequence.
190 | *
191 | * By default, noise is computed over 4 octaves with each octave contributing
192 | * exactly half than its predecessor, starting at 50% strength for the 1st
193 | * octave. This falloff amount can be changed by adding an additional function
194 | * parameter. Eg. a falloff factor of 0.75 means each octave will now have
195 | * 75% impact (25% less) of the previous lower octave. Any value between
196 | * 0.0 and 1.0 is valid, however note that values greater than 0.5 might
197 | * result in greater than 1.0 values returned by noise().
198 | *
199 | * By changing these parameters, the signal created by the noise()
200 | * function can be adapted to fit very specific needs and characteristics.
201 | *
202 | * @method noiseDetail
203 | * @param {Number} lod number of octaves to be used by the noise
204 | * @param {Number} falloff falloff factor for each octave
205 | * @example
206 | *
207 | *
208 | * var noiseVal;
209 | * var noiseScale = 0.02;
210 | *
211 | * function setup() {
212 | * createCanvas(100, 100);
213 | * }
214 | *
215 | * function draw() {
216 | * background(0);
217 | * for (var y = 0; y < height; y++) {
218 | * for (var x = 0; x < width / 2; x++) {
219 | * noiseDetail(2, 0.2);
220 | * noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);
221 | * stroke(noiseVal * 255);
222 | * point(x, y);
223 | * noiseDetail(8, 0.65);
224 | * noiseVal = noise(
225 | * (mouseX + x + width / 2) * noiseScale,
226 | * (mouseY + y) * noiseScale
227 | * );
228 | * stroke(noiseVal * 255);
229 | * point(x + width / 2, y);
230 | * }
231 | * }
232 | * }
233 | *
234 | *
235 | *
236 | * @alt
237 | * 2 vertical grey smokey patterns affected my mouse x-position and noise.
238 | *
239 | */
240 | const noiseDetail = function(lod, falloff) {
241 | if (lod > 0) {
242 | perlin_octaves = lod;
243 | }
244 | if (falloff > 0) {
245 | perlin_amp_falloff = falloff;
246 | }
247 | };
248 |
249 | /**
250 | * Sets the seed value for noise(). By default, noise()
251 | * produces different results each time the program is run. Set the
252 | * value parameter to a constant to return the same pseudo-random
253 | * numbers each time the software is run.
254 | *
255 | * @method noiseSeed
256 | * @param {Number} seed the seed value
257 | * @example
258 | *
259 | * var xoff = 0.0;
260 | *
261 | * function setup() {
262 | * noiseSeed(99);
263 | * stroke(0, 10);
264 | * }
265 | *
266 | * function draw() {
267 | * xoff = xoff + .01;
268 | * var n = noise(xoff) * width;
269 | * line(n, 0, n, height);
270 | * }
271 | *
272 | *
273 | *
274 | * @alt
275 | * vertical grey lines drawing in pattern affected by noise.
276 | *
277 | */
278 | const noiseSeed = function(seed) {
279 | // Linear Congruential Generator
280 | // Variant of a Lehman Generator
281 | var lcg = (function() {
282 | // Set to values from http://en.wikipedia.org/wiki/Numerical_Recipes
283 | // m is basically chosen to be large (as it is the max period)
284 | // and for its relationships to a and c
285 | var m = 4294967296;
286 | // a - 1 should be divisible by m's prime factors
287 | var a = 1664525;
288 | // c and m should be co-prime
289 | var c = 1013904223;
290 | var seed, z;
291 | return {
292 | setSeed: function(val) {
293 | // pick a random seed if val is undefined or null
294 | // the >>> 0 casts the seed to an unsigned 32-bit integer
295 | z = seed = (val == null ? Math.random() * m : val) >>> 0;
296 | },
297 | getSeed: function() {
298 | return seed;
299 | },
300 | rand: function() {
301 | // define the recurrence relationship
302 | z = (a * z + c) % m;
303 | // return a float in [0, 1)
304 | // if z = m then z / m = 0 therefore (z % m) / m < 1 always
305 | return z / m;
306 | }
307 | };
308 | })();
309 |
310 | lcg.setSeed(seed);
311 | perlin = new Array(PERLIN_SIZE + 1);
312 | for (var i = 0; i < PERLIN_SIZE + 1; i++) {
313 | perlin[i] = lcg.rand();
314 | }
315 | };
316 |
317 | module.exports = {
318 | noise,
319 | noiseDetail,
320 | noiseSeed
321 | };
--------------------------------------------------------------------------------
/src/game/utils/three/dds-loader.js:
--------------------------------------------------------------------------------
1 | import * as THREE from 'three';
2 |
3 | /*
4 | * @author mrdoob / http://mrdoob.com/
5 | */
6 |
7 | const DDSLoader = function () {
8 |
9 | this._parser = DDSLoader.parse;
10 |
11 | };
12 |
13 | DDSLoader.prototype = Object.create( THREE.CompressedTextureLoader.prototype );
14 | DDSLoader.prototype.constructor = DDSLoader;
15 |
16 | DDSLoader.parse = function ( buffer, loadMipmaps ) {
17 |
18 | var dds = { mipmaps: [], width: 0, height: 0, format: null, mipmapCount: 1 };
19 |
20 | // Adapted from @toji's DDS utils
21 | // https://github.com/toji/webgl-texture-utils/blob/master/texture-util/dds.js
22 |
23 | // All values and structures referenced from:
24 | // http://msdn.microsoft.com/en-us/library/bb943991.aspx/
25 |
26 | var DDS_MAGIC = 0x20534444;
27 |
28 | var DDSD_MIPMAPCOUNT = 0x20000;
29 |
30 | var DDSCAPS2_CUBEMAP = 0x200,
31 | DDSCAPS2_CUBEMAP_POSITIVEX = 0x400,
32 | DDSCAPS2_CUBEMAP_NEGATIVEX = 0x800,
33 | DDSCAPS2_CUBEMAP_POSITIVEY = 0x1000,
34 | DDSCAPS2_CUBEMAP_NEGATIVEY = 0x2000,
35 | DDSCAPS2_CUBEMAP_POSITIVEZ = 0x4000,
36 | DDSCAPS2_CUBEMAP_NEGATIVEZ = 0x8000;
37 |
38 | var DDPF_FOURCC = 0x4;
39 |
40 | function fourCCToInt32( value ) {
41 |
42 | return value.charCodeAt( 0 ) +
43 | ( value.charCodeAt( 1 ) << 8 ) +
44 | ( value.charCodeAt( 2 ) << 16 ) +
45 | ( value.charCodeAt( 3 ) << 24 );
46 |
47 | }
48 |
49 | function int32ToFourCC( value ) {
50 |
51 | return String.fromCharCode(
52 | value & 0xff,
53 | ( value >> 8 ) & 0xff,
54 | ( value >> 16 ) & 0xff,
55 | ( value >> 24 ) & 0xff
56 | );
57 |
58 | }
59 |
60 | function loadARGBMip( buffer, dataOffset, width, height ) {
61 |
62 | var dataLength = width * height * 4;
63 | var srcBuffer = new Uint8Array( buffer, dataOffset, dataLength );
64 | var byteArray = new Uint8Array( dataLength );
65 | var dst = 0;
66 | var src = 0;
67 | for ( var y = 0; y < height; y ++ ) {
68 |
69 | for ( var x = 0; x < width; x ++ ) {
70 |
71 | var b = srcBuffer[ src ]; src ++;
72 | var g = srcBuffer[ src ]; src ++;
73 | var r = srcBuffer[ src ]; src ++;
74 | var a = srcBuffer[ src ]; src ++;
75 | byteArray[ dst ] = r; dst ++; //r
76 | byteArray[ dst ] = g; dst ++; //g
77 | byteArray[ dst ] = b; dst ++; //b
78 | byteArray[ dst ] = a; dst ++; //a
79 |
80 | }
81 |
82 | }
83 | return byteArray;
84 |
85 | }
86 |
87 | var FOURCC_DXT1 = fourCCToInt32( "DXT1" );
88 | var FOURCC_DXT3 = fourCCToInt32( "DXT3" );
89 | var FOURCC_DXT5 = fourCCToInt32( "DXT5" );
90 | var FOURCC_ETC1 = fourCCToInt32( "ETC1" );
91 |
92 | var headerLengthInt = 31; // The header length in 32 bit ints
93 |
94 | // Offsets into the header array
95 |
96 | var off_magic = 0;
97 |
98 | var off_size = 1;
99 | var off_flags = 2;
100 | var off_height = 3;
101 | var off_width = 4;
102 |
103 | var off_mipmapCount = 7;
104 |
105 | var off_pfFlags = 20;
106 | var off_pfFourCC = 21;
107 | var off_RGBBitCount = 22;
108 | var off_RBitMask = 23;
109 | var off_GBitMask = 24;
110 | var off_BBitMask = 25;
111 | var off_ABitMask = 26;
112 |
113 | var off_caps2 = 28;
114 |
115 | // Parse header
116 |
117 | var header = new Int32Array( buffer, 0, headerLengthInt );
118 |
119 | if ( header[ off_magic ] !== DDS_MAGIC ) {
120 |
121 | console.error( 'THREE.DDSLoader.parse: Invalid magic number in DDS header.' );
122 | return dds;
123 |
124 | }
125 |
126 | if ( ! header[ off_pfFlags ] & DDPF_FOURCC ) {
127 |
128 | console.error( 'THREE.DDSLoader.parse: Unsupported format, must contain a FourCC code.' );
129 | return dds;
130 |
131 | }
132 |
133 | var blockBytes;
134 |
135 | var fourCC = header[ off_pfFourCC ];
136 |
137 | var isRGBAUncompressed = false;
138 |
139 | switch ( fourCC ) {
140 |
141 | case FOURCC_DXT1:
142 |
143 | blockBytes = 8;
144 | dds.format = THREE.RGB_S3TC_DXT1_Format;
145 | break;
146 |
147 | case FOURCC_DXT3:
148 |
149 | blockBytes = 16;
150 | dds.format = THREE.RGBA_S3TC_DXT3_Format;
151 | break;
152 |
153 | case FOURCC_DXT5:
154 |
155 | blockBytes = 16;
156 | dds.format = THREE.RGBA_S3TC_DXT5_Format;
157 | break;
158 |
159 | case FOURCC_ETC1:
160 |
161 | blockBytes = 8;
162 | dds.format = THREE.RGB_ETC1_Format;
163 | break;
164 |
165 | default:
166 |
167 | if ( header[ off_RGBBitCount ] === 32
168 | && header[ off_RBitMask ] & 0xff0000
169 | && header[ off_GBitMask ] & 0xff00
170 | && header[ off_BBitMask ] & 0xff
171 | && header[ off_ABitMask ] & 0xff000000 ) {
172 |
173 | isRGBAUncompressed = true;
174 | blockBytes = 64;
175 | dds.format = THREE.RGBAFormat;
176 |
177 | } else {
178 |
179 | console.error( 'THREE.DDSLoader.parse: Unsupported FourCC code ', int32ToFourCC( fourCC ) );
180 | return dds;
181 |
182 | }
183 |
184 | }
185 |
186 | dds.mipmapCount = 1;
187 |
188 | if ( header[ off_flags ] & DDSD_MIPMAPCOUNT && loadMipmaps !== false ) {
189 |
190 | dds.mipmapCount = Math.max( 1, header[ off_mipmapCount ] );
191 |
192 | }
193 |
194 | var caps2 = header[ off_caps2 ];
195 | dds.isCubemap = caps2 & DDSCAPS2_CUBEMAP ? true : false;
196 | if ( dds.isCubemap && (
197 | ! ( caps2 & DDSCAPS2_CUBEMAP_POSITIVEX ) ||
198 | ! ( caps2 & DDSCAPS2_CUBEMAP_NEGATIVEX ) ||
199 | ! ( caps2 & DDSCAPS2_CUBEMAP_POSITIVEY ) ||
200 | ! ( caps2 & DDSCAPS2_CUBEMAP_NEGATIVEY ) ||
201 | ! ( caps2 & DDSCAPS2_CUBEMAP_POSITIVEZ ) ||
202 | ! ( caps2 & DDSCAPS2_CUBEMAP_NEGATIVEZ )
203 | ) ) {
204 |
205 | console.error( 'THREE.DDSLoader.parse: Incomplete cubemap faces' );
206 | return dds;
207 |
208 | }
209 |
210 | dds.width = header[ off_width ];
211 | dds.height = header[ off_height ];
212 |
213 | var dataOffset = header[ off_size ] + 4;
214 |
215 | // Extract mipmaps buffers
216 |
217 | var faces = dds.isCubemap ? 6 : 1;
218 |
219 | for ( var face = 0; face < faces; face ++ ) {
220 |
221 | var width = dds.width;
222 | var height = dds.height;
223 | var byteArray = null;
224 | var dataLength = null;
225 |
226 | for ( var i = 0; i < dds.mipmapCount; i ++ ) {
227 |
228 | if ( isRGBAUncompressed ) {
229 |
230 | byteArray = loadARGBMip( buffer, dataOffset, width, height );
231 | dataLength = byteArray.length;
232 |
233 | } else {
234 |
235 | dataLength = Math.max( 4, width ) / 4 * Math.max( 4, height ) / 4 * blockBytes;
236 | byteArray = new Uint8Array( buffer, dataOffset, dataLength );
237 |
238 | }
239 |
240 | var mipmap = { "data": byteArray, "width": width, "height": height };
241 | dds.mipmaps.push( mipmap );
242 |
243 | dataOffset += dataLength;
244 |
245 | width = Math.max( width >> 1, 1 );
246 | height = Math.max( height >> 1, 1 );
247 |
248 | }
249 |
250 | }
251 |
252 | return dds;
253 |
254 | };
255 |
256 | export default DDSLoader;
--------------------------------------------------------------------------------
/src/game/utils/three/fbx-loader.js:
--------------------------------------------------------------------------------
1 | import Zlib from "three/examples/js/libs/inflate.min";
2 | import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
3 |
4 | global.Zlib = Zlib.Zlib;
5 |
6 | export default FBXLoader;
--------------------------------------------------------------------------------
/src/game/utils/three/index.js:
--------------------------------------------------------------------------------
1 | import * as THREE from "three";
2 | import SkeletonUtils from "./skeleton-utils";
3 |
4 | export const clean = obj => {
5 | while (obj.children.length > 0) {
6 | clean(obj.children[0]);
7 | obj.remove(obj.children[0]);
8 | }
9 |
10 | if (obj.geometry && obj.geometry.dispose) obj.geometry.dispose();
11 | if (obj.material && obj.material.dispose) obj.material.dispose();
12 | if (obj.texture && obj.texture.dispose) obj.texture.dispose();
13 | };
14 |
15 | export const clear = clean;
16 |
17 | export const remove = (parent, child) => {
18 | if (child)
19 | clean(child);
20 |
21 | if (parent)
22 | parent.remove(child);
23 | };
24 |
25 | export const direction = obj => {
26 | return obj.getWorldDirection(new THREE.Vector3());
27 | };
28 |
29 | export const rotateAroundPoint = (
30 | obj,
31 | point,
32 | { x = 0, y = 0, z = 0 }
33 | ) => {
34 | //-- https://stackoverflow.com/a/42866733/138392
35 | //-- https://stackoverflow.com/a/44288885/138392
36 |
37 | const original = obj.position.clone();
38 | const pivot = point.clone();
39 | const diff = new THREE.Vector3().subVectors(original, pivot);
40 |
41 | obj.position.copy(pivot);
42 |
43 | obj.rotation.x += x;
44 | obj.rotation.y += y;
45 | obj.rotation.z += z;
46 |
47 | diff.applyAxisAngle(new THREE.Vector3(1, 0, 0), x);
48 | diff.applyAxisAngle(new THREE.Vector3(0, 1, 0), y);
49 | diff.applyAxisAngle(new THREE.Vector3(0, 0, 1), z);
50 |
51 | obj.position.add(diff);
52 | };
53 |
54 | export const model = obj => {
55 | return obj.model ? obj.model : obj;
56 | };
57 |
58 | export const add = (parent, child) => {
59 | if (!parent || !child)
60 | return;
61 |
62 | const p = parent.model ? parent.model : parent;
63 | const c = child.model ? child.model : child;
64 |
65 | model(p).add(model(c))
66 | };
67 |
68 | export const reparent = (subject, newParent) => {
69 | subject.matrix.copy(subject.matrixWorld);
70 | subject.applyMatrix(new THREE.Matrix4().getInverse(newParent.matrixWorld));
71 | newParent.add(subject);
72 | };
73 |
74 | export const size = model => {
75 | const currentSize = new THREE.Vector3();
76 | const currentBox = new THREE.Box3().setFromObject(model);
77 |
78 | currentBox.getSize(currentSize);
79 |
80 | return currentSize;
81 | };
82 |
83 | export const cloneTexture = texture => {
84 | const clone = texture.clone();
85 |
86 | return clone;
87 | };
88 |
89 | export const cloneMesh = SkeletonUtils.clone;
90 |
91 | export const firstMesh = obj => {
92 | if (!obj)
93 | return;
94 |
95 | if (obj.isMesh)
96 | return obj;
97 |
98 | if (obj.children && obj.children.length){
99 | for (let i = 0; i < obj.children.length; i++) {
100 | const test = firstMesh(obj.children[i]);
101 |
102 | if (test && test.isMesh)
103 | return test;
104 | }
105 | }
106 | };
107 |
108 | export const promisifyLoader = (loader, onProgress) => {
109 |
110 | const promiseLoader = url => {
111 | return new Promise( (resolve, reject) => {
112 | loader.load(url, resolve, onProgress, reject);
113 | });
114 | }
115 |
116 | return {
117 | originalLoader: loader,
118 | load: promiseLoader,
119 | };
120 | };
--------------------------------------------------------------------------------
/src/game/utils/three/skeleton-utils.js:
--------------------------------------------------------------------------------
1 | import * as THREE from "three";
2 |
3 | /**
4 | * @author sunag / http://www.sunag.com.br
5 | */
6 |
7 | const SkeletonUtils = {
8 |
9 | retarget: function () {
10 |
11 | var pos = new THREE.Vector3(),
12 | quat = new THREE.Quaternion(),
13 | scale = new THREE.Vector3(),
14 | bindBoneMatrix = new THREE.Matrix4(),
15 | relativeMatrix = new THREE.Matrix4(),
16 | globalMatrix = new THREE.Matrix4();
17 |
18 | return function ( target, source, options ) {
19 |
20 | options = options || {};
21 | options.preserveMatrix = options.preserveMatrix !== undefined ? options.preserveMatrix : true;
22 | options.preservePosition = options.preservePosition !== undefined ? options.preservePosition : true;
23 | options.preserveHipPosition = options.preserveHipPosition !== undefined ? options.preserveHipPosition : false;
24 | options.useTargetMatrix = options.useTargetMatrix !== undefined ? options.useTargetMatrix : false;
25 | options.hip = options.hip !== undefined ? options.hip : "hip";
26 | options.names = options.names || {};
27 |
28 | var sourceBones = source.isObject3D ? source.skeleton.bones : this.getBones( source ),
29 | bones = target.isObject3D ? target.skeleton.bones : this.getBones( target ),
30 | bindBones,
31 | bone, name, boneTo,
32 | bonesPosition, i;
33 |
34 | // reset bones
35 |
36 | if ( target.isObject3D ) {
37 |
38 | target.skeleton.pose();
39 |
40 | } else {
41 |
42 | options.useTargetMatrix = true;
43 | options.preserveMatrix = false;
44 |
45 | }
46 |
47 | if ( options.preservePosition ) {
48 |
49 | bonesPosition = [];
50 |
51 | for ( i = 0; i < bones.length; i ++ ) {
52 |
53 | bonesPosition.push( bones[ i ].position.clone() );
54 |
55 | }
56 |
57 | }
58 |
59 | if ( options.preserveMatrix ) {
60 |
61 | // reset matrix
62 |
63 | target.updateMatrixWorld();
64 |
65 | target.matrixWorld.identity();
66 |
67 | // reset children matrix
68 |
69 | for ( i = 0; i < target.children.length; ++ i ) {
70 |
71 | target.children[ i ].updateMatrixWorld( true );
72 |
73 | }
74 |
75 | }
76 |
77 | if ( options.offsets ) {
78 |
79 | bindBones = [];
80 |
81 | for ( i = 0; i < bones.length; ++ i ) {
82 |
83 | bone = bones[ i ];
84 | name = options.names[ bone.name ] || bone.name;
85 |
86 | if ( options.offsets && options.offsets[ name ] ) {
87 |
88 | bone.matrix.multiply( options.offsets[ name ] );
89 |
90 | bone.matrix.decompose( bone.position, bone.quaternion, bone.scale );
91 |
92 | bone.updateMatrixWorld();
93 |
94 | }
95 |
96 | bindBones.push( bone.matrixWorld.clone() );
97 |
98 | }
99 |
100 | }
101 |
102 | for ( i = 0; i < bones.length; ++ i ) {
103 |
104 | bone = bones[ i ];
105 | name = options.names[ bone.name ] || bone.name;
106 |
107 | boneTo = this.getBoneByName( name, sourceBones );
108 |
109 | globalMatrix.copy( bone.matrixWorld );
110 |
111 | if ( boneTo ) {
112 |
113 | boneTo.updateMatrixWorld();
114 |
115 | if ( options.useTargetMatrix ) {
116 |
117 | relativeMatrix.copy( boneTo.matrixWorld );
118 |
119 | } else {
120 |
121 | relativeMatrix.getInverse( target.matrixWorld );
122 | relativeMatrix.multiply( boneTo.matrixWorld );
123 |
124 | }
125 |
126 | // ignore scale to extract rotation
127 |
128 | scale.setFromMatrixScale( relativeMatrix );
129 | relativeMatrix.scale( scale.set( 1 / scale.x, 1 / scale.y, 1 / scale.z ) );
130 |
131 | // apply to global matrix
132 |
133 | globalMatrix.makeRotationFromQuaternion( quat.setFromRotationMatrix( relativeMatrix ) );
134 |
135 | if ( target.isObject3D ) {
136 |
137 | var boneIndex = bones.indexOf( bone ),
138 | wBindMatrix = bindBones ? bindBones[ boneIndex ] : bindBoneMatrix.getInverse( target.skeleton.boneInverses[ boneIndex ] );
139 |
140 | globalMatrix.multiply( wBindMatrix );
141 |
142 | }
143 |
144 | globalMatrix.copyPosition( relativeMatrix );
145 |
146 | }
147 |
148 | if ( bone.parent && bone.parent.isBone ) {
149 |
150 | bone.matrix.getInverse( bone.parent.matrixWorld );
151 | bone.matrix.multiply( globalMatrix );
152 |
153 | } else {
154 |
155 | bone.matrix.copy( globalMatrix );
156 |
157 | }
158 |
159 | if ( options.preserveHipPosition && name === options.hip ) {
160 |
161 | bone.matrix.setPosition( pos.set( 0, bone.position.y, 0 ) );
162 |
163 | }
164 |
165 | bone.matrix.decompose( bone.position, bone.quaternion, bone.scale );
166 |
167 | bone.updateMatrixWorld();
168 |
169 | }
170 |
171 | if ( options.preservePosition ) {
172 |
173 | for ( i = 0; i < bones.length; ++ i ) {
174 |
175 | bone = bones[ i ];
176 | name = options.names[ bone.name ] || bone.name;
177 |
178 | if ( name !== options.hip ) {
179 |
180 | bone.position.copy( bonesPosition[ i ] );
181 |
182 | }
183 |
184 | }
185 |
186 | }
187 |
188 | if ( options.preserveMatrix ) {
189 |
190 | // restore matrix
191 |
192 | target.updateMatrixWorld( true );
193 |
194 | }
195 |
196 | };
197 |
198 | }(),
199 |
200 | retargetClip: function ( target, source, clip, options ) {
201 |
202 | options = options || {};
203 | options.useFirstFramePosition = options.useFirstFramePosition !== undefined ? options.useFirstFramePosition : false;
204 | options.fps = options.fps !== undefined ? options.fps : 30;
205 | options.names = options.names || [];
206 |
207 | if ( ! source.isObject3D ) {
208 |
209 | source = this.getHelperFromSkeleton( source );
210 |
211 | }
212 |
213 | var numFrames = Math.round( clip.duration * ( options.fps / 1000 ) * 1000 ),
214 | delta = 1 / options.fps,
215 | convertedTracks = [],
216 | mixer = new THREE.AnimationMixer( source ),
217 | bones = this.getBones( target.skeleton ),
218 | boneDatas = [],
219 | positionOffset,
220 | bone, boneTo, boneData,
221 | name, i, j;
222 |
223 | mixer.clipAction( clip ).play();
224 | mixer.update( 0 );
225 |
226 | source.updateMatrixWorld();
227 |
228 | for ( i = 0; i < numFrames; ++ i ) {
229 |
230 | var time = i * delta;
231 |
232 | this.retarget( target, source, options );
233 |
234 | for ( j = 0; j < bones.length; ++ j ) {
235 |
236 | name = options.names[ bones[ j ].name ] || bones[ j ].name;
237 |
238 | boneTo = this.getBoneByName( name, source.skeleton );
239 |
240 | if ( boneTo ) {
241 |
242 | bone = bones[ j ];
243 | boneData = boneDatas[ j ] = boneDatas[ j ] || { bone: bone };
244 |
245 | if ( options.hip === name ) {
246 |
247 | if ( ! boneData.pos ) {
248 |
249 | boneData.pos = {
250 | times: new Float32Array( numFrames ),
251 | values: new Float32Array( numFrames * 3 )
252 | };
253 |
254 | }
255 |
256 | if ( options.useFirstFramePosition ) {
257 |
258 | if ( i === 0 ) {
259 |
260 | positionOffset = bone.position.clone();
261 |
262 | }
263 |
264 | bone.position.sub( positionOffset );
265 |
266 | }
267 |
268 | boneData.pos.times[ i ] = time;
269 |
270 | bone.position.toArray( boneData.pos.values, i * 3 );
271 |
272 | }
273 |
274 | if ( ! boneData.quat ) {
275 |
276 | boneData.quat = {
277 | times: new Float32Array( numFrames ),
278 | values: new Float32Array( numFrames * 4 )
279 | };
280 |
281 | }
282 |
283 | boneData.quat.times[ i ] = time;
284 |
285 | bone.quaternion.toArray( boneData.quat.values, i * 4 );
286 |
287 | }
288 |
289 | }
290 |
291 | mixer.update( delta );
292 |
293 | source.updateMatrixWorld();
294 |
295 | }
296 |
297 | for ( i = 0; i < boneDatas.length; ++ i ) {
298 |
299 | boneData = boneDatas[ i ];
300 |
301 | if ( boneData ) {
302 |
303 | if ( boneData.pos ) {
304 |
305 | convertedTracks.push( new THREE.VectorKeyframeTrack(
306 | ".bones[" + boneData.bone.name + "].position",
307 | boneData.pos.times,
308 | boneData.pos.values
309 | ) );
310 |
311 | }
312 |
313 | convertedTracks.push( new THREE.QuaternionKeyframeTrack(
314 | ".bones[" + boneData.bone.name + "].quaternion",
315 | boneData.quat.times,
316 | boneData.quat.values
317 | ) );
318 |
319 | }
320 |
321 | }
322 |
323 | mixer.uncacheAction( clip );
324 |
325 | return new THREE.AnimationClip( clip.name, - 1, convertedTracks );
326 |
327 | },
328 |
329 | getHelperFromSkeleton: function ( skeleton ) {
330 |
331 | var source = new THREE.SkeletonHelper( skeleton.bones[ 0 ] );
332 | source.skeleton = skeleton;
333 |
334 | return source;
335 |
336 | },
337 |
338 | getSkeletonOffsets: function () {
339 |
340 | var targetParentPos = new THREE.Vector3(),
341 | targetPos = new THREE.Vector3(),
342 | sourceParentPos = new THREE.Vector3(),
343 | sourcePos = new THREE.Vector3(),
344 | targetDir = new THREE.Vector2(),
345 | sourceDir = new THREE.Vector2();
346 |
347 | return function ( target, source, options ) {
348 |
349 | options = options || {};
350 | options.hip = options.hip !== undefined ? options.hip : "hip";
351 | options.names = options.names || {};
352 |
353 | if ( ! source.isObject3D ) {
354 |
355 | source = this.getHelperFromSkeleton( source );
356 |
357 | }
358 |
359 | var nameKeys = Object.keys( options.names ),
360 | nameValues = Object.values( options.names ),
361 | sourceBones = source.isObject3D ? source.skeleton.bones : this.getBones( source ),
362 | bones = target.isObject3D ? target.skeleton.bones : this.getBones( target ),
363 | offsets = [],
364 | bone, boneTo,
365 | name, i;
366 |
367 | target.skeleton.pose();
368 |
369 | for ( i = 0; i < bones.length; ++ i ) {
370 |
371 | bone = bones[ i ];
372 | name = options.names[ bone.name ] || bone.name;
373 |
374 | boneTo = this.getBoneByName( name, sourceBones );
375 |
376 | if ( boneTo && name !== options.hip ) {
377 |
378 | var boneParent = this.getNearestBone( bone.parent, nameKeys ),
379 | boneToParent = this.getNearestBone( boneTo.parent, nameValues );
380 |
381 | boneParent.updateMatrixWorld();
382 | boneToParent.updateMatrixWorld();
383 |
384 | targetParentPos.setFromMatrixPosition( boneParent.matrixWorld );
385 | targetPos.setFromMatrixPosition( bone.matrixWorld );
386 |
387 | sourceParentPos.setFromMatrixPosition( boneToParent.matrixWorld );
388 | sourcePos.setFromMatrixPosition( boneTo.matrixWorld );
389 |
390 | targetDir.subVectors(
391 | new THREE.Vector2( targetPos.x, targetPos.y ),
392 | new THREE.Vector2( targetParentPos.x, targetParentPos.y )
393 | ).normalize();
394 |
395 | sourceDir.subVectors(
396 | new THREE.Vector2( sourcePos.x, sourcePos.y ),
397 | new THREE.Vector2( sourceParentPos.x, sourceParentPos.y )
398 | ).normalize();
399 |
400 | var laterialAngle = targetDir.angle() - sourceDir.angle();
401 |
402 | var offset = new THREE.Matrix4().makeRotationFromEuler(
403 | new THREE.Euler(
404 | 0,
405 | 0,
406 | laterialAngle
407 | )
408 | );
409 |
410 | bone.matrix.multiply( offset );
411 |
412 | bone.matrix.decompose( bone.position, bone.quaternion, bone.scale );
413 |
414 | bone.updateMatrixWorld();
415 |
416 | offsets[ name ] = offset;
417 |
418 | }
419 |
420 | }
421 |
422 | return offsets;
423 |
424 | };
425 |
426 | }(),
427 |
428 | renameBones: function ( skeleton, names ) {
429 |
430 | var bones = this.getBones( skeleton );
431 |
432 | for ( var i = 0; i < bones.length; ++ i ) {
433 |
434 | var bone = bones[ i ];
435 |
436 | if ( names[ bone.name ] ) {
437 |
438 | bone.name = names[ bone.name ];
439 |
440 | }
441 |
442 | }
443 |
444 | return this;
445 |
446 | },
447 |
448 | getBones: function ( skeleton ) {
449 |
450 | return Array.isArray( skeleton ) ? skeleton : skeleton.bones;
451 |
452 | },
453 |
454 | getBoneByName: function ( name, skeleton ) {
455 |
456 | for ( var i = 0, bones = this.getBones( skeleton ); i < bones.length; i ++ ) {
457 |
458 | if ( name === bones[ i ].name )
459 |
460 | return bones[ i ];
461 |
462 | }
463 |
464 | },
465 |
466 | getNearestBone: function ( bone, names ) {
467 |
468 | while ( bone.isBone ) {
469 |
470 | if ( names.indexOf( bone.name ) !== - 1 ) {
471 |
472 | return bone;
473 |
474 | }
475 |
476 | bone = bone.parent;
477 |
478 | }
479 |
480 | },
481 |
482 | findBoneTrackData: function ( name, tracks ) {
483 |
484 | var regexp = /\[(.*)\]\.(.*)/,
485 | result = { name: name };
486 |
487 | for ( var i = 0; i < tracks.length; ++ i ) {
488 |
489 | // 1 is track name
490 | // 2 is track type
491 | var trackData = regexp.exec( tracks[ i ].name );
492 |
493 | if ( trackData && name === trackData[ 1 ] ) {
494 |
495 | result[ trackData[ 2 ] ] = i;
496 |
497 | }
498 |
499 | }
500 |
501 | return result;
502 |
503 | },
504 |
505 | getEqualsBonesNames: function ( skeleton, targetSkeleton ) {
506 |
507 | var sourceBones = this.getBones( skeleton ),
508 | targetBones = this.getBones( targetSkeleton ),
509 | bones = [];
510 |
511 | search : for ( var i = 0; i < sourceBones.length; i ++ ) {
512 |
513 | var boneName = sourceBones[ i ].name;
514 |
515 | for ( var j = 0; j < targetBones.length; j ++ ) {
516 |
517 | if ( boneName === targetBones[ j ].name ) {
518 |
519 | bones.push( boneName );
520 |
521 | continue search;
522 |
523 | }
524 |
525 | }
526 |
527 | }
528 |
529 | return bones;
530 |
531 | },
532 |
533 | clone: function ( source ) {
534 |
535 | var sourceLookup = new Map();
536 | var cloneLookup = new Map();
537 |
538 | var clone = source.clone();
539 |
540 | parallelTraverse( source, clone, function ( sourceNode, clonedNode ) {
541 |
542 | sourceLookup.set( clonedNode, sourceNode );
543 | cloneLookup.set( sourceNode, clonedNode );
544 |
545 | } );
546 |
547 | clone.traverse( function ( node ) {
548 |
549 | if ( ! node.isSkinnedMesh ) return;
550 |
551 | var clonedMesh = node;
552 | var sourceMesh = sourceLookup.get( node );
553 | var sourceBones = sourceMesh.skeleton.bones;
554 |
555 | clonedMesh.skeleton = sourceMesh.skeleton.clone();
556 | clonedMesh.bindMatrix.copy( sourceMesh.bindMatrix );
557 |
558 | clonedMesh.skeleton.bones = sourceBones.map( function ( bone ) {
559 |
560 | return cloneLookup.get( bone );
561 |
562 | } );
563 |
564 | clonedMesh.bind( clonedMesh.skeleton, clonedMesh.bindMatrix );
565 |
566 | } );
567 |
568 | return clone;
569 |
570 | }
571 |
572 | };
573 |
574 |
575 | function parallelTraverse( a, b, callback ) {
576 |
577 | callback( a, b );
578 |
579 | for ( var i = 0; i < a.children.length; i ++ ) {
580 |
581 | parallelTraverse( a.children[ i ], b.children[ i ], callback );
582 |
583 | }
584 |
585 | }
586 |
587 | export default SkeletonUtils;
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | html,
2 | body,
3 | #root {
4 | height: 100%;
5 | margin: 0px;
6 | }
7 |
8 | body {
9 | overflow: hidden;
10 | position: fixed;
11 | margin: 0;
12 | padding: 0;
13 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
14 | "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
15 | "Helvetica Neue", sans-serif;
16 | -webkit-font-smoothing: antialiased;
17 | -moz-osx-font-smoothing: grayscale;
18 | }
19 |
20 | code {
21 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
22 | }
23 |
24 | .game {
25 | display: flex;
26 | flex-direction: column;
27 | height: 100%;
28 | align-items: center;
29 | }
30 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import Game from "./game";
4 | import * as ServiceWorker from './service-worker';
5 | import './index.css';
6 |
7 | ReactDOM.render(, document.getElementById('root'));
8 |
9 | // If you want your app to work offline and load faster, you can change
10 | // unregister() to register() below. Note this comes with some pitfalls.
11 | // Learn more about service workers: https://bit.ly/CRA-PWA
12 | ServiceWorker.register();
13 |
--------------------------------------------------------------------------------
/src/service-worker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.1/8 is considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA'
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl)
104 | .then(response => {
105 | // Ensure service worker exists, and that we really are getting a JS file.
106 | const contentType = response.headers.get('content-type');
107 | if (
108 | response.status === 404 ||
109 | (contentType != null && contentType.indexOf('javascript') === -1)
110 | ) {
111 | // No service worker found. Probably a different app. Reload the page.
112 | navigator.serviceWorker.ready.then(registration => {
113 | registration.unregister().then(() => {
114 | window.location.reload();
115 | });
116 | });
117 | } else {
118 | // Service worker found. Proceed as normal.
119 | registerValidSW(swUrl, config);
120 | }
121 | })
122 | .catch(() => {
123 | console.log(
124 | 'No internet connection found. App is running in offline mode.'
125 | );
126 | });
127 | }
128 |
129 | export function unregister() {
130 | if ('serviceWorker' in navigator) {
131 | navigator.serviceWorker.ready.then(registration => {
132 | registration.unregister();
133 | });
134 | }
135 | }
136 |
--------------------------------------------------------------------------------