WGLMakie in Pluto displays an error and fails to draw a grid or spines

[contradict]

• what version of Makie are you running? (]st -m Makie)
  WGLMakie v0.10.15
  Bonito v3.1.2
  Pluto v0.19.45
• can you reproduce the bug with a fresh environment ? (]activate --temp; add Makie)
  Pluto notebook here
• What platform + GPU are you on?
  Linux 64-bit Intel, Firefox 129.0, NVIDIA GTX 680

The figure displayed looks like this

And the error displayed inline is

Error in Javascript: THREE.WebGLProgram: Shader Error No error - VALIDATE_STATUS false

Program Info Log:
Statically used varyings do not fit within packing limits. (see GLSL ES Specification 1.0.17, p111)


Fragment log:
Vertex log:

)

Error in Javascript: THREE.WebGLProgram: Shader Error Invalid operation - VALIDATE_STATUS false

Program Info Log:
Statically used varyings do not fit within packing limits. (see GLSL ES Specification 1.0.17, p111)


Fragment log:
Vertex log:

)

error while processing received msg

exception

Three object should be ready after init, but isn't - connection interrupted? Session: Session{Bonito.SubConnection}:

id: e2f269d2-ad82-4370-bd28-b327fcde406e

parent: Bonito.Session{Bonito.PlutoConnection}

connection: open

isready: true

asset_server: Bonito.NoServer

queued messages: 0

, initialized: false
Stack trace

Here is what happened, the most recent locations are first:

    error(s::String) @ [error.jl:35](https://github.com/JuliaLang/julia/tree/34c3a63147b99eedd13911ac082df485e64f0019/base/error.jl#L35)
    (::WGLMakie.var"#1#2"{WGLMakie.Screen, Bonito.Session{Bonito.SubConnection}, Makie.Scene})(initialized::Bool) @ display.jl:83
    #invokelatest#2 @ essentials.jl:1043
    invokelatest @ essentials.jl:1040
    update_nocycle!(obs::Observables.Observable{Bool}, value::Any) @ observables.jl:31
    #invokelatest#2 @ essentials.jl:1043
    invokelatest @ essentials.jl:1040
    process_message(session::Bonito.Session{Bonito.PlutoConnection}, bytes::Vector{UInt8}) @ protocol.jl:36
    run_connection_loop(server::Bonito.HTTPServer.Server, session::Bonito.Session{Bonito.PlutoConnection}, connection::Bonito.WebSocketConnection) @ websocket.jl:100
    (::Bonito.WebSocketConnection)(context::@NamedTuple{routes::Bonito.HTTPServer.Routes, application::Bonito.HTTPServer.Server, request::HTTP.Messages.Request, match::String}, websocket::HTTP.WebSockets.WebSocket) @ websocket.jl:135
    apply_handler(::Bonito.WebSocketConnection, ::@NamedTuple{routes::Bonito.HTTPServer.Routes, application::Bonito.HTTPServer.Server, request::HTTP.Messages.Request, match::String}, ::HTTP.WebSockets.WebSocket) @ implementation.jl:83
    delegate(routes::Bonito.HTTPServer.Routes, application::Bonito.HTTPServer.Server, request::HTTP.Messages.Request, args::HTTP.WebSockets.WebSocket) @ implementation.jl:102
    #17 @ implementation.jl:156
    upgrade(f::Bonito.HTTPServer.var"#17#19"{Bonito.HTTPServer.Server, HTTP.Streams.Stream{HTTP.Messages.Request, HTTP.Connections.Connection{Sockets.TCPSocket}}}, http::HTTP.Streams.Stream{HTTP.Messages.Request, HTTP.Connections.Connection{Sockets.TCPSocket}}; suppress_close_error::Bool, maxframesize::Int64, maxfragmentation::Int64, nagle::Bool, quickack::Bool, kw::@Kwargs{binary::Bool}) @ WebSockets.jl:456
    upgrade @ WebSockets.jl:425
    stream_handler(application::Bonito.HTTPServer.Server, stream::HTTP.Streams.Stream{HTTP.Messages.Request, HTTP.Connections.Connection{Sockets.TCPSocket}}) @ implementation.jl:155
    #invokelatest#2 @ essentials.jl:1043
    invokelatest @ essentials.jl:1040
    (::Bonito.HTTPServer.var"#27#29"{Bonito.HTTPServer.Server})(stream::HTTP.Streams.Stream{HTTP.Messages.Request, HTTP.Connections.Connection{Sockets.TCPSocket}}) @ implementation.jl:287
    #invokelatest#2 @ essentials.jl:1043
    invokelatest @ essentials.jl:1040
    handle_connection(f::Function, c::HTTP.Connections.Connection{Sockets.TCPSocket}, listener::HTTP.Servers.Listener{Nothing, Sockets.TCPServer}, readtimeout::Int64, access_log::Nothing) @ Servers.jl:469
    (::HTTP.Servers.var"#16#17"{Bonito.HTTPServer.var"#27#29"{Bonito.HTTPServer.Server}, HTTP.Servers.Listener{Nothing, Sockets.TCPServer}, Set{HTTP.Connections.Connection}, Int64, Nothing, ReentrantLock, Base.Semaphore, HTTP.Connections.Connection{Sockets.TCPSocket}})() @ Servers.jl:401

[SimonDanisch]

Hm, that means we're using too many varyings.
@ffreyer you run into this before right but fixed it by using less varyings?

@contradict, since it runs fine on my PC, it may be that you can fix this by upgrading your graphics driver - since it seems for a modern driver/gpu we certainly don't use too many varyings.

[ffreyer]

Yes... I'm not sure if it was vertex shader inputs or fragment shader inputs that were the problem. I think c11b3d3 reduced vertex shader inputs, and one of the todos in #3558 eludes to fragment shader inputs being the problem.
At this point the fragment shader inputs are less than what mesh.frag has, so I'd assume they aren't the issue here (though there are a lot of non varying ones...). We may still get tighter packing by merging a vec3 with a float though, because afaik a vec3 takes a vec4 worth of space. For vertex shader inputs we'd need to optimize the interleaved buffer code.

[contradict]

This seems to be the problem, I tried on a newer computer and it works fine. The GTX680 is a 12 year old GPU (I have pinned the driver at the last version that supports this card), so it might just be time to upgrade! Thanks for taking a look.