commit 62729e65701099931c09684e27103f3e249a60bf · kitten.sh/frag-canvas-element

.changeset/fair-cooks-jam.md

···

       1
       +
       ---

     

       2
       +
       'frag-canvas': patch

     

       3
       +
       ---

     

       4
       +
       

     

       5
       +
       Fix GLSL 300 ES (WebGL2) transformation

+32 -24

src/frag-canvas-element.ts

···

       25
        
         return [year, month, day, time] as const;

     

       26
        
       };

     

       27
        
       

     

       28
       -
       const preprocessShader = (source: string, isES300: boolean) => {

     

       29
        
         let header = '';

     

       30
       -
         let output = source;

     

       31
       -
       

     

       32
        
         if (output.startsWith(VERSION_300)) {

     

       0
        
       
     

       33
        
           output = output.slice(VERSION_300.length + 1);

     

       34
        
           header += `${VERSION_300}\n`;

     

       35
        
         }

     

       36
        
       

     

       37
        
         if (!/^\s*precision /.test(output)) header += 'precision highp float;\n';

     

       38
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       39
        
         if (output.includes('iChannel0')) header += 'uniform sampler2D iChannel0;\n';

     

       40
        
         if (output.includes('iResolution')) header += 'uniform vec2 iResolution;\n';

     

       41
        
         if (output.includes('iChannelResolution'))

     
···

       46
        
         if (output.includes('iChannel')) header += 'uniform float iChannel;\n';

     

       47
        
         if (output.includes('iDate')) header += 'uniform vec4 iDate;\n';

     

       48
        
       

     

       49
       -
         if (isES300 && output.includes('gl_FragColor'))

     

       50
       -
           header += 'out vec4 gl_FragColor;\n';

     

       51
       -
         if (isES300 && output.includes('gl_FragCoord'))

     

       52
       -
           header += 'in vec2 gl_FragCoord;\n';

     

       53
       -
       

     

       54
       -
         if (!/main\s*\(/.test(output)) {

     

       55
       -
           const ioRe = /\(\s*out\s+vec4\s+(\S+)\s*,\s*in\s+vec2\s+(\S+)\s*\)/g;

     

       56
       -
           const io = ioRe.exec(source);

     

       57
       -
           output = output.replace(/mainImage\s*\(/, 'main(').replace(ioRe, '()');

     

       58
       -
           if (io && io[1] !== 'gl_FragColor')

     

       59
       -
             header += `#define ${io[1]} gl_FragColor\n`;

     

       60
       -
           if (io && io[2] !== 'gl_FragCoord')

     

       61
       -
             header += `#define ${io[2]} gl_FragCoord.xy\n`;

     

       62
       -
         }

     

       63
       -
       

     

       64
       -
         if (!isES300) output = output.replace(/texture\s+\(/g, 'texture2D(');

     

       65
        
       

     

       66
       -
         return `${header}\n${output}`;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       67
        
       };

     

       68
        
       

     

       69
        
       interface InitState {

     
···

       158
        
           },

     

       159
        
       

     

       160
        
           updateFragShader(fragSource: string) {

     

       161
       -
             fragSource = fragSource.trim();

     

       162
       -
             const isES300 = /\s+#version 300/i.test(fragSource);

     

       163
       -
             gl.shaderSource(fragShader, preprocessShader(fragSource, isES300));

     

       164
        
             gl.compileShader(fragShader);

     

       165
       -
             const vertShader = isES300 ? vertShader300 : vertShader100;

     

       166
        
             gl.attachShader(program, vertShader);

     

       167
        
             gl.attachShader(program, fragShader);

     

       168

···

       25
        
         return [year, month, day, time] as const;

     

       26
        
       };

     

       27
        
       

     

       28
       +
       const preprocessShader = (source: string) => {

     

       29
        
         let header = '';

     

       30
       +
         let output = source.trim();

     

       31
       +
         let isES300 = false;

     

       32
        
         if (output.startsWith(VERSION_300)) {

     

       33
       +
           isES300 = true;

     

       34
        
           output = output.slice(VERSION_300.length + 1);

     

       35
        
           header += `${VERSION_300}\n`;

     

       36
        
         }

     

       37
        
       

     

       38
        
         if (!/^\s*precision /.test(output)) header += 'precision highp float;\n';

     

       39
        
       

     

       40
       +
         if (!/main\s*\(/.test(output)) {

     

       41
       +
           const ioRe = /\(\s*out\s+vec4\s+(\S+)\s*,\s*in\s+vec2\s+(\S+)\s*\)/g;

     

       42
       +
           const io = ioRe.exec(source);

     

       43
       +
           output = output.replace(/mainImage\s*\(/, 'main(').replace(ioRe, '()');

     

       44
       +
           if (isES300 && io) {

     

       45
       +
             header += `out vec4 ${io[1]};\n`;

     

       46
       +
             if (io[2] !== 'gl_FragCoord')

     

       47
       +
               header += `#define ${io[2]} gl_FragCoord.xy\n`;

     

       48
       +
           } else if (io) {

     

       49
       +
             if (io[1] !== 'gl_FragColor') header += `#define ${io[1]} gl_FragColor\n`;

     

       50
       +
             if (io[2] !== 'gl_FragCoord')

     

       51
       +
               header += `#define ${io[2]} gl_FragCoord.xy\n`;

     

       52
       +
           }

     

       53
       +
         }

     

       54
       +
       

     

       55
       +
         if (isES300 && output.includes('gl_FragColor')) {

     

       56
       +
           header += 'out vec4 aFragColor;\n';

     

       57
       +
           header += '#define glFragColor aFragColor.xy\n';

     

       58
       +
         }

     

       59
       +
       

     

       60
        
         if (output.includes('iChannel0')) header += 'uniform sampler2D iChannel0;\n';

     

       61
        
         if (output.includes('iResolution')) header += 'uniform vec2 iResolution;\n';

     

       62
        
         if (output.includes('iChannelResolution'))

     
···

       67
        
         if (output.includes('iChannel')) header += 'uniform float iChannel;\n';

     

       68
        
         if (output.includes('iDate')) header += 'uniform vec4 iDate;\n';

     

       69
        
       

     

       70
       +
         if (isES300) output = output.replace(/texture2D\s*\(/g, 'texture(');

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       71
        
       

     

       72
       +
         return {

     

       73
       +
           source: `${header}\n${output}`,

     

       74
       +
           isES300,

     

       75
       +
         };

     

       76
        
       };

     

       77
        
       

     

       78
        
       interface InitState {

     
···

       167
        
           },

     

       168
        
       

     

       169
        
           updateFragShader(fragSource: string) {

     

       170
       +
             const preprocessed = preprocessShader(fragSource);

     

       171
       +
             gl.shaderSource(fragShader, preprocessed.source);

     

       0
        
       
     

       172
        
             gl.compileShader(fragShader);

     

       173
       +
             const vertShader = preprocessed.isES300 ? vertShader300 : vertShader100;

     

       174
        
             gl.attachShader(program, vertShader);

     

       175
        
             gl.attachShader(program, fragShader);

     

       176