Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Aug 15, 2019. It is now read-only.

Commit 95e44a5

Browse files
authored
add experimental webgl support for RN platform (#1844)
* fix tests add webgl backend prototype * webgl path for ios * save * avoid shadowing global functions in clip * upgrade tfjs version * remove unused constant in shader compiler * Merge branch 'master' into rn-webgl * code review fixes improve float texture download detection to include half float textures. * save * save * remove warning as it makes tests noisy consider refactoring this in another PR. * Merge branch 'master' into rn-webgl * revert settings update * add comment * save * fix fetching of binary files * save * save * have tests spy on platform.fetch * Merge branch 'master' into rn-webgl * code review fixes * save * Merge branch 'master' into rn-webgl * fix lint errors * code review fixes
1 parent 03c205e commit 95e44a5

29 files changed

+505
-251
lines changed

‎.npmignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,5 @@ rollup.config.js
2222
tsconfig.json
2323
.yalc/
2424
yalc.lock
25+
tfjs-react-native/
26+
tfjs-backend-nodegl/

‎src/backends/webgl/clip_gpu.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ export class ClipProgram implements GPGPUProgram {
3030
constructor(aShape: number[]) {
3131
this.outputShape = aShape;
3232
this.userCode = `
33-
uniform float min;
34-
uniform float max;
33+
uniform float minVal;
34+
uniform float maxVal;
3535
3636
void main() {
3737
float value = getAAtOutCoords();
@@ -40,16 +40,16 @@ export class ClipProgram implements GPGPUProgram {
4040
return;
4141
}
4242
43-
setOutput(clamp(value, min, max));
43+
setOutput(clamp(value, minVal, maxVal));
4444
}
4545
`;
4646
}
4747

4848
getCustomSetupFunc(min: number, max: number) {
4949
return (gpgpu: GPGPUContext, webGLProgram: WebGLProgram) => {
5050
if (this.minLoc == null) {
51-
this.minLoc = gpgpu.getUniformLocationNoThrow(webGLProgram, 'min');
52-
this.maxLoc = gpgpu.getUniformLocationNoThrow(webGLProgram, 'max');
51+
this.minLoc = gpgpu.getUniformLocationNoThrow(webGLProgram, 'minVal');
52+
this.maxLoc = gpgpu.getUniformLocationNoThrow(webGLProgram, 'maxVal');
5353
}
5454
gpgpu.gl.uniform1f(this.minLoc, min);
5555
gpgpu.gl.uniform1f(this.maxLoc, max);

‎src/backends/webgl/clip_packed_gpu.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@ export class ClipPackedProgram implements GPGPUProgram {
3131
constructor(aShape: number[]) {
3232
this.outputShape = aShape;
3333
this.userCode = `
34-
uniform float min;
35-
uniform float max;
34+
uniform float minVal;
35+
uniform float maxVal;
3636
3737
void main() {
3838
vec4 value = getAAtOutCoords();
@@ -42,16 +42,16 @@ export class ClipPackedProgram implements GPGPUProgram {
4242
return;
4343
}
4444
45-
setOutput(clamp(value, vec4(min), vec4(max)));
45+
setOutput(clamp(value, vec4(minVal), vec4(maxVal)));
4646
}
4747
`;
4848
}
4949

5050
getCustomSetupFunc(min: number, max: number) {
5151
return (gpgpu: GPGPUContext, webGLProgram: WebGLProgram) => {
5252
if (this.minLoc == null) {
53-
this.minLoc = gpgpu.getUniformLocationNoThrow(webGLProgram, 'min');
54-
this.maxLoc = gpgpu.getUniformLocationNoThrow(webGLProgram, 'max');
53+
this.minLoc = gpgpu.getUniformLocationNoThrow(webGLProgram, 'minVal');
54+
this.maxLoc = gpgpu.getUniformLocationNoThrow(webGLProgram, 'maxVal');
5555
}
5656
gpgpu.gl.uniform1f(this.minLoc, min);
5757
gpgpu.gl.uniform1f(this.maxLoc, max);

‎src/backends/webgl/glsl_version.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,9 @@ export function getGlslDifferences(): GLSL {
5555
return (val > 0. || val < 0. || val == 0.) ? false : true;
5656
}
5757
`;
58-
defineSpecialInf=`
59-
const float INFINITY = uintBitsToFloat(uint(0x7f800000));
60-
`;
58+
// In webgl 2 we do not need to specify a custom isinf so there is no
59+
// need for a special INFINITY constant.
60+
defineSpecialInf=``;
6161
defineRound = `
6262
#define round(value) newRound(value)
6363
int newRound(float value) {

‎src/backends/webgl/gpgpu_context.ts‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ import * as util from '../../util';
2121

2222
import {getWebGLContext, setWebGLContext} from './canvas_util';
2323
import * as gpgpu_util from './gpgpu_util';
24-
import {TextureConfig} from './gpgpu_util';
2524
import * as tex_util from './tex_util';
25+
import {TextureConfig} from './tex_util';
2626
import {WebGL1DisjointQueryTimerExtension, WebGL2DisjointQueryTimerExtension} from './webgl_types';
2727
import * as webgl_util from './webgl_util';
2828

@@ -70,16 +70,25 @@ export class GPGPUContext {
7070
this.gl.getExtension('EXT_color_buffer_half_float');
7171
}
7272
} else {
73-
this.colorBufferFloatExtension = webgl_util.getExtensionOrThrow(
74-
this.gl, this.debug, 'EXT_color_buffer_float');
73+
const COLOR_BUFFER_FLOAT = 'EXT_color_buffer_float';
74+
const COLOR_BUFFER_HALF_FLOAT = 'EXT_color_buffer_half_float';
75+
if (webgl_util.hasExtension(this.gl, COLOR_BUFFER_FLOAT)) {
76+
this.colorBufferFloatExtension =
77+
this.gl.getExtension(COLOR_BUFFER_FLOAT);
78+
} else if (webgl_util.hasExtension(this.gl, COLOR_BUFFER_HALF_FLOAT)) {
79+
this.colorBufferHalfFloatExtension =
80+
this.gl.getExtension(COLOR_BUFFER_HALF_FLOAT);
81+
} else {
82+
throw new Error('GL context does not support color renderable floats');
83+
}
7584
}
7685

7786
this.vertexBuffer = gpgpu_util.createVertexBuffer(this.gl, this.debug);
7887
this.indexBuffer = gpgpu_util.createIndexBuffer(this.gl, this.debug);
7988
this.framebuffer = webgl_util.createFramebuffer(this.gl, this.debug);
8089

8190
this.textureConfig =
82-
gpgpu_util.getTextureConfig(this.gl, this.textureHalfFloatExtension);
91+
tex_util.getTextureConfig(this.gl, this.textureHalfFloatExtension);
8392
}
8493

8594
private get debug(): boolean {

‎src/backends/webgl/gpgpu_util.ts‎

Lines changed: 1 addition & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -15,29 +15,13 @@
1515
* =============================================================================
1616
*/
1717

18-
import {ENV} from '../../environment';
1918
import {PixelData, TypedArray} from '../../types';
2019

2120
import {getGlslDifferences} from './glsl_version';
2221
import * as tex_util from './tex_util';
22+
import {TextureConfig} from './tex_util';
2323
import * as webgl_util from './webgl_util';
2424

25-
export interface TextureConfig {
26-
internalFormatFloat: number;
27-
textureFormatFloat: number;
28-
internalFormatPackedHalfFloat: number;
29-
internalFormatHalfFloat: number;
30-
internalFormatPackedFloat: number;
31-
32-
// The format to use during a gl.readPixels call.
33-
downloadTextureFormat: number;
34-
// How many channels need to be unpacked after a gl.readPixels call.
35-
downloadUnpackNumChannels: number;
36-
37-
defaultNumChannels: number;
38-
textureTypeHalfFloat: number;
39-
}
40-
4125
export function createVertexShader(
4226
gl: WebGLRenderingContext, debug: boolean): WebGLShader {
4327
const glsl = getGlslDifferences();
@@ -69,60 +53,6 @@ export function createIndexBuffer(
6953
return webgl_util.createStaticIndexBuffer(gl, debug, triangleVertexIndices);
7054
}
7155

72-
export function getTextureConfig(
73-
// tslint:disable-next-line:no-any
74-
gl: WebGLRenderingContext, textureHalfFloatExtension?: any): TextureConfig {
75-
// tslint:disable-next-line:no-any
76-
const glany = gl as any;
77-
78-
let internalFormatFloat: number;
79-
let internalFormatHalfFloat: number;
80-
let internalFormatPackedHalfFloat: number;
81-
let internalFormatPackedFloat: number;
82-
let textureFormatFloat: number;
83-
84-
let downloadTextureFormat: number;
85-
let downloadUnpackNumChannels: number;
86-
87-
let defaultNumChannels: number;
88-
let textureTypeHalfFloat: number;
89-
90-
if (ENV.getNumber('WEBGL_VERSION') === 2) {
91-
internalFormatFloat = glany.R32F;
92-
internalFormatHalfFloat = glany.R16F;
93-
internalFormatPackedHalfFloat = glany.RGBA16F;
94-
internalFormatPackedFloat = glany.RGBA32F;
95-
textureFormatFloat = glany.RED;
96-
downloadUnpackNumChannels = 4;
97-
defaultNumChannels = 1;
98-
textureTypeHalfFloat = glany.HALF_FLOAT;
99-
} else {
100-
internalFormatFloat = gl.RGBA;
101-
internalFormatHalfFloat = gl.RGBA;
102-
internalFormatPackedHalfFloat = gl.RGBA;
103-
internalFormatPackedFloat = glany.RGBA;
104-
textureFormatFloat = gl.RGBA;
105-
downloadUnpackNumChannels = 4;
106-
defaultNumChannels = 4;
107-
textureTypeHalfFloat = textureHalfFloatExtension != null ?
108-
textureHalfFloatExtension.HALF_FLOAT_OES :
109-
null;
110-
}
111-
downloadTextureFormat = gl.RGBA;
112-
113-
return {
114-
internalFormatFloat,
115-
internalFormatHalfFloat,
116-
internalFormatPackedHalfFloat,
117-
internalFormatPackedFloat,
118-
textureFormatFloat,
119-
downloadTextureFormat,
120-
downloadUnpackNumChannels,
121-
defaultNumChannels,
122-
textureTypeHalfFloat
123-
};
124-
}
125-
12656
function createAndConfigureTexture(
12757
gl: WebGLRenderingContext, debug: boolean, width: number, height: number,
12858
internalFormat: number, textureFormat: number,

‎src/backends/webgl/gpgpu_util_test.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {describeWithFlags} from '../../jasmine_util';
1919
import {WEBGL_ENVS} from './backend_webgl_test_registry';
2020
import {GPGPUContext} from './gpgpu_context';
2121
import * as gpgpu_util from './gpgpu_util';
22+
import * as tex_util from './tex_util';
2223

2324
describeWithFlags('gpgpu_util createWebGLContext', WEBGL_ENVS, () => {
2425
let gpgpu: GPGPUContext;
@@ -59,7 +60,7 @@ describeWithFlags('gpgpu_util createWebGLContext', WEBGL_ENVS, () => {
5960
describeWithFlags('gpgpu_util createFloat32MatrixTexture', WEBGL_ENVS, () => {
6061
it('sets the TEXTURE_WRAP S+T parameters to CLAMP_TO_EDGE', () => {
6162
const gpgpu = new GPGPUContext();
62-
const textureConfig = gpgpu_util.getTextureConfig(gpgpu.gl);
63+
const textureConfig = tex_util.getTextureConfig(gpgpu.gl);
6364
const debug = false;
6465
const tex = gpgpu_util.createFloat32MatrixTexture(
6566
gpgpu.gl, debug, 32, 32, textureConfig);
@@ -77,7 +78,7 @@ describeWithFlags('gpgpu_util createFloat32MatrixTexture', WEBGL_ENVS, () => {
7778

7879
it('sets the TEXTURE_[MIN|MAG]_FILTER parameters to NEAREST', () => {
7980
const gpgpu = new GPGPUContext();
80-
const textureConfig = gpgpu_util.getTextureConfig(gpgpu.gl);
81+
const textureConfig = tex_util.getTextureConfig(gpgpu.gl);
8182
const debug = false;
8283
const tex = gpgpu_util.createFloat32MatrixTexture(
8384
gpgpu.gl, debug, 32, 32, textureConfig);
@@ -97,7 +98,7 @@ describeWithFlags('gpgpu_util createFloat32MatrixTexture', WEBGL_ENVS, () => {
9798
describeWithFlags('gpgpu_util createPackedMatrixTexture', WEBGL_ENVS, () => {
9899
it('sets the TEXTURE_WRAP S+T parameters to CLAMP_TO_EDGE', () => {
99100
const gpgpu = new GPGPUContext();
100-
const textureConfig = gpgpu_util.getTextureConfig(gpgpu.gl);
101+
const textureConfig = tex_util.getTextureConfig(gpgpu.gl);
101102
const debug = false;
102103
const tex = gpgpu_util.createPackedMatrixTexture(
103104
gpgpu.gl, debug, 32, 32, textureConfig);
@@ -115,7 +116,7 @@ describeWithFlags('gpgpu_util createPackedMatrixTexture', WEBGL_ENVS, () => {
115116

116117
it('sets the TEXTURE_[MIN|MAG]_FILTER parameters to NEAREST', () => {
117118
const gpgpu = new GPGPUContext();
118-
const textureConfig = gpgpu_util.getTextureConfig(gpgpu.gl);
119+
const textureConfig = tex_util.getTextureConfig(gpgpu.gl);
119120
const debug = false;
120121
const tex = gpgpu_util.createPackedMatrixTexture(
121122
gpgpu.gl, debug, 32, 32, textureConfig);

‎src/backends/webgl/tex_util.ts‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
* =============================================================================
1616
*/
1717

18+
import {ENV} from '../../environment';
1819
import {DataId, Tensor} from '../../tensor';
1920
import {BackendValues, DataType} from '../../types';
2021
import * as util from '../../util';
@@ -121,3 +122,78 @@ export function getPackedRGBAArraySizeFromMatrixShape(
121122
const [w, h] = getPackedMatrixTextureShapeWidthHeight(rows, columns);
122123
return w * h * 4;
123124
}
125+
126+
export interface TextureConfig {
127+
internalFormatFloat: number;
128+
textureFormatFloat: number;
129+
internalFormatPackedHalfFloat: number;
130+
internalFormatHalfFloat: number;
131+
internalFormatPackedFloat: number;
132+
133+
// The format to use during a gl.readPixels call.
134+
downloadTextureFormat: number;
135+
// How many channels need to be unpacked after a gl.readPixels call.
136+
downloadUnpackNumChannels: number;
137+
138+
defaultNumChannels: number;
139+
textureTypeHalfFloat: number;
140+
textureTypeFloat: number;
141+
}
142+
143+
export function getTextureConfig(
144+
// tslint:disable-next-line:no-any
145+
gl: WebGLRenderingContext, textureHalfFloatExtension?: any): TextureConfig {
146+
// tslint:disable-next-line:no-any
147+
const glany = gl as any;
148+
149+
let internalFormatFloat: number;
150+
let internalFormatHalfFloat: number;
151+
let internalFormatPackedHalfFloat: number;
152+
let internalFormatPackedFloat: number;
153+
let textureFormatFloat: number;
154+
155+
let downloadTextureFormat: number;
156+
let downloadUnpackNumChannels: number;
157+
158+
let defaultNumChannels: number;
159+
let textureTypeHalfFloat: number;
160+
let textureTypeFloat: number;
161+
162+
if (ENV.getNumber('WEBGL_VERSION') === 2) {
163+
internalFormatFloat = glany.R32F;
164+
internalFormatHalfFloat = glany.R16F;
165+
internalFormatPackedHalfFloat = glany.RGBA16F;
166+
internalFormatPackedFloat = glany.RGBA32F;
167+
textureFormatFloat = glany.RED;
168+
downloadUnpackNumChannels = 4;
169+
defaultNumChannels = 1;
170+
textureTypeHalfFloat = glany.HALF_FLOAT;
171+
textureTypeFloat = glany.FLOAT;
172+
} else {
173+
internalFormatFloat = gl.RGBA;
174+
internalFormatHalfFloat = gl.RGBA;
175+
internalFormatPackedHalfFloat = gl.RGBA;
176+
internalFormatPackedFloat = glany.RGBA;
177+
textureFormatFloat = gl.RGBA;
178+
downloadUnpackNumChannels = 4;
179+
defaultNumChannels = 4;
180+
textureTypeHalfFloat = textureHalfFloatExtension != null ?
181+
textureHalfFloatExtension.HALF_FLOAT_OES :
182+
null;
183+
textureTypeFloat = gl.FLOAT;
184+
}
185+
downloadTextureFormat = gl.RGBA;
186+
187+
return {
188+
internalFormatFloat,
189+
internalFormatHalfFloat,
190+
internalFormatPackedHalfFloat,
191+
internalFormatPackedFloat,
192+
textureFormatFloat,
193+
downloadTextureFormat,
194+
downloadUnpackNumChannels,
195+
defaultNumChannels,
196+
textureTypeHalfFloat,
197+
textureTypeFloat
198+
};
199+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /