Texture Canvas does not work with Babylon 5

Bugs
#1

Hi,
I tried to use the texture canvas with Babylon 5 and it doesn’t work but it doesn’t log any errors.
The same problem occurs in the documentation playgrounds:

#2

cc @Cedric to see if he can have a look

#3

I’m taking a look.

1 Like
#4

I get an error log when running locally:

E:\dev\babylon\BJSLightGizmo\packages\dev\core\src\Engines\thinEngine.ts:981 Babylon.js v5.2.0 - WebGL2 - Parallel shader compilation
textureCanvasNoModule.js:89 
        
       Uncaught TypeError: Class constructor Vector3 cannot be invoked without 'new'
    at new Vector3Matrix (textureCanvasNoModule.js:89:28)
    at new TextureCanvasDrawContext (textureCanvasNoModule.js:138:25)
    at textureCanvasNoModule.js:312:61
    at textureCanvasNoModule.js:314:2
Vector3Matrix @ textureCanvasNoModule.js:89
TextureCanvasDrawContext @ textureCanvasNoModule.js:138
(anonymous) @ textureCanvasNoModule.js:312
(anonymous) @ textureCanvasNoModule.js:314
textureCanvasNoModule.js:89 
        
       Uncaught TypeError: Class constructor Vector3 cannot be invoked without 'new'
    at new Vector3Matrix (textureCanvasNoModule.js:89:28)
    at new TextureCanvasDrawContext (VM6478 textureCanvasNoModule.js:138:25)
    at new TextureCanvas (VM6478 textureCanvasNoModule.js:322:37)
    at <anonymous>:27:22
    at HTMLScriptElement.LoadScript.script.onload (E:\dev\babylon\BJSLightGizmo\packages\dev\core\src\Misc\tools.ts:448:1)
Vector3Matrix @ textureCanvasNoModule.js:89
TextureCanvasDrawContext @ VM6478 textureCanvasNoModule.js:138
TextureCanvas @ VM6478 textureCanvasNoModule.js:322
(anonymous) @ VM6481:27
LoadScript.script.onload @ E:\dev\babylon\BJSLightGizmo\packages\dev\core\src\Misc\tools.ts:448
load (async)
LoadScript @ E:\dev\babylon\BJSLightGizmo\packages\dev\core\src\Misc\tools.ts:446
createScene @ VM6481:26
window.initFunction @ VM6481:49
await in window.initFunction (async)
_compileAndRunAsync @ E:\dev\babylon\BJSLightGizmo\packages\tools\playground\src\components\rendererComponent.tsx:309
await in _compileAndRunAsync (async)
eval @ E:\dev\babylon\BJSLightGizmo\packages\tools\playground\src\components\rendererComponent.tsx:40
notifyObservers @ E:\dev\babylon\BJSLightGizmo\packages\dev\core\src\Misc\observable.ts:364
onPlay @ E:\dev\babylon\BJSLightGizmo\packages\tools\playground\src\components\commandBarComponent.tsx:38
onClick @ E:\dev\babylon\BJSLightGizmo\packages\tools\playground\src\components\commandBarComponent.tsx:131
callCallback @ E:\dev\babylon\BJSLightGizmo\node_modules\react-dom\cjs\react-dom.development.js:3945
invokeGuardedCallbackDev @ E:\dev\babylon\BJSLightGizmo\node_modules\react-dom\cjs\react-dom.development.js:3994
invokeGuardedCallback @ E:\dev\babylon\BJSLightGizmo\node_modules\react-dom\cjs\react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError @ E:\dev\babylon\BJSLightGizmo\node_modules\react-dom\cjs\react-dom.development.js:4070
executeDispatch @ E:\dev\babylon\BJSLightGizmo\node_modules\react-dom\cjs\react-dom.development.js:8243
processDispatchQueueItemsInOrder @ E:\dev\babylon\BJSLightGizmo\node_modules\react-dom\cjs\react-dom.development.js:8275
processDispatchQueue @ E:\dev\babylon\BJSLightGizmo\node_modules\react-dom\cjs\react-dom.development.js:8288
dispatchEventsForPlugins @ E:\dev\babylon\BJSLightGizmo\node_modules\react-dom\cjs\react-dom.development.js:8299
eval @ E:\dev\babylon\BJSLightGizmo\node_modules\react-dom\cjs\react-dom.development.js:8508
batchedEventUpdates$1 @ E:\dev\babylon\BJSLightGizmo\node_modules\react-dom\cjs\react-dom.development.js:22396
batchedEventUpdates @ E:\dev\babylon\BJSLightGizmo\node_modules\react-dom\cjs\react-dom.development.js:3745
dispatchEventForPluginEventSystem @ E:\dev\babylon\BJSLightGizmo\node_modules\react-dom\cjs\react-dom.development.js:8507
attemptToDispatchEvent @ E:\dev\babylon\BJSLightGizmo\node_modules\react-dom\cjs\react-dom.development.js:6005
dispatchEvent @ E:\dev\babylon\BJSLightGizmo\node_modules\react-dom\cjs\react-dom.development.js:5924
unstable_runWithPriority @ E:\dev\babylon\BJSLightGizmo\node_modules\scheduler\cjs\scheduler.development.js:468
runWithPriority$1 @ E:\dev\babylon\BJSLightGizmo\node_modules\react-dom\cjs\react-dom.development.js:11276
discreteUpdates$1 @ E:\dev\babylon\BJSLightGizmo\node_modules\react-dom\cjs\react-dom.development.js:22413
discreteUpdates @ E:\dev\babylon\BJSLightGizmo\node_modules\react-dom\cjs\react-dom.development.js:3756
dispatchDiscreteEvent @ E:\dev\babylon\BJSLightGizmo\node_modules\react-dom\cjs\react-dom.development.js:5889

And the same error with

var TextureCanvas = /** @class */ (function (_super) {
    __extends(TextureCanvas, _super);
    function TextureCanvas(size, scene, initTexture, onReady, options, name) {
        if (options === void 0) { options = {}; }
        var _this = _super.call(this, null, scene, !options.generateMipMaps, false, options.samplingMode) || this;

I don’t know how to fix these errors. Any pointer @DarraghBurke @bghgary ?

TextureCanvas: A texture for drawing textures onto
#5

(@Cedric - I think your errors are due to how you are building/importing.)

I looked at this a little out of curiosity. The way this library tries to load and enable the shader code isn’t documented afaict. I am assuming things have changed in that regard from BJS v4 to v5.

I hacked a few things and was able to get it to work some of the time. It shows the drawn texture maybe 2 out of 3 times when refreshing the browser. So, I’m guessing remaining issue is something timing related. Changes made:

  • Move shader code to files to allow to be loaded externally with _createEffect.
  • Use InternalTexture, not RenderTargetTexture
  • Manually call the internal _prepareEffect

You can see the changes in this commit:

I’m not familiar with what all of this is doing. I think the call to prepareEffect probably needs to be handle some other way.

I don’t even fully understand the purpose of this library. Is it used for historical reasons? At first glance, seems like similar things be easily done using a DynamicTexture#images.

Anyways, maybe this will help others looking in to this.

#6

Let’s ping @Gijs to see if he can update his repo.

#7

Hi,
i have rewrite the code with the DynamicTexture and now all works.
Thanks for your help

1 Like