WebGL device ignores WebGL1 request and always creates WebGL2 device (#…

…6297)

* WebGL device ignores WebGL1 request and always creates WebGL2 device

* more cleanup

* removed gl1 creation

* fix tests by using a null device

---------

Co-authored-by: Martin Valigursky <mvaligursky@snapchat.com>

examples/src/examples/misc/multi-app/example.mjs

@@ -21,9 +21,7 @@ const createApp = async function (deviceType) {
         device = new pc.WebgpuGraphicsDevice(canvas, {});
         await device.initWebGpu(rootPath + '/static/lib/glslang/glslang.js', rootPath + '/static/lib/twgsl/twgsl.js');
     } else if (deviceType === 'webgl1' || deviceType === 'webgl2') {
-        device = new pc.WebglGraphicsDevice(canvas, {
-            preferWebGl2: deviceType === 'webgl2'
-        });
+        device = new pc.WebglGraphicsDevice(canvas);
     } else {
         device = new pc.NullGraphicsDevice(canvas, {});
     }

src/platform/graphics/graphics-device-create.js

@@ -1,6 +1,6 @@
 import { platform } from '../../core/platform.js';
 
-import { DEVICETYPE_WEBGL2, DEVICETYPE_WEBGL1, DEVICETYPE_WEBGPU, DEVICETYPE_NULL } from './constants.js';
+import { DEVICETYPE_WEBGL2, DEVICETYPE_WEBGPU, DEVICETYPE_NULL } from './constants.js';
 import { WebgpuGraphicsDevice } from './webgpu/webgpu-graphics-device.js';
 import { WebglGraphicsDevice } from './webgl/webgl-graphics-device.js';
 import { NullGraphicsDevice } from './null/null-graphics-device.js';
@@ -12,9 +12,8 @@ import { NullGraphicsDevice } from './null/null-graphics-device.js';
  * @param {object} options - Graphics device options.
  * @param {string[]} [options.deviceTypes] - An array of DEVICETYPE_*** constants, defining the
  * order in which the devices are attempted to get created. Defaults to an empty array. If the
- * specified array does not contain [{@link DEVICETYPE_WEBGL2} or {@link DEVICETYPE_WEBGL1}], those
- * are internally added to its end in this order. Typically, you'd only specify
- * {@link DEVICETYPE_WEBGPU}, or leave it empty.
+ * specified array does not contain {@link DEVICETYPE_WEBGL2}, it is internally added to its end.
+ * Typically, you'd only specify {@link DEVICETYPE_WEBGPU}, or leave it empty.
  * @param {boolean} [options.antialias] - Boolean that indicates whether or not to perform
  * anti-aliasing if possible. Defaults to true.
  * @param {boolean} [options.depth] - Boolean that indicates that the drawing buffer is
@@ -23,7 +22,7 @@ import { NullGraphicsDevice } from './null/null-graphics-device.js';
  * requested to have a stencil buffer of at least 8 bits. Defaults to true.
  * @param {string} [options.glslangUrl] - The URL to the glslang script. Required if the
  * {@link DEVICETYPE_WEBGPU} type is added to deviceTypes array. Not used for
- * {@link DEVICETYPE_WEBGL1} or {@link DEVICETYPE_WEBGL2} device type creation.
+ * {@link DEVICETYPE_WEBGL2} device type creation.
  * @param {string} [options.twgslUrl] - An url to twgsl script, required if glslangUrl was specified.
  * @param {boolean} [options.xrCompatible] - Boolean that hints to the user agent to use a
  * compatible graphics adapter for an immersive XR device.
@@ -47,9 +46,6 @@ function createGraphicsDevice(canvas, options = {}) {
     if (!deviceTypes.includes(DEVICETYPE_WEBGL2)) {
         deviceTypes.push(DEVICETYPE_WEBGL2);
     }
-    if (!deviceTypes.includes(DEVICETYPE_WEBGL1)) {
-        deviceTypes.push(DEVICETYPE_WEBGL1);
-    }
     if (!deviceTypes.includes(DEVICETYPE_NULL)) {
         deviceTypes.push(DEVICETYPE_NULL);
     }
@@ -71,9 +67,8 @@ function createGraphicsDevice(canvas, options = {}) {
             });
         }
 
-        if (deviceType === DEVICETYPE_WEBGL1 || deviceType === DEVICETYPE_WEBGL2) {
+        if (deviceType === DEVICETYPE_WEBGL2) {
             deviceCreateFuncs.push(() => {
-                options.preferWebGl2 = deviceType === DEVICETYPE_WEBGL2;
                 return new WebglGraphicsDevice(canvas, options);
             });
         }

src/platform/graphics/graphics-device.js

@@ -85,14 +85,6 @@ class GraphicsDevice extends EventHandler {
      */
     isWebGPU = false;
 
-    /**
-     * True if the deviceType is WebGL1
-     *
-     * @type {boolean}
-     * @readonly
-     */
-    isWebGL1 = false;
-
     /**
      * True if the deviceType is WebGL2
      *
@@ -835,9 +827,9 @@ class GraphicsDevice extends EventHandler {
     }
 
     /**
-     * The type of the device. Can be one of pc.DEVICETYPE_WEBGL1, pc.DEVICETYPE_WEBGL2 or pc.DEVICETYPE_WEBGPU.
+     * The type of the device. Can be pc.DEVICETYPE_WEBGL2 or pc.DEVICETYPE_WEBGPU.
      *
-     * @type {import('./constants.js').DEVICETYPE_WEBGL1 | import('./constants.js').DEVICETYPE_WEBGL2 | import('./constants.js').DEVICETYPE_WEBGPU}
+     * @type {import('./constants.js').DEVICETYPE_WEBGL2 | import('./constants.js').DEVICETYPE_WEBGPU}
      */
     get deviceType() {
         return this._deviceType;

src/platform/graphics/webgl/webgl-graphics-device.js

@@ -25,8 +25,7 @@ import {
     semanticToLocation,
     UNIFORMTYPE_TEXTURE2D_ARRAY,
     PRIMITIVE_TRISTRIP,
-    DEVICETYPE_WEBGL2,
-    DEVICETYPE_WEBGL1
+    DEVICETYPE_WEBGL2
 } from '../constants.js';
 
 import { GraphicsDevice } from '../graphics-device.js';
@@ -252,8 +251,6 @@ class WebglGraphicsDevice extends GraphicsDevice {
      * @param {boolean} [options.failIfMajorPerformanceCaveat] - Boolean that indicates if a
      * context will be created if the system performance is low or if no hardware GPU is available.
      * Defaults to false.
-     * @param {boolean} [options.preferWebGl2] - Boolean that indicates if a WebGl2 context should
-     * be preferred. Defaults to true.
      * @param {boolean} [options.desynchronized] - Boolean that hints the user agent to reduce the
      * latency by desynchronizing the canvas paint cycle from the event loop. Defaults to false.
      * @param {boolean} [options.xrCompatible] - Boolean that hints to the user agent to use a
@@ -308,35 +305,21 @@ class WebglGraphicsDevice extends GraphicsDevice {
             }
         }
 
-        /** @type {WebGL2RenderingContext} */
-        let gl = null;
-
         // we always allocate the default framebuffer without antialiasing, so remove that option
         this.backBufferAntialias = options.antialias ?? false;
         options.antialias = false;
 
         // Retrieve the WebGL context
-        if (options.gl) {
-            gl = options.gl;
-        } else {
-            const preferWebGl2 = (options.preferWebGl2 !== undefined) ? options.preferWebGl2 : true;
-            const names = preferWebGl2 ? ["webgl2", "webgl", "experimental-webgl"] : ["webgl", "experimental-webgl"];
-            for (let i = 0; i < names.length; i++) {
-                gl = canvas.getContext(names[i], options);
-                if (gl) {
-                    break;
-                }
-            }
-        }
+        /** @type {WebGL2RenderingContext} */
+        const gl = options.gl ?? canvas.getContext('webgl2', options);
 
         if (!gl) {
             throw new Error("WebGL not supported");
         }
 
         this.gl = gl;
-        this.isWebGL2 = typeof WebGL2RenderingContext !== 'undefined' && gl instanceof WebGL2RenderingContext;
-        this.isWebGL1 = !this.isWebGL2;
-        this._deviceType = this.isWebGL2 ? DEVICETYPE_WEBGL2 : DEVICETYPE_WEBGL1;
+        this.isWebGL2 = true;
+        this._deviceType = DEVICETYPE_WEBGL2;
 
         // pixel format of the framebuffer
         this.updateBackbufferFormat(null);

test/framework/anim/controller/anim-controller.test.mjs

@@ -8,6 +8,7 @@ import { AnimData } from '../../../../src/framework/anim/evaluator/anim-data.js'
 import { AnimCurve } from '../../../../src/framework/anim/evaluator/anim-curve.js';
 import { INTERPOLATION_LINEAR } from '../../../../src/framework/anim/constants.js';
 import { ANIM_LESS_THAN } from '../../../../src/framework/anim/controller/constants.js';
+import { NullGraphicsDevice } from '../../../../src/platform/graphics/null/null-graphics-device.js';
 import { HTMLCanvasElement } from '@playcanvas/canvas-mock';
 import { expect } from 'chai';
 
@@ -18,7 +19,7 @@ describe('AnimController', function () {
 
     beforeEach(function () {
         const canvas = new HTMLCanvasElement(500, 500);
-        app = new Application(canvas);
+        app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
         const states = [
             {
                 name: 'START'

test/framework/anim/evaluator/anim-evaluator.test.mjs

@@ -8,6 +8,7 @@ import { AnimEvents } from '../../../../src/framework/anim/evaluator/anim-events
 import { Application } from '../../../../src/framework/application.js';
 import { DefaultAnimBinder } from '../../../../src/framework/anim/binder/default-anim-binder.js';
 import { GraphNode } from '../../../../src/scene/graph-node.js';
+import { NullGraphicsDevice } from '../../../../src/platform/graphics/null/null-graphics-device.js';
 
 import { HTMLCanvasElement } from '@playcanvas/canvas-mock';
 
@@ -17,7 +18,7 @@ describe('AnimEvaluator', function () {
 
     it('AnimEvaluator: update with clip blending', function () {
         const canvas = new HTMLCanvasElement(500, 500);
-        const app = new Application(canvas);
+        const app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
 
         // build the graph to be animated
         const parent = new GraphNode('parent');
@@ -90,7 +91,7 @@ describe('AnimEvaluator', function () {
 
     it('AnimEvaluator: update without clip blending', function () {
         const canvas = new HTMLCanvasElement(500, 500);
-        const app = new Application(canvas);
+        const app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
 
         // build the graph to be animated
         const parent = new GraphNode('parent');

test/framework/application.test.mjs

@@ -12,6 +12,7 @@ import { Scene } from '../../src/scene/scene.js';
 import { SceneRegistry } from '../../src/framework/scene-registry.js';
 import { ScriptRegistry } from '../../src/framework/script/script-registry.js';
 import { XrManager } from '../../src/framework/xr/xr-manager.js';
+import { NullGraphicsDevice } from '../../src/platform/graphics/null/null-graphics-device.js';
 
 import { HTMLCanvasElement } from '@playcanvas/canvas-mock';
 
@@ -23,7 +24,7 @@ describe('Application', function () {
 
         it('support no options', function () {
             const canvas = new HTMLCanvasElement(500, 500);
-            const app = new Application(canvas);
+            const app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
 
             expect(app.assets).to.be.instanceOf(AssetRegistry);
             expect(app.autoRender).to.be.true;
@@ -56,7 +57,7 @@ describe('Application', function () {
 
         it('destroys the application', function () {
             const canvas = new HTMLCanvasElement(500, 500);
-            const app = new Application(canvas);
+            const app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
 
             app.destroy();
 //            expect(app.assets).to.be.null;

test/framework/asset/asset-list-loader.test.mjs

@@ -1,6 +1,7 @@
 import { Application } from '../../../src/framework/application.js';
 import { AssetListLoader } from '../../../src/framework/asset/asset-list-loader.js';
 import { Asset } from '../../../src/framework/asset/asset.js';
+import { NullGraphicsDevice } from '../../../src/platform/graphics/null/null-graphics-device.js';
 
 import { HTMLCanvasElement } from '@playcanvas/canvas-mock';
 
@@ -13,7 +14,7 @@ describe('AssetListLoader', function () {
 
     beforeEach(function () {
         const canvas = new HTMLCanvasElement(500, 500);
-        app = new Application(canvas);
+        app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
     });
 
     afterEach(function () {

test/framework/asset/asset-localized.test.mjs

@@ -1,6 +1,7 @@
 import { LocalizedAsset } from '../../../src/framework/asset/asset-localized.js';
 import { Application } from '../../../src/framework/application.js';
 import { Asset } from '../../../src/framework/asset/asset.js';
+import { NullGraphicsDevice } from '../../../src/platform/graphics/null/null-graphics-device.js';
 
 import { HTMLCanvasElement } from '@playcanvas/canvas-mock';
 
@@ -12,7 +13,7 @@ describe('LocalizedAsset', function () {
 
     beforeEach(function () {
         const canvas = new HTMLCanvasElement(500, 500);
-        app = new Application(canvas);
+        app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
     });
 
     afterEach(function () {

test/framework/asset/asset-registry.test.mjs

@@ -4,6 +4,7 @@ import { AssetRegistry } from '../../../src/framework/asset/asset-registry.js';
 import { GlbContainerResource } from '../../../src/framework/parsers/glb-container-resource.js';
 import { ResourceLoader } from '../../../src/framework/handlers/loader.js';
 import { http, Http } from '../../../src/platform/net/http.js';
+import { NullGraphicsDevice } from '../../../src/platform/graphics/null/null-graphics-device.js';
 
 import { HTMLCanvasElement } from '@playcanvas/canvas-mock';
 
@@ -19,7 +20,7 @@ describe('AssetRegistry', function () {
         retryDelay = Http.retryDelay;
         Http.retryDelay = 1;
         const canvas = new HTMLCanvasElement(500, 500);
-        app = new Application(canvas);
+        app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
     });
 
     afterEach(function () {

test/framework/asset/asset.test.mjs

@@ -1,5 +1,6 @@
 import { Application } from '../../../src/framework/application.js';
 import { Asset } from '../../../src/framework/asset/asset.js';
+import { NullGraphicsDevice } from '../../../src/platform/graphics/null/null-graphics-device.js';
 
 import { HTMLCanvasElement } from '@playcanvas/canvas-mock';
 
@@ -11,7 +12,7 @@ describe('Asset', function () {
 
     beforeEach(function () {
         const canvas = new HTMLCanvasElement(500, 500);
-        app = new Application(canvas);
+        app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
     });
 
     afterEach(function () {

test/framework/components/element/component.test.mjs

@@ -1,6 +1,7 @@
 import { LAYERID_UI } from '../../../../src/scene/constants.js';
 import { Application } from '../../../../src/framework/application.js';
 import { Entity } from '../../../../src/framework/entity.js';
+import { NullGraphicsDevice } from '../../../../src/platform/graphics/null/null-graphics-device.js';
 
 import { HTMLCanvasElement } from '@playcanvas/canvas-mock';
 
@@ -11,7 +12,7 @@ describe('ElementComponent', function () {
 
     beforeEach(function () {
         const canvas = new HTMLCanvasElement(500, 500);
-        app = new Application(canvas);
+        app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
     });
 
     afterEach(function () {

test/framework/components/layout-group/component.test.mjs

@@ -1,6 +1,7 @@
 import { ELEMENTTYPE_GROUP } from '../../../../src/framework/components/element/constants.js';
 import { Application } from '../../../../src/framework/application.js';
 import { Entity } from '../../../../src/framework/entity.js';
+import { NullGraphicsDevice } from '../../../../src/platform/graphics/null/null-graphics-device.js';
 
 import { HTMLCanvasElement } from '@playcanvas/canvas-mock';
 
@@ -32,7 +33,7 @@ describe('LayoutGroupComponent', function () {
 
     beforeEach(function () {
         const canvas = new HTMLCanvasElement(500, 500);
-        app = new Application(canvas);
+        app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
         system = app.systems.layoutgroup;
 
         entity0 = buildLayoutGroupEntity('0');

test/framework/components/layout-group/layout-calculator.test.mjs

@@ -6,6 +6,7 @@ import { Entity } from '../../../../src/framework/entity.js';
 import { LayoutCalculator } from '../../../../src/framework/components/layout-group/layout-calculator.js';
 import { Vec2 } from '../../../../src/core/math/vec2.js';
 import { Vec4 } from '../../../../src/core/math/vec4.js';
+import { NullGraphicsDevice } from '../../../../src/platform/graphics/null/null-graphics-device.js';
 
 import { HTMLCanvasElement } from '@playcanvas/canvas-mock';
 
@@ -62,7 +63,7 @@ describe('LayoutCalculator', function () {
 
     beforeEach(function () {
         const canvas = new HTMLCanvasElement(500, 500);
-        app = new Application(canvas);
+        app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
         calculator = new LayoutCalculator();
 
         options = {

test/framework/components/model/component.test.mjs

@@ -2,6 +2,7 @@ import { Application } from '../../../../src/framework/application.js';
 import { Asset } from '../../../../src/framework/asset/asset.js';
 import { Entity } from '../../../../src/framework/entity.js';
 import { LAYERID_WORLD, LAYERID_UI } from '../../../../src/scene/constants.js';
+import { NullGraphicsDevice } from '../../../../src/platform/graphics/null/null-graphics-device.js';
 
 import { HTMLCanvasElement } from '@playcanvas/canvas-mock';
 
@@ -47,7 +48,7 @@ describe('ModelComponent', function () {
 
     beforeEach(function (done) {
         const canvas = new HTMLCanvasElement(500, 500);
-        app = new Application(canvas);
+        app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
 
         loadAssets(function () {
             done();

test/framework/components/system.test.mjs

@@ -4,6 +4,7 @@ import { ComponentSystem } from '../../../src/framework/components/system.js';
 import { Vec2 } from '../../../src/core/math/vec2.js';
 import { Vec3 } from '../../../src/core/math/vec3.js';
 import { Vec4 } from '../../../src/core/math/vec4.js';
+import { NullGraphicsDevice } from '../../../src/platform/graphics/null/null-graphics-device.js';
 
 import { HTMLCanvasElement } from '@playcanvas/canvas-mock';
 
@@ -17,7 +18,7 @@ describe('ComponentSystem', function () {
 
     beforeEach(function () {
         const canvas = new HTMLCanvasElement(500, 500);
-        app = new Application(canvas);
+        app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
 
         system = new ComponentSystem(app);
     });

test/framework/entity.test.mjs

@@ -26,6 +26,7 @@ import { ScrollViewComponent } from '../../src/framework/components/scroll-view/
 import { SoundComponent } from '../../src/framework/components/sound/component.js';
 import { SpriteComponent } from '../../src/framework/components/sprite/component.js';
 import { ZoneComponent } from '../../src/framework/components/zone/component.js';
+import { NullGraphicsDevice } from '../../src/platform/graphics/null/null-graphics-device.js';
 
 import { DummyComponentSystem } from './test-component/system.mjs';
 
@@ -39,7 +40,7 @@ describe('Entity', function () {
 
     beforeEach(function () {
         const canvas = new HTMLCanvasElement(500, 500);
-        app = new Application(canvas);
+        app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
 
         app.systems.add(new DummyComponentSystem(app));
     });