Skip to content
This repository has been archived by the owner on Jun 21, 2022. It is now read-only.

Commit

Permalink
Merge pull request #26 from Jam3/develop
Browse files Browse the repository at this point in the history
Merge develop to master
  • Loading branch information
ameliemaia authored Apr 22, 2020
2 parents 4456dc3 + 54f8fe0 commit 9248ad2
Show file tree
Hide file tree
Showing 33 changed files with 2,512 additions and 308 deletions.
1 change: 1 addition & 0 deletions .env.gh-pages
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
PUBLIC_URL=/webgl-react-app
1 change: 1 addition & 0 deletions .flowconfig
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
[options]
all=true
emoji=true
esproposal.optional_chaining=enable

[strict]

Expand Down
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# WebGL React App

![WebGL React App](webgl-react-app.gif)

The goal is this project is to standardise WebGL and React based projects at Jam3.

Building upon experience it features highly optimised approaches for rendering and scene management.
Expand Down
295 changes: 221 additions & 74 deletions package-lock.json

Large diffs are not rendered by default.

33 changes: 18 additions & 15 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,42 +5,45 @@
"dependencies": {
"@jam3/detect": "^1.0.2",
"@jam3/stats": "^1.0.1",
"dat.gui": "^0.7.6",
"dat.gui": "^0.7.7",
"detect-gpu": "^1.2.0",
"env-cmd": "^10.1.0",
"eventemitter3": "^4.0.0",
"file-saver": "^2.0.2",
"gsap": "^3.1.1",
"gsap": "^3.2.6",
"gsap-promisify": "^1.0.2",
"query-string": "^6.11.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"query-string": "^6.12.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.0",
"three": "^0.113.2"
},
"devDependencies": {
"@commitlint/cli": "^8.3.5",
"audit-ci": "^2.5.1",
"eslint-config-prettier": "^6.10.0",
"eslint-config-prettier": "^6.11.0",
"eslint-config-react-jam3": "^1.1.0",
"eslint-plugin-jam3": "^0.2.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-promise": "^4.2.1",
"husky": "^4.2.3",
"lint-staged": "^10.0.7",
"prettier": "^1.19.1",
"fbx2gltf": "^0.9.7-p1",
"file-extension": "^4.0.5",
"file-name": "^0.1.0",
"flow-bin": "^0.118.0",
"flow-typed": "^3.1.0",
"gh-pages": "^2.2.0",
"husky": "^4.2.5",
"image-size": "^0.8.3",
"lint-staged": "^10.1.7",
"npm-run-all": "^4.1.5",
"prettier": "^1.19.1",
"sharp": "^0.24.1",
"image-size": "^0.8.3",
"file-extension": "^4.0.5",
"file-name": "^0.1.0",
"shelljs": "^0.8.3",
"fbx2gltf": "^0.9.7-p1"
"shelljs": "^0.8.3"
},
"scripts": {
"start": "react-scripts start",
"build": "npm run linters && react-scripts build",
"deploy": "env-cmd -f .env.gh-pages npm run build && gh-pages -d build",
"eject": "react-scripts eject",
"audit": "audit-ci --high",
"js-lint": "eslint './src/**/*.js' -c ./.eslintrc.json --quiet --ignore-pattern .gitignore",
Expand Down
Binary file added public/assets/webgl/landing/jam3.glb
Binary file not shown.
Binary file modified public/assets/webgl/test/scene.glb
Binary file not shown.
2 changes: 1 addition & 1 deletion public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<meta name="description" content="Jam3's WebGL React App Boilerplate" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo180.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
Expand Down
6 changes: 6 additions & 0 deletions src/assets/landing/config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"textures": {},
"models": {
"jam3.fbx": { "convert": true }
}
}
Binary file added src/assets/landing/jam3.fbx
Binary file not shown.
2 changes: 1 addition & 1 deletion src/webgl-app/loading/asset-manager.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ class AssetManager {
* @returns
* @memberof AssetManager
*/
get(groupId: string, id: string, all: boolean = false): boolean | Asset | mixed {
get(groupId: string, id: string, all: boolean = false): boolean | mixed {
// console.log('groupId', groupId, 'id', id);
const asset = this.find(this.assets[groupId], id);
if (asset && asset instanceof Asset) {
Expand Down
3 changes: 2 additions & 1 deletion src/webgl-app/loading/loaders/three-gltf-loader.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@ import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
import Loader from './loader';
import Asset from '../asset';
import settings from '../../settings';

// Use the draco loader for gltf if the glb file is compressed with draco
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/assets/lib/draco/gltf/');
dracoLoader.setDecoderPath(`${settings.baseUrl}/assets/lib/draco/gltf/`);
dracoLoader.preload();

/**
Expand Down
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import { Mesh, SphereBufferGeometry, BackSide, ShaderMaterial, Color } from 'three';
import { GUI } from 'dat.gui';
import { vertexShader, fragmentShader } from './shader.glsl';
import { GRAPHICS_HIGH, GRAPHICS_NORMAL, getGraphicsMode } from '../../../../rendering/graphics';
import { GRAPHICS_HIGH, GRAPHICS_NORMAL, getGraphicsMode } from '../../rendering/graphics';

export default class Background {
gui: GUI;
guiParent: GUI;
config: Object;
mesh: Mesh;

constructor(gui: GUI) {
constructor(gui: GUI, radius: number = 50) {
this.guiParent = gui;

this.config = {
Expand Down Expand Up @@ -57,7 +57,7 @@ export default class Background {
};
const divisions = divisionSettings[getGraphicsMode()];

this.mesh = new Mesh(new SphereBufferGeometry(50, divisions[0], divisions[1]), material);
this.mesh = new Mesh(new SphereBufferGeometry(radius, divisions[0], divisions[1]), material);
this.mesh.matrixAutoUpdate = false;
this.mesh.updateMatrix();
}
Expand Down
2 changes: 1 addition & 1 deletion src/webgl-app/rendering/post-processing/post-processing.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default class PostProcessing {
constructor(gui: GUI) {
// Create gui
this.gui = gui.addFolder('post processing');
this.gui.open();
// this.gui.open();
// Create big triangle geometry, faster than using quad
const geometry = bigTriangle();
// Post camera
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import { CameraHelper } from 'three';
import { Power1 } from 'gsap';
import BaseScene from '../base/base-scene';
import Ambient from '../../lights/ambient';
import Directional from '../../lights/directional';
import assets from './assets';
import CameraDollyManager from '../../cameras/camera-dolly/camera-dolly-manager';
import { resetCamera } from '../../cameras/cameras';
Expand All @@ -12,9 +10,10 @@ export const CAMERA_TRANSITION_SCENE_ID = 'camera-transitions';

export default class CameraTransitionsScene extends BaseScene {
constructor() {
const lights = [new Ambient(), new Directional()];
super({ id: CAMERA_TRANSITION_SCENE_ID, assets, gui: true, guiOpen: true, lights, controls: true });
resetCamera(this.camera, 20);
// Show dev camera view during this scene
settings.devCamera = true;
super({ id: CAMERA_TRANSITION_SCENE_ID, assets, gui: true, guiOpen: true, controls: true });
resetCamera(this.cameras.dev, 50);
}

/**
Expand All @@ -28,9 +27,6 @@ export default class CameraTransitionsScene extends BaseScene {
// Disable main control sincw we're using the camera dolly
this.controls.main.enabled = false;

// Show dev camera view during this scene
settings.devCamera = true;

this.gui.add(this, 'play');
this.gui.add(this, 'stop');

Expand Down
1 change: 1 addition & 0 deletions src/webgl-app/scenes/interactive-sphere/assets.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export default [];
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import BaseScene from '../base/base-scene';
import { VECTOR_ZERO } from '../../utils/math';
import Sphere from './objects/sphere/sphere';
import Ambient from '../../lights/ambient';
import Directional from '../../lights/directional';
import assets from './assets';
import Background from '../../objects/background/background';
import settings from '../../settings';

export const INTERACTIVE_SPHERE_SCENE_ID = 'interactive-sphere';

export default class InteractiveSphereScene extends BaseScene {
constructor() {
settings.devCamera = false;
const lights = [new Ambient(), new Directional()];
super({ id: INTERACTIVE_SPHERE_SCENE_ID, assets, gui: true, guiOpen: true, lights, controls: true });
this.camera.position.set(0, 0, 5);
this.camera.lookAt(VECTOR_ZERO);
}

/**
* Create and setup any objects for the scene
*
* @memberof LandingScene
*/
async createSceneObjects() {
await new Promise((resolve, reject) => {
try {
this.background = new Background(this.gui);
this.scene.add(this.background.mesh);
this.sphere = new Sphere(this.camera);
this.scene.add(this.sphere.mesh);
this.animateInit();
resolve();
} catch (error) {
reject(error);
}
});
}

preloadGpuCullScene = (culled: boolean) => {
this.sphere.preloadGpuCullScene(culled);
};

animateInit = () => {
return this.sphere.animateInit();
};

animateIn = () => {
return this.sphere.animateIn();
};

animateOut = () => {
return this.sphere.animateOut();
};

/**
* Update loop
*
* @memberof LandingScene
*/
update = (delta: number) => {
this.sphere.update(delta);
};
}
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export default {
functions: ``,
preFragColor: `
vec3 normal = normalize(vNormal);
normal.b = 1.0;
outgoingLight *= (normal * 0.5 + 0.5);
`,
postFragColor: `
Expand Down
25 changes: 3 additions & 22 deletions src/webgl-app/scenes/landing/assets.js
Original file line number Diff line number Diff line change
@@ -1,30 +1,11 @@
import Asset from '../../loading/asset';
import Loader from '../../loading/loaders/loader';
import settings from '../../settings';

export default [
new Asset({
id: 'test-image',
src: '/assets/webgl/test/test-128.jpg',
type: Loader.image
}),
new Asset({
id: 'test-json',
src: '/assets/webgl/test/test.json',
type: Loader.json
}),
new Asset({
id: 'test-texture',
src: '/assets/webgl/test/test-128.jpg',
type: Loader.threeTexture
}),
new Asset({
id: 'scene-gltf',
src: '/assets/webgl/test/scene.glb',
id: 'jam3-logo',
src: `${settings.baseUrl}/assets/webgl/landing/jam3.glb`,
type: Loader.threeGLTF
}),
new Asset({
id: 'cube-fbx',
src: '/assets/webgl/test/cube.fbx',
type: Loader.threeFBX
})
];
69 changes: 42 additions & 27 deletions src/webgl-app/scenes/landing/landing-scene.js
Original file line number Diff line number Diff line change
@@ -1,19 +1,22 @@
import BaseScene from '../base/base-scene';
import { VECTOR_ZERO } from '../../utils/math';
import Sphere from './objects/sphere/sphere';
import Ambient from '../../lights/ambient';
import Directional from '../../lights/directional';
import assets from './assets';
import Background from './objects/background/background';
import Background from '../../objects/background/background';
import renderer from '../../rendering/renderer';
import ParticlesNormal from './objects/particles/particles-normal';
import Particles from './objects/particles/particles';
import Jam3 from './objects/jam3/jam3';
import settings from '../../settings';

export const LANDING_SCENE_ID = 'landing';

export default class LandingScene extends BaseScene {
constructor() {
const lights = [new Ambient(), new Directional()];
super({ id: LANDING_SCENE_ID, assets, gui: true, guiOpen: true, lights, controls: true });
this.camera.position.set(0, 0, 5);
this.camera.lookAt(VECTOR_ZERO);
settings.devCamera = false;
super({ id: LANDING_SCENE_ID, assets, gui: true, guiOpen: true, controls: true });
this.cameras.main.position.set(0, 0, 60);
this.cameras.main.lookAt(VECTOR_ZERO);
this.controls.main.enableDamping = true;
}

/**
Expand All @@ -24,32 +27,41 @@ export default class LandingScene extends BaseScene {
async createSceneObjects() {
await new Promise((resolve, reject) => {
try {
this.background = new Background(this.gui);
this.background = new Background(this.gui, 100);
this.scene.add(this.background.mesh);
this.sphere = new Sphere(this.camera);
this.scene.add(this.sphere.mesh);
this.animateInit();

// Create particle classes
this.particlesNormal = new ParticlesNormal(renderer);
this.particles = new Particles(
this.gui,
5000, // total particles
this.particlesNormal, // particles normal texture class
renderer.getPixelRatio()
);

// Create Jam3 logo
this.jam3 = new Jam3(this.gui, this.particles.renderTarget);
this.scene.add(this.jam3.group);

resolve();
} catch (error) {
reject(error);
}
});
}

preloadGpuCullScene = (culled: boolean) => {
this.sphere.preloadGpuCullScene(culled);
};

animateInit = () => {
return this.sphere.animateInit();
};

animateIn = () => {
return this.sphere.animateIn();
};

animateOut = () => {
return this.sphere.animateOut();
/**
* Resize the camera's projection matrix
*
* @memberof LandingScene
*/
resize = (width: number, height: number) => {
this.cameras.dev.aspect = width / height;
this.cameras.dev.updateProjectionMatrix();
this.cameras.main.aspect = width / height;
this.cameras.main.updateProjectionMatrix();
this.particles.resize();
this.jam3.resize();
};

/**
Expand All @@ -58,6 +70,9 @@ export default class LandingScene extends BaseScene {
* @memberof LandingScene
*/
update = (delta: number) => {
this.sphere.update(delta);
this.controls.main.update();
this.particlesNormal.render(this.camera);
this.particles.render(delta, this.camera);
this.jam3.update(this.camera);
};
}
Loading

0 comments on commit 9248ad2

Please sign in to comment.