Babylon React Native Compute Shaders

screensailor · January 22, 2023, 1:41pm

I am very much looking forward to compute shaders in React Native apps. The current version of Babylon React Native is still using WebGL, which means that it is not yet possible to use this package to run compute shaders. I was wondering if anyone knows if this is on the roadmap?

carolhmj · January 23, 2023, 11:30am

cc @bghgary

bghgary · January 23, 2023, 4:21pm

Babylon React Native does not use WebGL underneath. It is however using GLSL. The compute extension for WebGL2 has been halted in favor of WebGPU. Given that, the best way to get compute shader support in Babylon (React) Native would be to support WebGPU way of doing compute shaders. I unfortunately don’t know how that works. @Evgeni_Popov Any thoughts?

Evgeni_Popov · January 23, 2023, 5:02pm

Support for compute shaders in WebGPU is done using WGSL:

I’m not sure WGSL could be translated to some other languages on native side(?)

We could use some other languages than WGSL, though, with minor changes to Compute/computeShader and Compute/computeEffect (ComputeEffect assumes the language is WGSL).

Then, a number of methods have to be implemented by the engine:

github.com

BabylonJS/Babylon.js/blob/master/packages/dev/core/src/Engines/Extensions/engine.computeShader.ts

/* eslint-disable @typescript-eslint/no-unused-vars */
import type { ComputeEffect, IComputeEffectCreationOptions } from "../../Compute/computeEffect";
import type { IComputeContext } from "../../Compute/IComputeContext";
import type { IComputePipelineContext } from "../../Compute/IComputePipelineContext";
import { ThinEngine } from "../../Engines/thinEngine";
import type { Nullable } from "../../types";

/**
 * Type used to locate a resource in a compute shader.
 * TODO: remove this when browsers support reflection for wgsl shaders
 */
export type ComputeBindingLocation = { group: number; binding: number };

/**
 * Type used to lookup a resource and retrieve its binding location
 * TODO: remove this when browsers support reflection for wgsl shaders
 */
export type ComputeBindingMapping = { [key: string]: ComputeBindingLocation };

/** @internal */

This file has been truncated. show original

The modeling was done on the basis of WebGPU, maybe it will need some adjustments if compute shaders work differently in other environments.

sebavan · January 23, 2023, 5:31pm

I guess you would need tint to convert to your native platform of choice.

bghgary · January 23, 2023, 9:02pm

To answer this question explicitly, no, this is not on the roadmap at the moment. WebGPU is still relatively new and getting compute shaders working in native will take some work. Feel free to file a feature request in the BabylonNative repo in case others are interested.

Topic		Replies	Views
How to enable WebGPU in React babylonJs Questions	9	1240	February 15, 2023
WebGPU compute shader babylon.js vs plain js speed comparison Questions	3	80	April 8, 2024
Is babylon automatically compatible with webgl and webgpu? Questions webgpu	2	582	April 17, 2023
Run babylon.js using GPU in nodejs? Questions	7	1354	May 11, 2020
WebGPU and shaderc.wasm Questions	2	577	February 16, 2020

Babylon React Native Compute Shaders

Related Topics