WebGL builds have missing and misdrawn lines on Chrome and Edge

Avatar
  • updated

Image 287

The top image is from Chrome. Edge appears the same way.

The bottom image is how it should look, and how it looks in Firefox and Opera.

There are several connected Polylines working fine in both builds, as shown by the teal object. The missing objects are single Lines using Noots, just like the teal polyline.

Any idea on what I can change?  I'm using the built in render pipeline. 

Reporting a bug? please specify Unity version:
2019.4.14
Reporting a bug? please specify Shapes version:
3.0.0
Reporting a bug? please specify Render Pipeline:
Built-in render pipeline
Avatar
Freya Holmér creator

does this happen even if you include all instancing variants in graphics settings?

Avatar
Koalefant

I had briefly updated to 3.0.0, but had to downgrade as my lines were missing in WebGL build on Chrome and Firefox as well.

(Corrected, was mentioning polylines instead of lines by mistake)

Avatar
Freya Holmér creator
Quote from Koalefant

I had briefly updated to 3.0.0, but had to downgrade as my lines were missing in WebGL build on Chrome and Firefox as well.

(Corrected, was mentioning polylines instead of lines by mistake)

did you try including all instancing shader variants like I mentioned above?

Avatar
hayden scott-baron
Quote from Freya Holmér

does this happen even if you include all instancing variants in graphics settings?

I changed this to 'Keep All' and the results were the same. 

Avatar
Freya Holmér creator

any build or compiler errors anywhere?

Avatar
hayden scott-baron

No build errors.

I tried it with different scaling and rendering methods, and only Volume3D worked reliably on Chrome.

Thankfully Polyline works fine for me, this is just a problem with 'Line', so I have decided to substitute all Lines for two point polylines for now. It mostly means I can't use the dashed lines that I was planning to.

Avatar
Freya Holmér creator

if you're drawing this in immediate mode - try disabling GPU instancing in the Shapes settings window

otherwise I worry that this is a unity specific issue, as I have no web GL specific code, all of this should be handled on Unity's end. The one thing I can think of is if GPU instancing is, for whatever reason, not supported on the platforms it didn't work on for you, but Unity's own instancing page says it does have WebGL support, and it always seemed to work on my end

Avatar
Freya Holmér creator

Looks like you need support for WebGL 2.0, you can output SystemInfo.graphicsDeviceType in your build to see which one you're currently

Unity's docs:
You can use SystemInfo.graphicsDeviceType at run time to determine whether the Unity instance is rendering with OpenGLES3 (WebGL2.0) or OpenGLES2 (WebGL1.0).

Avatar
Koalefant

Lines starts to render on both Chrome and Firefox for me with useImmediateModeInstancing: 0 in Shapes Config.asset (without shader preloading, WebGL 2.0 according to Unity log in DevTools/Console).

Avatar
Freya Holmér creator
Quote from Koalefant

Lines starts to render on both Chrome and Firefox for me with useImmediateModeInstancing: 0 in Shapes Config.asset (without shader preloading, WebGL 2.0 according to Unity log in DevTools/Console).

does enabling all instancing variants in Unity's graphics settings make the immediate mode instancing work in builds? also could you check if it's on GLES3 or GLES2 with the code above?

Avatar
Koalefant
Quote from Freya Holmér

does enabling all instancing variants in Unity's graphics settings make the immediate mode instancing work in builds? also could you check if it's on GLES3 or GLES2 with the code above?

It is WebGL 2.0/GLES3 according to the log in DevTools/Console.

Avatar
Freya Holmér creator
Quote from Koalefant

It is WebGL 2.0/GLES3 according to the log in DevTools/Console.

and does forcing instancing variants to be included in builds in Unity's graphics settings make instancing work?

Avatar
Koalefant
Quote from Freya Holmér

and does forcing instancing variants to be included in builds in Unity's graphics settings make instancing work?

Just tried combination of useImmediateModeInstancing: 1, preloading shaders and "Instance Variants: Keep All" and lines are broken again.


One little detail: first rendered line is being rendered most of the time, while subsequent lines are missing. This is consistent with previous broken attempts.

Avatar
Freya Holmér creator
Quote from Koalefant

Just tried combination of useImmediateModeInstancing: 1, preloading shaders and "Instance Variants: Keep All" and lines are broken again.


One little detail: first rendered line is being rendered most of the time, while subsequent lines are missing. This is consistent with previous broken attempts.

that last detail sounds exactly like the behavior when the instancing variants are not included, hm :c

there are a few bugs around rendering in immediate mode that might cause this, hopefully it'll be fixed with the next update. If not, we'll have to continue debugging this, because I have no idea why this might happen apart from Unity bugs

Avatar
Jose Javier Palacio
Quote from Freya Holmér

if you're drawing this in immediate mode - try disabling GPU instancing in the Shapes settings window

otherwise I worry that this is a unity specific issue, as I have no web GL specific code, all of this should be handled on Unity's end. The one thing I can think of is if GPU instancing is, for whatever reason, not supported on the platforms it didn't work on for you, but Unity's own instancing page says it does have WebGL support, and it always seemed to work on my end

I was facing the same issue and this option did it for me :)

Avatar
fanyaoyi

I have the same issue: shapes only appear in the WebGL build if GPU instancing is off. The thing is that GPU instancing has much higher performance than without. I will look for solutions and share them if I find any.
I will try and let you know

Avatar
fanyaoyi

Sorry for being a bad student: I had not seen the mega-thread on this topic earlier: 
I was able to solve my issue by following the instructions in that thread and by also setting the Shader Precision Model to  Full precision as in the image attached:

I am building for WebGL using unity 2021.1.17. Hope this can be helpful to anyone. Thanks again for this incredible work.