fix: ios not support uniform array

web/demo/src/components/HelloWorld.vue

@@ -38,8 +38,9 @@ export default {
         imgUser: '//shp.qlogo.cn/pghead/Q3auHgzwzM6TmnCKHzBcyxVPEJ5t4Ria7H18tYJyM40c/0',
         imgAnchor: '//shp.qlogo.cn/pghead/PiajxSqBRaEKRa1v87G8wh37GibiaosmfU334GBWgk7aC8/140',
         textUser: 'user1',
-        textAnchor: 'user2'
-      } : {}))
+        textAnchor: 'user2',
+        type: 2
+      } : {type: 1}))
         .on('playing', () => {
           that.access = false
           console.log('playing')

web/dist/gl-util.d.ts

@@ -0,0 +1,4 @@
+export declare function createShader(gl: any, type: any, source: any): any;
+export declare function createProgram(gl: any, vertexShader: any, fragmentShader: any): any;
+export declare function createTexture(gl: any, index: number, imgData?: TexImageSource): any;
+export declare function cleanWebGL(gl: any, shaders: any, program: any, textures: any, buffers: any): void;

web/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { VapConfig } from "./type";
+import WebglRenderVap from './webgl-render-vap';
+/**
+ * @param options
+ * @constructor
+ * @return {null}
+ */
+export default function (options: VapConfig): WebglRenderVap;

web/dist/type.d.ts

@@ -0,0 +1,13 @@
+export interface VapConfig {
+    container: HTMLElement;
+    src: string;
+    config: string | {
+        [key: string]: any;
+    };
+    width: number;
+    height: number;
+    fps?: number;
+    mute?: boolean;
+    precache?: boolean;
+    [key: string]: any;
+}

web/dist/vap-frame-parser.d.ts

@@ -0,0 +1,32 @@
+export default class FrameParser {
+    constructor(source: any, headData: any);
+    private config;
+    private headData;
+    private frame;
+    private textureMap;
+    private canvas;
+    private ctx;
+    private srcData;
+    init(): Promise<this>;
+    initCanvas(): void;
+    loadImg(url: string): Promise<unknown>;
+    parseSrc(dataJson: any): Promise<[unknown, unknown, unknown, unknown, unknown, unknown, unknown, unknown, unknown, unknown]>;
+    /**
+     * 下载json文件
+     * @param jsonUrl json外链
+     * @returns {Promise}
+     */
+    getConfigBySrc(jsonUrl: string): Promise<unknown>;
+    /**
+     * 文字转换图片
+     * @param {*} param0
+     */
+    makeTextImg({ textStr, w, h, color, style }: {
+        textStr: any;
+        w: any;
+        h: any;
+        color: any;
+        style: any;
+    }): ImageData;
+    getFrame(frame: any): any;
+}

web/dist/vap.js

@@ -1705,13 +1705,15 @@
 
         if (textureSize > 0) {
           var imgColor = [];
+          var samplers = [];
 
           for (var i = 0; i < textureSize; i++) {
-            imgColor.push("if(ndx == ".concat(i, "){\n                        color = texture2D(textures[").concat(i, "],uv);\n                    }"));
+            imgColor.push("if(ndx == ".concat(i + 1, "){\n                        color = texture2D(u_image").concat(i + 1, ",uv);\n                    }"));
+            samplers.push("uniform sampler2D u_image".concat(i + 1, ";"));
           }
 
-          sourceUniform = "\n            uniform sampler2D u_image[".concat(textureSize, "];\n            uniform float image_pos[").concat(textureSize * PER_SIZE, "];\n            vec4 getSampleFromArray(sampler2D textures[").concat(textureSize, "], int ndx, vec2 uv) {\n                vec4 color;\n                ").concat(imgColor.join(' else '), "\n                return color;\n            }\n            ");
-          sourceTexure = "\n            vec4 srcColor,maskColor;\n            vec2 srcTexcoord,maskTexcoord;\n            int srcIndex;\n            float x1,x2,y1,y2,mx1,mx2,my1,my2; //\u663E\u793A\u7684\u533A\u57DF\n\n            for(int i=0;i<".concat(textureSize * PER_SIZE, ";i+= ").concat(PER_SIZE, "){\n                if ((int(image_pos[i]) > 0)) {\n                  srcIndex = int(image_pos[i]);\n    \n                    x1 = image_pos[i+1];\n                    x2 = image_pos[i+2];\n                    y1 = image_pos[i+3];\n                    y2 = image_pos[i+4];\n                    \n                    mx1 = image_pos[i+5];\n                    mx2 = image_pos[i+6];\n                    my1 = image_pos[i+7];\n                    my2 = image_pos[i+8];\n    \n    \n                    if (v_texcoord.s>x1 && v_texcoord.s<x2 && v_texcoord.t>y1 && v_texcoord.t<y2) {\n                        srcTexcoord = vec2((v_texcoord.s-x1)/(x2-x1),(v_texcoord.t-y1)/(y2-y1));\n                         maskTexcoord = vec2(mx1+srcTexcoord.s*(mx2-mx1),my1+srcTexcoord.t*(my2-my1));\n                         srcColor = getSampleFromArray(u_image,srcIndex,srcTexcoord);\n                         maskColor = texture2D(u_image_video, maskTexcoord);\n                         srcColor.a = srcColor.a*(maskColor.r);\n                      \n                         bgColor = vec4(srcColor.rgb*srcColor.a,srcColor.a) + (1.0-srcColor.a)*bgColor;\n                      \n                    }   \n                }\n            }\n            ");
+          sourceUniform = "\n            ".concat(samplers.join('\n'), "\n            uniform float image_pos[").concat(textureSize * PER_SIZE, "];\n            vec4 getSampleFromArray(int ndx, vec2 uv) {\n                vec4 color;\n                ").concat(imgColor.join(' else '), "\n                return color;\n            }\n            ");
+          sourceTexure = "\n            vec4 srcColor,maskColor;\n            vec2 srcTexcoord,maskTexcoord;\n            int srcIndex;\n            float x1,x2,y1,y2,mx1,mx2,my1,my2; //\u663E\u793A\u7684\u533A\u57DF\n\n            for(int i=0;i<".concat(textureSize * PER_SIZE, ";i+= ").concat(PER_SIZE, "){\n                if ((int(image_pos[i]) > 0)) {\n                  srcIndex = int(image_pos[i]);\n    \n                    x1 = image_pos[i+1];\n                    x2 = image_pos[i+2];\n                    y1 = image_pos[i+3];\n                    y2 = image_pos[i+4];\n                    \n                    mx1 = image_pos[i+5];\n                    mx2 = image_pos[i+6];\n                    my1 = image_pos[i+7];\n                    my2 = image_pos[i+8];\n    \n    \n                    if (v_texcoord.s>x1 && v_texcoord.s<x2 && v_texcoord.t>y1 && v_texcoord.t<y2) {\n                        srcTexcoord = vec2((v_texcoord.s-x1)/(x2-x1),(v_texcoord.t-y1)/(y2-y1));\n                         maskTexcoord = vec2(mx1+srcTexcoord.s*(mx2-mx1),my1+srcTexcoord.t*(my2-my1));\n                         srcColor = getSampleFromArray(srcIndex,srcTexcoord);\n                         maskColor = texture2D(u_image_video, maskTexcoord);\n                         srcColor.a = srcColor.a*(maskColor.r);\n                      \n                         bgColor = vec4(srcColor.rgb*srcColor.a,srcColor.a) + (1.0-srcColor.a)*bgColor;\n                      \n                    }   \n                }\n            }\n            ");
         }
 
         var fragmentSharder = "\n        precision lowp float;\n        varying vec2 v_texcoord;\n        varying vec2 v_alpha_texCoord;\n        uniform sampler2D u_image_video;\n        ".concat(sourceUniform, "\n        \n        void main(void) {\n            vec4 bgColor = ").concat(bgColor, "\n            ").concat(sourceTexure, "\n            // bgColor = texture2D(u_image[0], v_texcoord);\n            gl_FragColor = bgColor;\n        }\n        ");
@@ -1733,7 +1735,7 @@
           var resource = resources[key];
           this.textures.push(createTexture(gl, i, resource.img));
 
-          var _sampler = gl.getUniformLocation(this.program, "u_image[".concat(i, "]"));
+          var _sampler = gl.getUniformLocation(this.program, "u_image".concat(i));
 
           gl.uniform1i(_sampler, i);
           this.vapFrameParser.textureMap[resource.srcId] = i++;

web/dist/video.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="node" />
+import { VapConfig } from "./type";
+export default class VapVideo {
+    constructor(options: any);
+    options: VapConfig;
+    private fps;
+    requestAnim: Function;
+    container: HTMLElement;
+    video: HTMLVideoElement;
+    private events;
+    private _drawFrame;
+    private animId;
+    private firstPlaying;
+    precacheSource(source: any): Promise<string>;
+    initVideo(): void;
+    drawFrame(): void;
+    play(): void;
+    requestAnimFunc(): ((cb: any) => number) | ((cb: any) => NodeJS.Timeout);
+    cancelRequestAnimation(): void;
+    destroy(): void;
+    clear(): void;
+    on(event: any, callback: EventListenerObject): this;
+    onplaying(): void;
+    onpause(): void;
+    onended(): void;
+    onerror(err: any): void;
+}

web/dist/webgl-render-vap.d.ts

@@ -0,0 +1,34 @@
+import { VapConfig } from "./type";
+import VapVideo from './video';
+export default class WebglRenderVap extends VapVideo {
+    constructor(options: VapConfig);
+    private insType;
+    private textures;
+    private buffers;
+    private shaders;
+    private vapFrameParser;
+    private resources;
+    private instance;
+    private program;
+    private videoTexture;
+    private aPosition;
+    private aTexCoord;
+    private aAlphaTexCoord;
+    private _imagePos;
+    init(): Promise<void>;
+    setCanvas(): void;
+    initWebGL(): any;
+    /**
+     * 顶点着色器
+     */
+    initVertexShader(): any;
+    /**
+     * 片元着色器
+     */
+    initFragmentShader(): any;
+    initTexture(): void;
+    initVideoTexture(): void;
+    drawFrame(): void;
+    destroy(): void;
+    clearMemoryCache(): void;
+}

web/src/webgl-render-vap.ts

@@ -144,18 +144,20 @@ export default class WebglRenderVap extends VapVideo {
     let sourceUniform = '';
     if (textureSize > 0) {
       const imgColor = [];
+      const samplers = [];
       for (let i = 0; i < textureSize; i++) {
         imgColor.push(
-          `if(ndx == ${i}){
-                        color = texture2D(textures[${i}],uv);
+          `if(ndx == ${i + 1}){
+                        color = texture2D(u_image${i + 1},uv);
                     }`
         )
+        samplers.push(`uniform sampler2D u_image${i + 1};`)
       }
 
       sourceUniform = `
-            uniform sampler2D u_image[${textureSize}];
+            ${samplers.join('\n')}
             uniform float image_pos[${textureSize * PER_SIZE}];
-            vec4 getSampleFromArray(sampler2D textures[${textureSize}], int ndx, vec2 uv) {
+            vec4 getSampleFromArray(int ndx, vec2 uv) {
                 vec4 color;
                 ${imgColor.join(' else ')}
                 return color;
@@ -185,7 +187,7 @@ export default class WebglRenderVap extends VapVideo {
                     if (v_texcoord.s>x1 && v_texcoord.s<x2 && v_texcoord.t>y1 && v_texcoord.t<y2) {
                         srcTexcoord = vec2((v_texcoord.s-x1)/(x2-x1),(v_texcoord.t-y1)/(y2-y1));
                          maskTexcoord = vec2(mx1+srcTexcoord.s*(mx2-mx1),my1+srcTexcoord.t*(my2-my1));
-                         srcColor = getSampleFromArray(u_image,srcIndex,srcTexcoord);
+                         srcColor = getSampleFromArray(srcIndex,srcTexcoord);
                          maskColor = texture2D(u_image_video, maskTexcoord);
                          srcColor.a = srcColor.a*(maskColor.r);
                       
@@ -224,7 +226,7 @@ export default class WebglRenderVap extends VapVideo {
     for (const key in resources) {
       const resource = resources[key];
       this.textures.push(glUtil.createTexture(gl, i, resource.img));
-      const sampler = gl.getUniformLocation(this.program, `u_image[${i}]`);
+      const sampler = gl.getUniformLocation(this.program, `u_image${i}`);
       gl.uniform1i(sampler, i);
       this.vapFrameParser.textureMap[resource.srcId] = i++;
     }