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 ?

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
8

The texture Canvas is not working with the Babylon 6. Is it possible to fix it for the latest version?

9

do you have a repro PG?

10

Here it is: https://www.babylonjs-playground.com/#DK424Y#14

11

Is it working on your browser?

12

No and it doesn’t work with Babylon 5 or 6

13

@kaliatech I wonder if you could have a look ?

14

@mathus1 - This was an old post discussing an even older 3rd party library. The library was written for Babylon 4.x and was never updated to support Babylon 5.x or 6.x.

My suggestion above was to consider using DynamicTexture instead. @reb-ic later posted that he was able to write his code using DynamicTexture for a similar effect. He didn’t post his code though.

I have created a playground example that mostly replicates the old library’s demo:

This works with Babylon 4, 5, and 6. Hope it helps. If you have any questions, I recommend you start a new post.

4 Likes