[draft] refactor: remove webgl1 in favor of webgl2 #5165
Conversation
| const gl = | ||
| this._canvas.getContext('webgl2', attributes) as WebGL2RenderingContext || | ||
| this._canvas.getContext('webgl', attributes) as WebGLRenderingContext; | ||
| const gl = this._canvas.getContext('webgl2', attributes) as WebGL2RenderingContext; |
There was a problem hiding this comment.
This works just fine in browser but we need to also upgrade test infrastructure to WebGL2 supported headless canvas.
Currently, vitest-webgl-canvas-mock package does not come with WebGL2 support out of the box.
It's also somewhat old (last update ~2 years, ~4-5k weekly downloads).
We might consider vitest-canvas-mock as a replacement but I haven't tested whether or not it supports WebGL2 capable headless canvas.
We might also consider skia-canvas as a cairo replacement as a backend but for now, I'm just skipping these topics to isolate and focus on WebGL1 -> WebGL2 transition.
There was a problem hiding this comment.
The only tests that should be using a real canvas are render tests, and they are running in the browser.
The units are basically using mocks in order to run without failing, they don't use the canvas API to draw, so the unit tests should not care about the webgl2 change.
| attribute vec2 a_pos; | ||
| in vec2 a_pos; |
There was a problem hiding this comment.
Syntax changes like these should've been made in the original shader code in the first place.
Simply put, they should've been written in WebGL2 syntax and rely on WebGL1 Compact translation code.
If you were to try to run maplibre-gl-js exclusively targeting WebGL2, you'd bump into issues with these shaders written in WebGL1 syntax.
(Maybe we never actually had WebGL2 exclusive tests in order to validate all shaders, but hey, we're here now!)
Rewriting WebGL1 shaders in WebGL2 in the codebase is relatively trivial as shown in this PR.
Changes are simply just attribute to in, gl_FragColor to fragColor in shaders.
There was a problem hiding this comment.
If you were to try to run maplibre-gl-js exclusively targeting WebGL2, you'd bump into issues with these shaders written in WebGL1 syntax.
How come? WebGL2 fully supports WebGL 1 shading language
Although I agree we should force shaders to be written in GLSL 300
| @@ -72,6 +72,7 @@ export class Program<Us extends UniformBindings> { | |||
| } | |||
|
|
|||
| const defines = configuration ? configuration.defines() : []; | |||
| defines.unshift('#version 300 es\n'); | |||
There was a problem hiding this comment.
This is required to be the first line in WebGL2 shaders, in every shader source code.
| // WebGL1 Compat -- Start | ||
|
|
||
| if (type === 'fragment') { | ||
| code = code | ||
| .replace(/\bin\s/g, 'varying ') // For fragment shaders, replace "in " with "varying " | ||
| .replace('out highp vec4 fragColor;', ''); | ||
| } | ||
|
|
||
| if (type === 'vertex') { | ||
| code = code | ||
| .replace(/\bin\s/g, 'attribute ') // For vertex shaders, replace "in " with "attribute " | ||
| .replace(/\bout\s/g, 'varying '); // For vertex shaders, replace "out " with "varying " | ||
| } | ||
|
|
||
| code = code | ||
| .replace(/fragColor/g, 'gl_FragColor') | ||
| .replace(/texture\(/g, 'texture2D('); | ||
|
|
||
| // WebGL1 Compat -- End |
There was a problem hiding this comment.
Removing WebGL1 Compat translator because we would no longer need to downgrade/rewrite WebGL2 shaders in WebGL1.
|
This seems like a good starting point on what we'd need to deprecate WebGL1. |
This is an incomplete draft PR as a follow-up to the WebGL1 removal discussion here #3947
Launch Checklist
CHANGELOG.mdunder the## mainsection.