-
Notifications
You must be signed in to change notification settings - Fork 106
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
#146 Add initial support for GlowLayer to include all child meshes in…
… inclusion list. Works for regular meshes, but not for models yet.
- Loading branch information
Showing
9 changed files
with
238 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { Mesh } from '@babylonjs/core'; | ||
| import { GlowLayer } from '@babylonjs/core/Layers/glowLayer'; | ||
| import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh'; | ||
|
|
||
| import { CreatedInstance } from '../CreatedInstance'; | ||
| import { FiberAbstractMeshProps } from '../generatedProps'; | ||
| import BaseLifecycleListener from './BaseLifecycleListener'; | ||
|
|
||
| export default class AbstractMeshLifecycleListener extends BaseLifecycleListener<AbstractMesh, FiberAbstractMeshProps> { | ||
|
|
||
| onMount(instance?: CreatedInstance<AbstractMesh>) { | ||
| if (instance === undefined || instance.hostInstance === undefined) { | ||
| console.error('Missing instance'); | ||
| return; | ||
| } | ||
|
|
||
| let mesh: AbstractMesh = instance.hostInstance; | ||
| let tmp: CreatedInstance<any> | null = instance.parent; | ||
|
|
||
| while (tmp !== null) { | ||
| if (tmp.metadata && tmp.metadata.isGlowLayer === true) { | ||
| if (tmp.customProps.addIncludeOnlyChildren === true) { | ||
| // TODO: listen for mesh disposal to remove from inclusion list? | ||
| (tmp.hostInstance as GlowLayer).addIncludedOnlyMesh(mesh as Mesh); | ||
| } | ||
| break; | ||
| } | ||
| tmp = tmp.parent; | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * This was copied from 'NodeLifecycleListener'. TODO: Would be better to have inheritance hierarchy like 'BaseLifecycleListener'. | ||
| */ | ||
| onParented(parent: CreatedInstance<any>, child: CreatedInstance<any>) { | ||
| super.onParented(parent, child); | ||
| if (parent.metadata.isNode && child.metadata.isNode) { | ||
| // TODO: consider add option for setParent(), which parents and maintains mesh pos/rot in world space | ||
| // child.hostInstance.setParent(parent.hostInstance) | ||
| child.hostInstance.parent = parent.hostInstance; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
144 changes: 144 additions & 0 deletions
144
stories/babylonjs/SpecialFX/multi-glow-layer.stories.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| import React, { useRef } from 'react' | ||
| import '@babylonjs/inspector' | ||
| import { Engine, Scene, useScene } from '../../../dist/react-babylonjs' | ||
| import { Color3, Color4, Vector3 } from '@babylonjs/core/Maths/math' | ||
| import '../../style.css' | ||
| import ScaledModelWithProgress from '../ScaledModelWithProgress' | ||
| import { Control } from '@babylonjs/gui/2D/controls/control' | ||
|
|
||
| export default { title: 'Special FX' }; | ||
|
|
||
| /** | ||
| * some inspiration derived from here - would be good to extend this sample with more cubes at least. | ||
| * https://playground.babylonjs.com/#129LNB#16 | ||
| */ | ||
|
|
||
| const onSceneCreated = (scene) => { | ||
| scene.imageProcessingConfiguration.contrast = 1.6; | ||
| scene.imageProcessingConfiguration.exposure = 0.6; | ||
| scene.imageProcessingConfiguration.toneMappingEnabled = true; | ||
| } | ||
|
|
||
| const Inspector = () => { | ||
| const scene = useScene(); | ||
| scene.debugLayer.show(); | ||
| return null; | ||
| } | ||
|
|
||
| const RADIUS = 10; | ||
| const NUMBER_OF_BOXES = 20; | ||
|
|
||
| /** | ||
| * TODO | ||
| * loading so slow | ||
| */ | ||
| function WithGlowLayer() { | ||
| const glow1Ref = useRef(null); | ||
| const glow2Ref = useRef(null); | ||
|
|
||
| const onCheckbox1Clicked = (value) => { | ||
| if (glow1Ref.current) { | ||
| glow1Ref.current.isEnabled = value; | ||
| } | ||
| }; | ||
|
|
||
| const onCheckbox2Clicked = (value) => { | ||
| if (glow2Ref.current) { | ||
| glow2Ref.current.isEnabled = value; | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <Engine antialias adaptToDeviceRatio canvasId='babylonJS'> | ||
| <Scene clearColor={new Color4(0.02, 0.022, 0.02, 1)} onCreated={onSceneCreated}> | ||
| <arcRotateCamera | ||
| name='Camera' | ||
| alpha={2.5} | ||
| beta={0.9} | ||
| radius={25} | ||
| lowerRadiusLimit={20} | ||
| upperRadiusLimit={80} | ||
| target={Vector3.Zero()} | ||
| useAutoRotationBehavior | ||
| /> | ||
|
|
||
| <hemisphericLight name='hemi' direction={Vector3.Up()} /> | ||
| <Inspector /> | ||
| <glowLayer ref={glow1Ref} name="glow" options={{ mainTextureSamples: 4 }} intensity={1} isEnabled={true} addIncludeOnlyChildren> | ||
| {Array.from(new Array(NUMBER_OF_BOXES), (_, index) => index).map(x => ( | ||
| <box name={'glow-box-1-{number}'} position={new Vector3(Math.cos(2*Math.PI/NUMBER_OF_BOXES*x)*RADIUS,1, Math.sin(2*Math.PI/NUMBER_OF_BOXES*x)*RADIUS)}> | ||
| <standardMaterial diffuseColor={Color3.Red()} emissiveColor={Color3.Red()} /> | ||
| </box> | ||
| ))} | ||
| <ScaledModelWithProgress rootUrl='https://www.babylonjs.com/Assets/NeonPipe/glTF/' sceneFilename='NeonPipe.gltf?v=1' | ||
| progressBarColor={Color3.FromInts(255, 165, 0)} center={new Vector3(5, 0, 5)} | ||
| /> | ||
| </glowLayer> | ||
|
|
||
| <glowLayer ref={glow2Ref} name="glow2" options={{ mainTextureSamples: 4 }} intensity={0.4} isEnabled={true} addIncludeOnlyChildren> | ||
| {Array.from(new Array(NUMBER_OF_BOXES), (_, index) => index).map(x => ( | ||
| <box name={'glow-box-1-{number}'} position={new Vector3(Math.cos(2*Math.PI/NUMBER_OF_BOXES*x)*RADIUS,3, Math.sin(2*Math.PI/NUMBER_OF_BOXES*x)*RADIUS)}> | ||
| <standardMaterial diffuseColor={Color3.Green()} emissiveColor={Color3.Green()} /> | ||
| </box> | ||
| ))} | ||
| <ScaledModelWithProgress rootUrl='https://www.babylonjs.com/Assets/NeonPipe/glTF/' sceneFilename='NeonPipe.gltf?v=2' | ||
| progressBarColor={Color3.FromInts(255, 165, 0)} center={new Vector3(-5, 0, -5)} | ||
| /> | ||
| </glowLayer> | ||
|
|
||
| <adtFullscreenUi name='ui1'> | ||
| <stackPanel | ||
| width='200px' | ||
| height='200px' | ||
| horizontalAlignment={Control.HORIZONTAL_ALIGNMENT_RIGHT} | ||
| verticalAlignment={Control.VERTICAL_ALIGNMENT_CENTER} | ||
| > | ||
| <rectangle height='80px'> | ||
| <stackPanel | ||
| paddingLeftInPixels={20} | ||
| width='200px' | ||
| isVertical={false} | ||
| horizontalAlignment={Control.HORIZONTAL_ALIGNMENT_RIGHT} | ||
| verticalAlignment={Control.VERTICAL_ALIGNMENT_CENTER} | ||
| > | ||
| <checkbox width='20px' height='20px' isChecked={true} color='green' | ||
| onIsCheckedChangedObservable={onCheckbox1Clicked} | ||
| /> | ||
| <textBlock text='Glow 1 Enabled' width='180px' paddingLeft='5px' color='white' | ||
| textHorizontalAlignment={Control.HORIZONTAL_ALIGNMENT_LEFT} | ||
| /> | ||
| </stackPanel> | ||
| </rectangle> | ||
| <rectangle height='80px'> | ||
| <stackPanel | ||
| width='200px' | ||
| paddingLeftInPixels={20} | ||
| isVertical={false} | ||
| horizontalAlignment={Control.HORIZONTAL_ALIGNMENT_RIGHT} | ||
| verticalAlignment={Control.VERTICAL_ALIGNMENT_CENTER} | ||
| > | ||
| <checkbox width='20px' height='20px' isChecked={true} color='green' | ||
| onIsCheckedChangedObservable={onCheckbox2Clicked} | ||
| /> | ||
| <textBlock text='Glow 2 Enabled' width='180px' paddingLeft='5px' color='white' | ||
| textHorizontalAlignment={Control.HORIZONTAL_ALIGNMENT_LEFT} | ||
| /> | ||
| </stackPanel> | ||
| </rectangle> | ||
| </stackPanel> | ||
| </adtFullscreenUi> | ||
| <environmentHelper options={{ | ||
| groundSize: 160, | ||
| skyboxSize: 160, | ||
| sizeAuto: false | ||
| }} setMainColor={[Color3.Gray()]} /> | ||
| </Scene> | ||
| </Engine> | ||
| ) | ||
| } | ||
|
|
||
| export const MultiGlowLayer = () => ( | ||
| <div style={{ flex: 1, display: 'flex' }}> | ||
| <WithGlowLayer /> | ||
| </div> | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters