Skip to content

[webgl] disable offscreen canvas for safari, #7436

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 3, 2023
Merged

[webgl] disable offscreen canvas for safari, #7436

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
762d2a7
disable offscreen canvas for safari, since gl fencing is not working …
pyu10055 Mar 2, 2023
cd0a005
Merge branch 'master' into safari-offscreen-canvas
mattsoulanille Mar 2, 2023
361790d
Merge branch 'master' into safari-offscreen-canvas
pyu10055 Mar 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions tfjs-backend-webgl/src/canvas_util.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,10 @@ export function getWebGLContext(
}

function createCanvas(webGLVersion: number) {
if (typeof OffscreenCanvas !== 'undefined' && webGLVersion === 2) {
// Use canvas element for Safari, since its offscreen canvas does not support
// fencing.
if (!env().getBool('IS_SAFARI') && typeof OffscreenCanvas !== 'undefined' &&
webGLVersion === 2) {
return new OffscreenCanvas(300, 150);
} else if (typeof document !== 'undefined') {
return document.createElement('canvas');
Expand Down Expand Up @@ -98,9 +101,10 @@ function getWebGLRenderingContext(
}

if (webGLVersion === 1) {
return (canvas.getContext('webgl', WEBGL_ATTRIBUTES) ||
(canvas as HTMLCanvasElement)
.getContext('experimental-webgl', WEBGL_ATTRIBUTES));
return (
canvas.getContext('webgl', WEBGL_ATTRIBUTES) ||
(canvas as HTMLCanvasElement)
.getContext('experimental-webgl', WEBGL_ATTRIBUTES));
}
return canvas.getContext('webgl2', WEBGL_ATTRIBUTES) as WebGLRenderingContext;
}
48 changes: 24 additions & 24 deletions tfjs-backend-webgl/src/gpgpu_context.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export interface FenceContext {
isFencePassed(): boolean;
}

type WebGLVao = WebGLVertexArrayObject | WebGLVertexArrayObjectOES;
type WebGLVao = WebGLVertexArrayObject|WebGLVertexArrayObjectOES;

export interface GPGPUContextProgram extends WebGLProgram {
vao: WebGLVao;
Expand All @@ -55,8 +55,8 @@ export class GPGPUContext {
textureConfig: TextureConfig;

createVertexArray: () => WebGLVao | null;
bindVertexArray: (vao: WebGLVao | null) => void;
deleteVertexArray: (vao: WebGLVao | null) => void;
bindVertexArray: (vao: WebGLVao|null) => void;
deleteVertexArray: (vao: WebGLVao|null) => void;
getVertexArray: () => WebGLVao | null;

constructor(gl?: WebGLRenderingContext) {
Expand All @@ -72,20 +72,19 @@ export class GPGPUContext {
if (env().getNumber('WEBGL_VERSION') === 2) {
const gl2 = gl as WebGL2RenderingContext;
this.createVertexArray = () => {
return webgl_util.callAndCheck(gl2,
() => gl2.createVertexArray());
return webgl_util.callAndCheck(gl2, () => gl2.createVertexArray());
};
this.bindVertexArray = (vao: WebGLVao|null) => {
return webgl_util.callAndCheck(gl2,
() => gl2.bindVertexArray(vao as WebGLVertexArrayObject));
return webgl_util.callAndCheck(
gl2, () => gl2.bindVertexArray(vao as WebGLVertexArrayObject));
};
this.deleteVertexArray = (vao: WebGLVao|null) => {
return webgl_util.callAndCheck(gl2,
() => gl2.deleteVertexArray(vao as WebGLVertexArrayObject));
return webgl_util.callAndCheck(
gl2, () => gl2.deleteVertexArray(vao as WebGLVertexArrayObject));
};
this.getVertexArray = () => {
return webgl_util.callAndCheck(gl2,
() => gl2.getParameter(gl2.VERTEX_ARRAY_BINDING));
return webgl_util.callAndCheck(
gl2, () => gl2.getParameter(gl2.VERTEX_ARRAY_BINDING));
};
} else if (gl != null) {
const ext = gl.getExtension('OES_vertex_array_object');
Expand All @@ -95,20 +94,20 @@ export class GPGPUContext {
' OES_vertex_array_object.');
}
this.createVertexArray = () => {
return webgl_util.callAndCheck(gl,
() => ext.createVertexArrayOES());
return webgl_util.callAndCheck(gl, () => ext.createVertexArrayOES());
};
this.bindVertexArray = (vao: WebGLVao|null) => {
return webgl_util.callAndCheck(gl,
() => ext.bindVertexArrayOES(vao as WebGLVertexArrayObjectOES));
return webgl_util.callAndCheck(
gl, () => ext.bindVertexArrayOES(vao as WebGLVertexArrayObjectOES));
};
this.deleteVertexArray = (vao: WebGLVao|null) => {
return webgl_util.callAndCheck(gl,
() => ext.deleteVertexArrayOES(vao as WebGLVertexArrayObjectOES));
return webgl_util.callAndCheck(
gl,
() => ext.deleteVertexArrayOES(vao as WebGLVertexArrayObjectOES));
};
this.getVertexArray = () => {
return webgl_util.callAndCheck(gl,
() => gl.getParameter(ext.VERTEX_ARRAY_BINDING_OES));
return webgl_util.callAndCheck(
gl, () => gl.getParameter(ext.VERTEX_ARRAY_BINDING_OES));
};
}

Expand Down Expand Up @@ -352,9 +351,9 @@ export class GPGPUContext {
webgl_util.callAndCheck(
gl, () => gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer));
console.assert(
gpgpu_util.bindVertexProgramAttributeStreams(gl, program2,
this.vertexBuffer),
'gpgpu_util.bindVertexProgramAttributeStreams not fully successful.');
gpgpu_util.bindVertexProgramAttributeStreams(
gl, program2, this.vertexBuffer),
'gpgpu_util.bindVertexProgramAttributeStreams not fully successful.');

if (this.debug) {
webgl_util.validateProgram(gl, program2);
Expand Down Expand Up @@ -464,8 +463,9 @@ export class GPGPUContext {
const gl = this.gl;
if (this.debug) {
const boundVao = this.getVertexArray();
console.assert(boundVao === this.program.vao,
'VAO changed between setProgram and executeProgram!');
console.assert(
boundVao === this.program.vao,
'VAO changed between setProgram and executeProgram!');

this.debugValidate();
}
Expand Down
6 changes: 6 additions & 0 deletions tfjs-core/src/flags.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,12 @@ ENV.registerFlag(
navigator.userAgent != null && /Chrome/.test(navigator.userAgent) &&
/Google Inc/.test(navigator.vendor));

/** Whether this browser is Safari. */
ENV.registerFlag(
'IS_SAFARI',
() => typeof navigator !== 'undefined' && navigator != null &&
navigator.userAgent != null && /Safari/.test(navigator.userAgent) &&
/Apple/.test(navigator.vendor));
/**
* True when the environment is "production" where we disable safety checks
* to gain performance.
Expand Down