Skip to content

Commit

Permalink
fix MeshBuilder host type (incorrectly assumed Mesh for static creati…
Browse files Browse the repository at this point in the history 
…on methods)
  • Loading branch information
@brianzinn
brianzinn committed Mar 19, 2021
1 parent 8c74f25 commit aca19d2
Show file tree
Hide file tree
Showing 6 changed files with 123 additions and 139 deletions.
44 changes: 24 additions & 20 deletions src/generatedCode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4085,23 +4085,24 @@ export class FiberTorusKnot implements HasPropsHandlers<FiberMeshProps> {
*
* This code has been generated
*/
export class FiberLineSystem implements HasPropsHandlers<FiberMeshProps> {
private propsHandlers: PropsHandler<FiberMeshProps>[];
export class FiberLineSystem implements HasPropsHandlers<FiberLinesMeshProps> {
private propsHandlers: PropsHandler<FiberLinesMeshProps>[];

constructor() {
this.propsHandlers = [
new FiberMeshPropsHandler()
new FiberLinesMeshPropsHandler()
, new FiberMeshPropsHandler()
, new FiberAbstractMeshPropsHandler()
, new FiberTransformNodePropsHandler()
, new FiberNodePropsHandler()
];
}

getPropsHandlers(): PropsHandler<FiberMeshProps>[] {
getPropsHandlers(): PropsHandler<FiberLinesMeshProps>[] {
return this.propsHandlers;
}

addPropsHandler(propHandler: PropsHandler<FiberMeshProps>): void {
addPropsHandler(propHandler: PropsHandler<FiberLinesMeshProps>): void {
this.propsHandlers.push(propHandler);
}

Expand Down Expand Up @@ -4175,23 +4176,24 @@ export class FiberLineSystem implements HasPropsHandlers<FiberMeshProps> {
*
* This code has been generated
*/
export class FiberLines implements HasPropsHandlers<FiberMeshProps> {
private propsHandlers: PropsHandler<FiberMeshProps>[];
export class FiberLines implements HasPropsHandlers<FiberLinesMeshProps> {
private propsHandlers: PropsHandler<FiberLinesMeshProps>[];

constructor() {
this.propsHandlers = [
new FiberMeshPropsHandler()
new FiberLinesMeshPropsHandler()
, new FiberMeshPropsHandler()
, new FiberAbstractMeshPropsHandler()
, new FiberTransformNodePropsHandler()
, new FiberNodePropsHandler()
];
}

getPropsHandlers(): PropsHandler<FiberMeshProps>[] {
getPropsHandlers(): PropsHandler<FiberLinesMeshProps>[] {
return this.propsHandlers;
}

addPropsHandler(propHandler: PropsHandler<FiberMeshProps>): void {
addPropsHandler(propHandler: PropsHandler<FiberLinesMeshProps>): void {
this.propsHandlers.push(propHandler);
}

Expand Down Expand Up @@ -4266,23 +4268,24 @@ export class FiberLines implements HasPropsHandlers<FiberMeshProps> {
*
* This code has been generated
*/
export class FiberDashedLines implements HasPropsHandlers<FiberMeshProps> {
private propsHandlers: PropsHandler<FiberMeshProps>[];
export class FiberDashedLines implements HasPropsHandlers<FiberLinesMeshProps> {
private propsHandlers: PropsHandler<FiberLinesMeshProps>[];

constructor() {
this.propsHandlers = [
new FiberMeshPropsHandler()
new FiberLinesMeshPropsHandler()
, new FiberMeshPropsHandler()
, new FiberAbstractMeshPropsHandler()
, new FiberTransformNodePropsHandler()
, new FiberNodePropsHandler()
];
}

getPropsHandlers(): PropsHandler<FiberMeshProps>[] {
getPropsHandlers(): PropsHandler<FiberLinesMeshProps>[] {
return this.propsHandlers;
}

addPropsHandler(propHandler: PropsHandler<FiberMeshProps>): void {
addPropsHandler(propHandler: PropsHandler<FiberLinesMeshProps>): void {
this.propsHandlers.push(propHandler);
}

Expand Down Expand Up @@ -5168,23 +5171,24 @@ export class FiberTiledGround implements HasPropsHandlers<FiberMeshProps> {
*
* This code has been generated
*/
export class FiberGroundFromHeightMap implements HasPropsHandlers<FiberMeshProps> {
private propsHandlers: PropsHandler<FiberMeshProps>[];
export class FiberGroundFromHeightMap implements HasPropsHandlers<FiberGroundMeshProps> {
private propsHandlers: PropsHandler<FiberGroundMeshProps>[];

constructor() {
this.propsHandlers = [
new FiberMeshPropsHandler()
new FiberGroundMeshPropsHandler()
, new FiberMeshPropsHandler()
, new FiberAbstractMeshPropsHandler()
, new FiberTransformNodePropsHandler()
, new FiberNodePropsHandler()
];
}

getPropsHandlers(): PropsHandler<FiberMeshProps>[] {
getPropsHandlers(): PropsHandler<FiberGroundMeshProps>[] {
return this.propsHandlers;
}

addPropsHandler(propHandler: PropsHandler<FiberMeshProps>): void {
addPropsHandler(propHandler: PropsHandler<FiberGroundMeshProps>): void {
this.propsHandlers.push(propHandler);
}

Expand Down
8 changes: 4 additions & 4 deletions src/generatedProps.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -319,17 +319,17 @@ declare global {
cylinder: FiberMeshProps & FiberCylinderPropsCtor & BabylonNode<BabylonjsCoreMesh>;
torus: FiberMeshProps & FiberTorusPropsCtor & BabylonNode<BabylonjsCoreMesh>;
torusKnot: FiberMeshProps & FiberTorusKnotPropsCtor & BabylonNode<BabylonjsCoreMesh>;
lineSystem: FiberMeshProps & FiberLineSystemPropsCtor & BabylonNode<BabylonjsCoreMesh>;
lines: FiberMeshProps & FiberLinesPropsCtor & BabylonNode<BabylonjsCoreMesh>;
dashedLines: FiberMeshProps & FiberDashedLinesPropsCtor & BabylonNode<BabylonjsCoreMesh>;
lineSystem: FiberLinesMeshProps & FiberLineSystemPropsCtor & BabylonNode<BabylonjsCoreLinesMesh>;
lines: FiberLinesMeshProps & FiberLinesPropsCtor & BabylonNode<BabylonjsCoreLinesMesh>;
dashedLines: FiberLinesMeshProps & FiberDashedLinesPropsCtor & BabylonNode<BabylonjsCoreLinesMesh>;
extrudeShape: FiberMeshProps & FiberExtrudeShapePropsCtor & BabylonNode<BabylonjsCoreMesh>;
extrudeShapeCustom: FiberMeshProps & FiberExtrudeShapeCustomPropsCtor & BabylonNode<BabylonjsCoreMesh>;
lathe: FiberMeshProps & FiberLathePropsCtor & BabylonNode<BabylonjsCoreMesh>;
tiledPlane: FiberMeshProps & FiberTiledPlanePropsCtor & BabylonNode<BabylonjsCoreMesh>;
plane: FiberMeshProps & FiberPlanePropsCtor & BabylonNode<BabylonjsCoreMesh>;
ground: FiberMeshProps & FiberGroundPropsCtor & BabylonNode<BabylonjsCoreMesh>;
tiledGround: FiberMeshProps & FiberTiledGroundPropsCtor & BabylonNode<BabylonjsCoreMesh>;
groundFromHeightMap: FiberMeshProps & FiberGroundFromHeightMapPropsCtor & BabylonNode<BabylonjsCoreMesh>;
groundFromHeightMap: FiberGroundMeshProps & FiberGroundFromHeightMapPropsCtor & BabylonNode<BabylonjsCoreGroundMesh>;
'babylon-polygon': FiberMeshProps & FiberPolygonPropsCtor & BabylonNode<BabylonjsCoreMesh>;
extrudePolygon: FiberMeshProps & FiberExtrudePolygonPropsCtor & BabylonNode<BabylonjsCoreMesh>;
tube: FiberMeshProps & FiberTubePropsCtor & BabylonNode<BabylonjsCoreMesh>;
Expand Down
97 changes: 72 additions & 25 deletions stories/babylonjs/Hooks/hooks.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,45 +15,92 @@ const ContextLogger = (props, context) => {
return null;
}

const RotatingBoxScene = (props) => {
const boxRef = useRef(null);
const size = 2;
const shade = 0;
const rpm = 10;

const RotatingBox = ({position}) => {
const centerTransform = useRef();
useBeforeRender((scene) => {
if (boxRef.current) {
var deltaTimeInMillis = scene.getEngine().getDeltaTime();

const rpm = props.rpm || 10;
boxRef.current.rotation.y += ((rpm / 60) * Math.PI * 2 * (deltaTimeInMillis / 1000));
if (centerTransform.current !== null) {
const deltaTimeInMillis = scene.getEngine().getDeltaTime();
centerTransform.current.rotation.y += ((rpm / 60) * Math.PI * 2 * (deltaTimeInMillis / 1000));
}
})

return (
<>
<freeCamera name='camera1' position={new Vector3(0, 5, -10)} setTarget={[Vector3.Zero()]} />
<hemisphericLight name='light1' intensity={0.7} direction={Vector3.Up()} />
<box ref={boxRef} name='box1' size={2} position={new Vector3(0, 1, 0)}>
<standardMaterial name='boxMat' diffuseColor={Color3.Red()} specularColor={Color3.Black()} />
</box>
<ground name='ground1' width={6} height={6} subdivisions={2} />
</>
)
return (<transformNode ref={centerTransform} position={position} name="transform-node">
<lines
name="red-line"
points={
[
new Vector3.Zero(),
new Vector3(size, 0, 0),
new Vector3(size * 0.95, 0.05 * size, 0),
new Vector3(size, 0, 0),
new Vector3(size * 0.95, -0.05 * size, 0)
]
}
color={new Color3(1, shade, shade)}
/>
<lines
name="green-line"
points={
[
new Vector3.Zero(),
new Vector3(0, size, 0),
new Vector3(-0.05 * size, size * 0.95, 0),
new Vector3(0, size, 0),
new Vector3(0.05 * size, size * 0.95, 0)
]
}
color={new Color3(shade, 1, shade)}
/>
<lines
name="blue-line"
points={
[
new Vector3.Zero(),
new Vector3(0, 0, size),
new Vector3(0, -0.05 * size, size * 0.95),
new Vector3(0, 0, size),
new Vector3(0, 0.05 * size, size * 0.95)
]
}
color={new Color3(shade, shade, 1)}
/>
<box
name="color-box"
faceColors={[
Color3.Blue(),
Color3.Red(),
Color3.Green(),
Color3.White(),
Color3.Yellow(),
Color3.Black()
]}
></box>
</transformNode>)
}

const RenderHooks = (props, context) => {
return (
const RotatingBoxScene = (props) => (
<>
<freeCamera name='camera1' position={new Vector3(0, 5, -10)} setTarget={[Vector3.Zero()]} />
<hemisphericLight name='light1' intensity={0.7} direction={Vector3.Up()} />
<RotatingBox position={new Vector3(1.5, 1.5, -3)} />
<RotatingBox position={new Vector3(-1.5, 1.5, -3)} />
<ground name='ground1' width={6} height={6} subdivisions={2} />
</>
)

export const RenderHooksStory = () => (
<div style={{ flex: 1, display: 'flex' }}>
<Engine antialias adaptToDeviceRatio canvasId='babylonJS' >
<ContextLogger id='engine' />
<Scene>
<ContextLogger id='scene' />
<RotatingBoxScene rpm={20} />
</Scene>
</Engine>
)
}

export const RenderHooksStory = () => (
<div style={{ flex: 1, display: 'flex' }}>
<RenderHooks x={5} />
</div>
)

Expand Down
4 changes: 2 additions & 2 deletions stories/babylonjs/PostProcess/pipeline.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@ export const Pipeline = () => (
<div style={{ flex: 1, display: 'flex' }}>
<Engine antialias adaptToDeviceRatio canvasId='babylonJS' >
<Scene>
<arcRotateCamera name='Camera1' radius={10} alpha={Math.PI / 2} beta={(Math.PI / 2)} target={Vector3.Zero()} />
<arcRotateCamera name='Camera1' radius={10} alpha={0.5 + Math.PI / 2} beta={-0.5 + (Math.PI / 2)} target={Vector3.Zero()} />
<hemisphericLight name='light' />
<box name='test' />
<defaultRenderingPipeline hdr chromaticAberrationEnabled grainEnabled>
<chromaticAberrationPostProcess assignFrom='chromaticAberration' aberrationAmount={-100} radialIntensity={0.2} />
<grainPostProcess assignFrom='grain' intensity={50} />
<grainPostProcess assignFrom='grain' intensity={20} />
</defaultRenderingPipeline>
</Scene>
</Engine>
Expand Down
75 changes: 3 additions & 72 deletions ...Textures/dynamic-configuration.stories.js → ...njs/Textures/pbr-configuration.stories.js
View file
Original file line number Diff line number Diff line change
@@ -1,77 +1,11 @@
import React, { useCallback, useState } from 'react';
import { Vector3, Color3, Texture } from '@babylonjs/core';

import { Engine, Scene, HostRegistrationStore, useScene, checkPrimitiveDiff } from 'react-babylonjs';
import { Engine, Scene, useScene } from 'react-babylonjs';

import '../../style.css';

export default { title: 'Textures' };

class PrimitivesPropsHandler {
IGNORED_PROPS = 'assignFrom'; // TODO: add other built-in like 'key', etc.

getPropertyUpdates(oldProps, newProps) {
var combined = Object.keys(oldProps).reduce((prev, cur) => {
if (this.IGNORED_PROPS.indexOf(cur) === -1) {
prev[cur] = {
old: oldProps[cur]
}
}
return prev;
}, {});

var combined = Object.keys(newProps).reduce((prev, cur) => {
if (this.IGNORED_PROPS.indexOf(cur) === -1) {
if (prev[cur] !== undefined) {
prev[cur].new = newProps[cur];
} else {
prev[cur] = {
new: newProps[cur]
}
}
}
return prev;
}, combined);

const changedProps = [];
for (var propName in combined) {
checkPrimitiveDiff(combined[propName].old, combined[propName].new, propName, changedProps);
};
return changedProps.length === 0 ? null : changedProps;
}
}

class FiberPBRClearCoatConfiguration {
constructor() {
this.propsHandlers = [
new PrimitivesPropsHandler()
];
}

getPropsHandlers() {
return this.propsHandlers;
}

addPropsHandler(propHandler) {
this.propsHandlers.push(propHandler);
}
}

HostRegistrationStore.Register({
hostElementName: "pbrClearCoatConfiguration",
hostFactory: (scene) => { console.error('registered host factory method not applicable for demo') },
propHandlerInstance: new FiberPBRClearCoatConfiguration(),
createInfo: {
"creationType": "...",
"libraryLocation": "...",
"namespace": "@babylonjs/materials/clearCoat",
"parameters": []
},
metadata: {
"className": "FiberPBRClearCoatConfiguration"
}
})

var cubeTexture = null;
var cubeTextureClone = null;
const onSceneMounted = (createdArgs) => {
Expand All @@ -84,14 +18,11 @@ const onSceneMounted = (createdArgs) => {
*/
const WithDynamicConfig = ({ roughness }) => {
let environmentUrl = 'assets/textures/environment.dds'
const scene = useScene();
const [texturesLoaded, setTexturesLoaded] = useState(false);

const cubeTextureRef = useCallback(node => {
if (node && texturesLoaded === false) {
scene.debugLayer.show();
setTexturesLoaded(true); // trigger render and props assignment
console.log('cubeTexture', node)
cubeTexture = node;

cubeTextureClone = cubeTexture.clone();
Expand Down Expand Up @@ -183,9 +114,9 @@ export const DynamicConfig = () => {
}

DynamicConfig.story = {
name: 'PBR ClearCoat (experiment)',
name: 'PBR set roughness',
parameters:
{
notes: 'Just an experiment - not fixed API.'
notes: 'Experimental API.'
}
}
Loading

0 comments on commit aca19d2

Please sign in to comment.