Skip to content

Commit 1d06bec

Browse files
yueshuangyanyueshuangyan
authored
Merge pull request #415 from JingyuanZhang/master
fix(webgl): fix prior_box and upload img to texture in WEBGL1.0 GLSL ES 1.0
2 parents 9b261b7 + 2b5661a commit 1d06bec

File tree

13 files changed

+112
-86
lines changed

13 files changed

+112
-86
lines changed

‎e2e/dist/assets/imgs/human.jpg‎

-11.6 KB
Binary file not shown.

‎e2e/dist/assets/imgs/seg.jpg‎

54.4 KB
Loading

‎e2e/dist/assets/imgs/seg_398x224.png‎

-88.7 KB
Binary file not shown.

‎e2e/dist/assets/imgs/seg_res.png‎

82.7 KB
Loading

‎e2e/dist/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@
3030
<img id="car" src="./assets/imgs/car.webp"/>
3131
<img id="banana" src="./assets/imgs/banana.jpeg"/>
3232
<img id="ok" src="./assets/imgs/ok.jpeg"/>
33-
<img id="human" src="./assets/imgs/human.jpg"/>
34-
<img id="seg" src="./assets/imgs/seg_398x224.png"/>
33+
<img id="human" src="./assets/imgs/seg.jpg"/>
34+
<img id="seg" src="./assets/imgs/seg_res.png"/>
3535
<img id="ocr" src="./assets/imgs/ocr.jpg"/>
3636
<img id="detect" src="./assets/imgs/detect.jpeg"/>
3737
<canvas id="back_canvas" ></canvas>

