This might be an incredibly dumb question, but I am trying to use the FireProceduralTexture in the react-babylonjs system.
Any idea where I would get the fragment to feed directly into the component?
"<proceduralTexture size={256} fragment={} />"
The prodedural textures NPM hasn’t been integrated via code compiler generation (only GUI, core and Dynamic Terrain extension). I think that would be a good addition to include - feel free to create an issue in the repo. In the meantime, you can add it something like this:
import React, { useCallback } from 'react'
import { Engine, Scene } from '../../../dist/react-babylonjs'
import { Vector3, Space } from '@babylonjs/core/Maths/math'
import { FireProceduralTexture} from '@babylonjs/procedural-textures'
let scene = null;
const onSceneMounted = (sceneEventArgs) => {
scene = sceneEventArgs.scene;
}
/**
* Insipration Playground: https://www.babylonjs-playground.com/#KM3TC
*/
function WithFireProcedural() {
const ref = useCallback(node => {
const fireTexture = new FireProceduralTexture("fire", 256, scene);
const fireMaterial = node.hostInstance;
fireMaterial.diffuseTexture = fireTexture;
fireMaterial.opacityTexture = fireTexture;
}, []);
return (
<Engine antialias adaptToDeviceRatio canvasId='babylonJS'>
<Scene onSceneMount={onSceneMounted}>
<arcRotateCamera name='Camera' target={new Vector3(0, 0, 0)}
alpha={-2} beta={Math.PI / 2}
radius={12} minZ={0.001} wheelPrecision={50}
target={new Vector3(-5, 0,-10)}
/>
<hemisphericLight name="Light" direction={new Vector3(0, 10, 0)} />
<plane name='fireball' size={20}>
<standardMaterial ref={ref} name='fontainSculptur2'
rotate={[new Vector3(1.0, 1.0, 0.5), Math.PI / 3.0, Space.Local]}
/>
</plane>
</Scene>
</Engine>
)
}
I actually don’t know about the fragment property (is that the shader?) of procedural textures - haven’t dug into that.
2 Likes
It’s absolutely incredible that the two guys that wrote the library answered my message on here within the hour.
I really appreciate it, and it really should give everyone a lot of faith that BabylonJS really does have the better community amongst the web frameworks.
The code you posted worked perfectly.
I refactored things a bit to get rid of all the warnings. TYVM
import React, { useCallback } from 'react';
import "@babylonjs/core/Physics/physicsEngineComponent" // side-effect adds scene.enablePhysics function
import { Vector3, PhysicsImpostor, Mesh, Color3, Nullable, FresnelParameters } from '@babylonjs/core';
import { CannonJSPlugin } from '@babylonjs/core/Physics/Plugins'
import {Scene, Engine, SceneEventArgs} from 'react-babylonjs';
import { Scene as SceneCore } from "@babylonjs/core/scene";
import * as CANNON from 'cannon';
import { FireProceduralTexture } from '@babylonjs/procedural-textures';
window.CANNON = CANNON;
const gravityVector = new Vector3(0, -9.81, 0);
let sphere: Nullable<Mesh> = null;
const onButtonClicked = () => {
if (sphere !== null) {
sphere.physicsImpostor!.applyImpulse(Vector3.Up().scale(10), sphere.getAbsolutePosition())
}
};
let scene: SceneCore;
const onSceneMounted = (sceneEventArgs: SceneEventArgs) => {
scene = sceneEventArgs.scene;
};
const DefaultPlayground = () => {
let sunnyDayRootUrl = 'assets/textures/TropicalSunnyDay';
const ref = useCallback(node => {
const fireTexture = new FireProceduralTexture("fire", 256, scene);
const fireMaterial = node.hostInstance;
fireMaterial.diffuseTexture = fireTexture;
fireMaterial.opacityTexture = fireTexture;
}, []);
const sphereRef = useCallback(node => {
sphere = node.hostInstance;
}, []);
return (
<Engine antialias = {true} adaptToDeviceRatio = {true} canvasId = "sample-canvas" >
<Scene onSceneMount={onSceneMounted} enablePhysics = {[gravityVector, new CannonJSPlugin()]} >
<arcRotateCamera name = "arc" target = {new Vector3(0, 1, 0)}
alpha = {-Math.PI / 2} beta = {(0.5 + (Math.PI / 4))}
radius = {10} minZ = {0.001} wheelPrecision = {50}
/>
<hemisphericLight name = "hemi" direction = {new Vector3(0, -1, 0)} intensity = {0.8} />
<directionalLight name = "shadow-light" setDirectionToTarget = {[Vector3.Zero()]}
direction = {Vector3.Zero()} position = {new Vector3(-40, 30, -40)}
intensity = {0.4} shadowMinZ = {1} shadowMaxZ = {2500} >
<shadowGenerator mapSize = {1024} useBlurExponentialShadowMap = {true} blurKernel = {32}
shadowCasters = {["sphere1", "dialog"]} forceBackFacesOnly = {true}
depthScale = {100}
/>
</directionalLight >
<sphere ref = {sphereRef} name = "sphere1" diameter = {2} segments = {16}
position = {new Vector3(0, 2.5, 0)} >
<standardMaterial name='material5' specularPower={64}
diffuseColor={Color3.Black()}
emissiveColor={new Color3(0.2, 0.2, 0.2)}
emissiveFresnelParameters={FresnelParameters.Parse({
isEnabled: true,
leftColor: [1, 1, 1],
rightColor: [0, 0, 0],
bias: 0.4,
power: 2
})}
>
<cubeTexture level={0.5} assignTo="reflectionTexture" rootUrl={sunnyDayRootUrl} />
</standardMaterial>
<physicsImpostor type = {PhysicsImpostor.SphereImpostor} _options = {{
mass: 1,
restitution: 0.9
}} />
<plane name = "dialog" size = {2} position = {new Vector3(0, 1.5, 0)} >
<advancedDynamicTexture name = "dialogTexture" height = {1024} width = {1024}
createForParentMesh = {true} hasAlpha = {true} >
<rectangle name = "rect-1" height = {0.5} width = {1} thickness = {12} cornerRadius = {12} >
<rectangle >
<babylon-button name = "close-icon" background = "green"
onPointerDownObservable = {onButtonClicked} >
<textBlock text = {'\uf00d click me'}
fontStyle = "bold" fontSize = {200} color = "white" />
</babylon-button >
</rectangle >
</rectangle >
</advancedDynamicTexture >
</plane >
</sphere >
<hemisphericLight name="Light" direction={new Vector3(0, 10, 0)} />
<ground name = "ground1" width = {10} height = {10} subdivisions = {2} receiveShadows = {true} >
<physicsImpostor type = {PhysicsImpostor.BoxImpostor} _options = {{
mass: 0,
restitution: 0.9
}} />
<standardMaterial ref={ref} name='fontainSculptur2' />
</ground >
</Scene >
</Engine >
)
};
export default DefaultPlayground
3 Likes
Looks great @JRuiseco Fresnel Bouncing on Fire! If you are on the 4.2 alphas, the FresnelParameters now has an options constructor, so you can go:
emissiveFresnelParameters={new FresnelParameters({bias: 0.4, power: 2})}. 
1 Like