feat(texture): reallocate texture shape

Author: JingyuanZhang

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

@@ -3,50 +3,31 @@
  */
 
 function mainFunc(
-    { origin },
+    { out },
     {}
 ) {
-    const width_texture_origin = origin.width_texture;
-    const height_texture_origin = origin.height_texture;
     return `
 
-    vec2 getOriginCoord(float x, float y) {
-        if (x > float(${width_texture_origin})) {
-            int num = int(x / float(${width_texture_origin}));
-            x = mod(x, float(${width_texture_origin}));
-            y = y + float(num);
-        }
-        return vec2(x, y);
-    }
-
-    float getClipedCoordRed(vec2 xy) {
-        return TEXTURE2D(
-            texture_origin,
-            vec2(float(xy.x / float(${width_texture_origin})), float(xy.y / float(${height_texture_origin})))
-        ).r;
-    }
-
     // start函数
     void main() {
-        
+        ivec4 oPos = getOutputTensorPos();
         vec2 outCoord = vCoord.xy * _2d_shape_texture_out;
-        vec4 out4;
-        float x = floor(outCoord.x) * 4.0;
-        float y = floor(outCoord.y) * 4.0 + 0.5;
-        float x0 = x + 0.5;
-        float x1 = x + 1.5;
-        float x2 = x + 2.5;
-        float x3 = x + 3.5;
+        int index = int(outCoord.x) + int(outCoord.y) * int(${out.width_texture});
+
+        int first = index * 4;
+        int sec = index * 4 + 1;
+        int third = index * 4 + 2;
+        int fourth = index * 4 + 3;
 
-        vec2 xy0 = getOriginCoord(x0, y);
-        vec2 xy1 = getOriginCoord(x1, y);
-        vec2 xy2 = getOriginCoord(x2, y);
-        vec2 xy3 = getOriginCoord(x3, y);
+        ivec4 rPos = getTensorPosFromArrayIndex_origin(first);
+        ivec4 gPos = getTensorPosFromArrayIndex_origin(sec);
+        ivec4 bPos = getTensorPosFromArrayIndex_origin(third);
+        ivec4 aPos = getTensorPosFromArrayIndex_origin(fourth);
 
-        float r = getClipedCoordRed(xy0);
-        float g = getClipedCoordRed(xy1);
-        float b = getClipedCoordRed(xy2);
-        float a = getClipedCoordRed(xy3);
+        float r = getValueFromTensorPos_origin(rPos.r, rPos.g, rPos.b, rPos.a);
+        float g = getValueFromTensorPos_origin(gPos.r, gPos.g, gPos.b, gPos.a);
+        float b = getValueFromTensorPos_origin(bPos.r, bPos.g, bPos.b, bPos.a);
+        float a = getValueFromTensorPos_origin(aPos.r, aPos.g, aPos.b, aPos.a);
 
         setPackedOutput(vec4(r, g, b, a));
     }
@@ -55,6 +36,6 @@ function mainFunc(
 export default {
     mainFunc,
     textureFuncConf: {
-        origin: ['getValueFromTensorPosPacking', 'getValueFromTensorPos']
+        origin: ['getValueFromTensorPos', 'getTensorPosFromArrayIndex']
     }
 };

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

@@ -81,11 +81,26 @@ function genIntDataCode(dataArr: number[], key) {
     return dataStr;
 }
 
+function getSmallestDivisor(number, base) {
+    let divisor = base;
+    if (number % divisor === 0) {
+        return divisor;
+    }
+    while (divisor < number) {
+        if (number % divisor === 0) {
+            break;
+        }
+        divisor++;
+    }
+    return divisor;
+}
+
 export {
     nhwc2nchw,
     getSizeFromShape,
     reduceShape,
     genFpDataCode,
     genFpFloatArr,
-    genIntDataCode
+    genIntDataCode,
+    getSmallestDivisor
 };

packages/paddlejs-backend-webgl/src/webgl/WebGLUtils.ts

@@ -6,6 +6,7 @@
 import { Tensor } from '../types';
 import { env } from '@paddlejs/paddlejs-core';
 import { WebGLContextAttributes, UniformType } from './webgl_types';
+import { getSmallestDivisor } from '../utils/dataProcess';
 
 
 // 枚举类
@@ -85,10 +86,6 @@ export class GLHelper {
         return env.get('webglVersion');
     }
 
-    public static getWebglTextureLimitCut() {
-        return 8;
-    }
-
     public static createCanvas() {
         return env.get('canvas') || (document && document.createElement('canvas'));
     }
@@ -410,29 +407,27 @@ export class GLHelper {
         const {
             shape = []
         } = tensor;
-        const b = shape[0];
-        const c = shape[1];
-        const h = shape[2];
-        const w = shape[3];
-        let height = b * h;
-        let width = c * w;
-
-        // trick TEXTURE_SIZE 超限问题，后续升级更优解
-        if (height > GL_TEXTURE_MAX_SIZE || width > GL_TEXTURE_MAX_SIZE) {
-            const textureCut = this.getWebglTextureLimitCut();
-            env.get('debug') && console.error('大小超限', shape);
-            height *= textureCut;
-            width = c * (Math.ceil(w / textureCut));
-            if (height > GL_TEXTURE_MAX_SIZE || width > GL_TEXTURE_MAX_SIZE) {
-                const requested = `[${width}x${height}]`;
+        const [smallest, sec, third, biggest] = [...shape].sort((prev, cur) => prev - cur);
+        let texW = smallest * biggest;
+        let texH = sec * third;
+
+        if (texW > GL_TEXTURE_MAX_SIZE || texH > GL_TEXTURE_MAX_SIZE) {
+            const [smaller, bigger] = [texW, texH].sort((prev, cur) => prev - cur);
+            const baseCut = Math.ceil(bigger / GL_TEXTURE_MAX_SIZE);
+            const cut = getSmallestDivisor(bigger, baseCut);
+            texW = smaller * cut;
+            texH = Math.ceil(bigger / cut);
+            env.get('debug') && console.error('大小超限', shape, [texH, texW]);
+            if (texW > GL_TEXTURE_MAX_SIZE || texH > GL_TEXTURE_MAX_SIZE) {
+                const requested = `[${texW}x${texH}]`;
                 const max = `[${GL_TEXTURE_MAX_SIZE}x${GL_TEXTURE_MAX_SIZE}]`;
                 throw new Error(
                     'Requested texture size ' + requested
                     + ' greater than WebGL maximum on this browser / GPU ' + max + '.');
             }
         }
 
-        tensor.shape_texture = [height, width];
+        tensor.shape_texture = [texH, texW];
     }
 
 }