How to enable WebGPU in React babylonJs

Questions
1

I create a react babylon appliaction but its performance is low .How can i enable WebGPU in this project and how to implement it on that . can you provide a solution for that?

2

can you share more details in how you integrated react?

3 
import { Color3, Vector3 } from '@babylonjs/core/Maths/math'

import React from 'react'

import { Engine, Scene } from 'react-babylonjs'


const ThemeContext = React.createContext({

  color: Color3.Red(),

  position: Vector3.Zero(),

  name: 'default context',

})


const ThemedBox = () => {

  const ctx = React.useContext(ThemeContext)

  return (

    <box name={ctx.name} position={ctx.position}>

      <standardMaterial

        name="mat"

        diffuseColor={ctx.color}

        specularColor={Color3.Black()}

      />

    </box>

  )

}


const EngineScene = () => (

  <div style={{ flex: 1, display: 'flex', maxWidth: '80%' }}>

    <ThemeContext.Consumer>

      {(value) => (

        <Engine antialias adaptToDeviceRatio canvasId="babylon-js">

          <Scene>

            <ThemeContext.Provider value={value}>

              <arcRotateCamera

                name="arc"

                target={Vector3.Zero()}

                minZ={0.001}

                alpha={-Math.PI / 4}

                beta={Math.PI / 4}

                radius={5}

              />

              <hemisphericLight

                name="light1"

                intensity={0.7}

                direction={Vector3.Up()}

              />

              <ground name="ground1" width={6} height={6} subdivisions={2} />

              <ThemedBox />

            </ThemeContext.Provider>

          </Scene>

        </Engine>

      )}

    </ThemeContext.Consumer>

  </div>

)


const BridgedContext = () => (

  <ThemeContext.Provider

    value={{

      color: Color3.FromHexString('#FFAF00'),

      position: new Vector3(0, 1, 0),

      name: 'testing',

    }}

  >

    <EngineScene />

  </ThemeContext.Provider>

)


export default BridgedContext

in this code how we can implement WebGPU?
can you provide a steps

4

You should create a webgpu engine and your project should be open in chrome canary,

5

react-babylonjs will require an update to support Web GPU. I was just checking if you were using another library or rolled your own implementation.

It should maybe be a top level component like <WebGpuEngine .. /> as opposed to props on <Engine ... />. I’m really short on time lately - the quick answer is that it’s not currently available. I suppose a quick way is to add a callback prop like:
createEngine?: (canvas: HTMLCanvasElement) => Engine

code change is here for the callback:
react-babylonjs/Engine.tsx at master · brianzinn/react-babylonjs (github.com)

let me know what you think of above options.

1 Like
6 
import { Color3, Vector3 } from '@babylonjs/core/Maths/math'
import { WebGPUEngine } from '@babylonjs/core/Engines/webgpuEngine'
import React from 'react'
import { Scene } from 'react-babylonjs'

const engine = new WebGPUEngine();

const ThemeContext = React.createContext({
  color: Color3.Red(),
  position: Vector3.Zero(),
  name: 'default context',
})

const ThemedBox = () => {
  const ctx = React.useContext(ThemeContext)
  return (
    <box name={ctx.name} position={ctx.position}>
      <standardMaterial
        name="mat"
        diffuseColor={ctx.color}
        specularColor={Color3.Black()}
      />
    </box>
  )
}

const EngineScene = () => (
  <div style={{ flex: 1, display: 'flex', maxWidth: '80%' }}>
    <ThemeContext.Consumer>
      {(value) => (
        <WebGPUEngine antialias adaptToDeviceRatio canvasId="babylon-js">
          <Scene>
            <ThemeContext.Provider value={value}>
              <arcRotateCamera
                name="arc"
                target={Vector3.Zero()}
                minZ={0.001}
                alpha={-Math.PI / 4}
                beta={Math.PI / 4}
                radius={5}
              />
              <hemisphericLight
                name="light1"
                intensity={0.7}
                direction={Vector3.Up()}
              />
              <ground name="ground1" width={6} height={6} subdivisions={2} />
              <ThemedBox />
            </ThemeContext.Provider>
          </Scene>
        </WebGPUEngine>
      )}
    </ThemeContext.Consumer>
  </div>
)

const BridgedContexts = () => (
  <ThemeContext.Provider
    value={{
      color: Color3.FromHexString('#FFAF00'),
      position: new Vector3(0, 1, 0),
      name: 'testing',
    }}
  >
    <EngineScene />
  </ThemeContext.Provider>
)

export default BridgedContexts

I add but in out put it show like this:

image
image1989×920 73.3 KB

7

Do you live service in IDE like vsCode? If you use nginx to live service, you must use https

8

It should work if you pass the canvas to the WebGPUEngine constructor.

9

I think something more important to consider than just enabling WebGPU and hoping it will solve all of your problems, it’s to properly optimize your scene before. There are a lot of optimization options Optimizing Your Scene | Babylon.js Documentation (babylonjs.com) and Performance mode Optimizing Your Scene | Babylon.js Documentation (babylonjs.com) that can be considered even before WebGPU.

2 Likes
10

That’s because there’s no such component, unless you made one.

Edit: just read-read your import statement. You cannot use @BabylonJS/core imports as react components.