‎packages/paddlejs-backend-webgl/src/ops/atom/common_utils.ts‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎packages/paddlejs-backend-webgl/src/ops/shader/custom/imgFeed.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
function mainFunc() {
66
return `
77
uniform vec2 u_scale;
8-
uniform float u_keep_ratio;
8+
uniform int u_keep_ratio;
99
1010
void main(void) {
1111
vec2 outCoord = vCoord.xy;
1212
// 支持模型不按比例拉伸
13-
if (float(u_keep_ratio) == 0.0) {
13+
if (u_keep_ratio > 0) {
1414
vec4 origin = TEXTURE2D(texture_origin, outCoord);
1515
setPackedOutput(origin);
1616
return;
@@ -26,7 +26,7 @@ function mainFunc() {
2626
setPackedOutput(origin);
2727
}
2828
else {
29-
setPackedOutput(vec4(1.0, 1.0, 1.0, 1.0));
29+
setPackedOutput(vec4(1.0));
3030
}
3131
}
3232
`;

‎packages/paddlejs-backend-webgl/src/ops/shader/prior_box.ts‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
/* eslint-disable max-lines-per-function */
88

9-
import { genFpDataCode, genFpFloatArr } from '../../utils/dataProcess';
9+
import { genFpDataCode, genGLSLArr, ArrTypeEnum, getValueFromArrByIndex } from '../../utils/dataProcess';
1010

1111
function mainFunc(
1212
{ origin, image, out },
@@ -56,13 +56,18 @@ function mainFunc(
5656
// 这里没有使用 genFpDataCode 的原因是 aspect_ratios 长度很有可能超过 4
5757
// 但是 vec 最大是 vec4，所以用 float arr 更保险
5858
const floatArraydataCode = `
59-
${genFpFloatArr(min_sizes, 'min_sizes')}
60-
${genFpFloatArr(max_sizes, 'max_sizes')}
61-
${genFpFloatArr(aspect_ratios, 'aspect_ratios')}
59+
${genGLSLArr(min_sizes, 'min_sizes', ArrTypeEnum.FLOAT_TYPE)}
60+
${genGLSLArr(max_sizes, 'max_sizes', ArrTypeEnum.FLOAT_TYPE)}
61+
${genGLSLArr(aspect_ratios, 'aspect_ratios', ArrTypeEnum.FLOAT_TYPE)}
6262
`;
6363

64-
const clipCode = clip ? 'res = min(max(res, 0.), 1.);' : '';
64+
const getValueFromArrByIndexGLSL = `
65+
${getValueFromArrByIndex(min_sizes, 'min_sizes', ArrTypeEnum.FLOAT_TYPE)}
66+
${getValueFromArrByIndex(max_sizes, 'max_sizes', ArrTypeEnum.FLOAT_TYPE)}
67+
${getValueFromArrByIndex(aspect_ratios, 'aspect_ratios', ArrTypeEnum.FLOAT_TYPE)}
68+
`;
6569

70+
const clipCode = clip ? 'res = min(max(res, 0.), 1.);' : '';
6671

6772

6873
const prefix = `
@@ -81,6 +86,8 @@ function mainFunc(
8186
}
8287
}
8388
89+
${getValueFromArrByIndexGLSL}
90+
8491
// start函数
8592
void main(void) {
8693
ivec4 oPos = getOutputTensorPos();
@@ -119,26 +126,26 @@ function mainFunc(
119126
120127
// 求idx 对应的 h w p m
121128
int h = int(idx / (num_priors * feature_width));
122-
int w = (idx / num_priors) % feature_width;
123-
int p = idx % num_priors;
129+
int w = calMod(idx / num_priors, feature_width);
130+
int p = calMod(idx, num_priors);
124131
int m = ${max_sizes.length > 0} ? int(p / (as_num + 1)) : int(p / as_num);
125132
float cx = (float(w) + offset) * step_width;
126133
float cy = (float(h) + offset) * step_height;
127-
float min_size = float(min_sizes[m]);
134+
float min_size = getValueFromArrByIndex_min_sizes(min_sizes, m);
128135
float bw = 0.0;
129136
float bh = 0.0;
130137
131138
${max_sizes.length > 0
132139
? `
133-
int s = p % (as_num + 1);
140+
int s = calMod(p, as_num + 1);
134141
if (${!min_max_aspect_ratios_order}) {
135142
if (s < as_num) {
136-
float ar = aspect_ratios[s];
143+
float ar = getValueFromArrByIndex_aspect_ratios(aspect_ratios, s);
137144
bw = min_size * ar / 2.0;
138145
bh = min_size / ar / 2.0;
139146
}
140147
else {
141-
float max_size = float(max_sizes[m]);
148+
float max_size = getValueFromArrByIndex_max_sizes(max_sizes, m);
142149
bw = sqrt(min_size * max_size) / 2.0;
143150
bh = bw;
144151
}
@@ -149,19 +156,19 @@ function mainFunc(
149156
bw = bh;
150157
}
151158
else if (s == 1) {
152-
float max_size = float(max_sizes[m]);
159+
float max_size = getValueFromArrByIndex_max_sizes(max_sizes, m);
153160
bw = sqrt(min_size * max_size) / 2.0;
154161
bh = bw;
155162
}
156163
else {
157-
float ar = aspect_ratios[s - 1];
164+
float ar = getValueFromArrByIndex_aspect_ratios(aspect_ratios, s - 1);
158165
bw = min_size * sqrt(ar) / 2.0;
159166
bh = min_size / sqrt(ar) / 2.0;
160167
}
161168
}`
162169
: `
163-
int s = p % as_num;
164-
float ar = aspect_ratios[s];
170+
int s = calMod(p, as_num);
171+
float ar = getValueFromArrByIndex_aspect_ratios(aspect_ratios, s);
165172
bw = min_size * ar / 2.0;
166173
bh = min_size / ar / 2.0;
167174
`}

‎packages/paddlejs-backend-webgl/src/ops/shader/slice.ts‎

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@
44
* @example x = [[1,2,3,4],[5,6,7,8]] axes=[1] starts=[2] ends=[3] => out [3,7]
55
*/
66

7-
import { env } from '@paddlejs/paddlejs-core';
8-
import { initializeGLSLArr, ArrTypeEnum } from '../atom/common_utils';
7+
import { genGLSLArr, ArrTypeEnum, getValueFromArrByIndex } from '../../utils/dataProcess';
98

109

1110
function mainFunc(
@@ -75,27 +74,13 @@ function mainFunc(
7574
}
7675
}
7776

78-
const glslIndexArr = initializeGLSLArr(res_pos, ArrTypeEnum.INT_TYPE);
79-
80-
const ifConditions = res_pos.reduce((acc, _, idx) => {
81-
const ifCondition = idx === 0
82-
? `
83-
int index = 0;
84-
if (sumVal == ${idx}) {
85-
index = arr[${idx}];
86-
}`
87-
: `
88-
else if (sumVal == ${idx}) {
89-
index = arr[${idx}];
90-
}
91-
`;
92-
return acc + ifCondition;
93-
}, '');
77+
const glslIndexArr = genGLSLArr(res_pos, 'arr', ArrTypeEnum.INT_TYPE);
78+
79+
const getValueFromArrByIndexGLSL = getValueFromArrByIndex(res_pos, 'arr', ArrTypeEnum.INT_TYPE);
9480

95-
const getValueFromArrIndex = env.get('webglVersion') === 2
96-
? 'int index = arr[sumVal];'
97-
: ifConditions;
9881
return `
82+
${getValueFromArrByIndexGLSL}
83+
9984
void main(void) {
10085
ivec4 oPos = getOutputTensorPos();
10186
${glslIndexArr}
@@ -105,8 +90,8 @@ function mainFunc(
10590
+ oPos.b * ${out.width_shape}
10691
+ oPos.g * ${out.height_shape} * ${out.width_shape}
10792
+ oPos.r * ${out.channel} * ${out.width_shape} * ${out.height_shape};
108-
109-
${getValueFromArrIndex}
93+
94+
int index = getValueFromArrByIndex_arr(arr, sumVal);
11095
11196
float res = 0.0;
11297
ivec4 co = getTensorPosFromArrayIndex_origin(index);

‎packages/paddlejs-backend-webgl/src/utils/dataProcess.ts‎

Lines changed: 65 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
/**
22
* @file data process
33
*/
4+
5+
import { env } from '@paddlejs/paddlejs-core';
6+
47
function nhwc2nchw(data: number[] | Float32Array, shape: number[]) {
58
const N = shape[0];
69
const H = shape[1];
@@ -38,7 +41,7 @@ function getSizeFromShape(shape: number[]): number {
3841
return shape.reduce((acc, cur) => acc * cur, 1);
3942
}
4043

41-
function genFpFloatArr(arr, key) {
44+
function genGLSLFloatArr(arr, key) {
4245
if (arr.length === 0) {
4346
return '';
4447
}
@@ -95,12 +98,71 @@ function getSmallestDivisor(number, base) {
9598
return divisor;
9699
}
97100

101+
enum ArrTypeEnum {
102+
INT_TYPE = 'int',
103+
FLOAT_TYPE = 'float'
104+
}
105+
106+
// GLSL ES 3.00 支持 arr => int arr = int[](x, x, x,... x);
107+
// GLSL ES 1.0 (1.0) 不支持 array constructor
108+
// '[]' : array constructor supported in GLSL ES 3.00 and above only
109+
function genGLSLArr(arr: Array<Number>, key: string, type: ArrTypeEnum) {
110+
if (arr.length === 0) {
111+
return '';
112+
}
113+
114+
if (env.get('webglVersion') === 2) {
115+
return arr.reduce((acc, cur, index) => {
116+
const tmp = index < arr.length - 1 ? `${type}(${cur}), ` : `${type}(${cur}));`;
117+
return acc + tmp;
118+
}, `${type} ${key}[] = ${type}[](`);
119+
}
120+
121+
const arr_value = arr.reduce((acc, cur, index) => {
122+
return acc + `
123+
${key}[${index}] = ${type}(${cur});`;
124+
}, '');
125+
126+
return `
127+
${type} ${key}[${arr.length}];
128+
${arr_value}
129+
`;
130+
}
131+
132+
function getValueFromArrByIndex(arr: Array<number>, arrKey: string, type: ArrTypeEnum) {
133+
const ifConditions = arr.reduce((acc, _, idx) => {
134+
const ifCondition = idx === 0
135+
? `
136+
${type} res = ${type}(0);
137+
if (index == ${idx}) {
138+
res = arr[${idx}];
139+
}`
140+
: `
141+
else if (index == ${idx}) {
142+
res = arr[${idx}];
143+
}`;
144+
return acc + ifCondition;
145+
}, '');
146+
147+
return `
148+
${type} getValueFromArrByIndex_${arrKey}(${type}[${arr.length}] arr, int index) {
149+
${env.get('webglVersion') === 2
150+
? `${type} res = arr[index];`
151+
: ifConditions}
152+
return res;
153+
}
154+
`;
155+
}
156+
98157
export {
99158
nhwc2nchw,
100159
getSizeFromShape,
101160
reduceShape,
102161
genFpDataCode,
103-
genFpFloatArr,
162+
genGLSLFloatArr,
104163
genIntDataCode,
105-
getSmallestDivisor
164+
getSmallestDivisor,
165+
genGLSLArr,
166+
ArrTypeEnum,
167+
getValueFromArrByIndex
106168
};

0 commit comments

Comments
 (0)