Debugging Webviews

[oskarsh]

Hey I am trying to implement the three-js example in my own project. I just copied the three-js folder into my Images folder and reference the index.html like in the example.

However I am not getting the three renderer to show up. When opening the index.html in the browser I can see some errors related to CORS and no renderer is showing up either.

What I've tried:

• Webview is big enough in size so it should not crop
• I can render basic HTML and the CSS
• enabled OpenGL in the HISE settings and restarted
• disabled cache and persistence
• using zoom factor is also true. tried different zoom sizes as well

Is there a way I can debug this inside HISE? Any ideas why the three-js render might now show up?

thanks in advance

[Christoph Hart]

When opening the index.html in the browser I can see some errors related to CORS and no renderer is showing up either.

This is because you need to run a local server for the example. I'm using Visual Studio Code with the server plugin (spawns a local host and runs the index.html).

You can run the browser debugger in the webview (right click - inspect element or whatever it's called), this might give you some more information.

[oskarsh]

@Christoph-Hart ah I see makes sense now! So you basically serve the three js module with a local server and then cache the result. The cached result can than be served with the binary.

I feel like installing a local server on the client is not the best approach.

[Christoph Hart]

@oskarsh no you misunderstood me. The local server thing is just to get the example running outside of HISE, but the webview should handle it.

What OS are you testing?

[oskarsh]

@Christoph-Hart I am testing this on MacOS.

I spinned up a liveserver and the error was getX not defined. getX is inside the three-js module however. I managed to get it also running in HISE after I commented out the getX statement in the animate() function.

Not sure if there is a three.js version mismatch.

[Christoph Hart]

getX() is supposed to call a function that was defined in HiseScript:

wv.bindCallback("getX", function(args)
{
	return Knob1.getValue() * 0.05;
});

So it's no wonder why it doesn't work in the browser, however it's weird that it doesn't work on your end in HISE. What macOS version are you running (somebody mentioned a few issues with < Mojave so that might be it)?

[oskarsh]

@Christoph-Hart I am running latest ventura.

I have not used the GetX in HISE so that probably was the problem in the end. I think to make sure all parameters are there you can throw a error if one of the mandatory parameters or values are not met.

[Christoph Hart]

I think to make sure all parameters are there you can throw a error if one of the mandatory parameters or values are not met.

The web debugger should do this for us (the Console should print out getX not defined) and there's no point duplicating this function as I would need to scan the entire JS code of the web content to search whether a function is called or not).