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:
I’m taking a look.
1 Like
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 ?
(@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.