gpu.js 不能被webpack 打包使用吗

[mei2015]

What is wrong?

Where does it happen?

How do we replicate the issue?

How important is this (1-5)?

Expected behavior (i.e. solution)

打包编译就报错 开发环境 很正常 renderer.js:1 Error: Error compiling fragment shader: ERROR: 0:404: '!' : wrong operand type - no operation '!' exists that takes an operand of type lowp int (or there is no acceptable conversion) ERROR: 0:404: '&&' : wrong operand types - no operation '&&' exists that takes a left-hand operand of type 'bool' and a right operand of type 'void' (or there is no acceptable conversion)

Other Comments

[robertleeplummerjr]

Can you post reproduction steps?

[sarthak-saxena]

Reproduction steps: Please follow the below reference of the code to reproduce the issue:

The below mentioned code does not seem to work

          const gpu = new GPU()
          gpu.createKernel(function(data: ThreadKernelVariable) {
                const x = this.thread.x,
                    y = this.thread.y,
                    n =
                        4 *
                        (x +
                            (this.constants as {w: number; h: number}).w *
                                ((this.constants as {w: number; h: number}).h - y))
                let red = data[n],
                    green = data[n + 1],
                    blue = data[n + 2],
                    alpha = data[n + 3]
                const isTranslucent = alpha > 0 && alpha < 256
                if (isTranslucent) {
                    red = activeColor[0]
                    green = activeColor[1]
                    blue = activeColor[2]
                    alpha = 256
                }
                this.color(red / 256, green / 256, blue / 256, alpha / 256)
            })
            .setDynamicOutput(true)
            .setGraphical(true)

& give error wrong operand types - no operation '&&' exists that takes a left-hand operand of type 'bool' and a right operand of type 'void' (or there is no acceptable conversion)

Whereas by little tweaking in the logic it works like a charm

      const gpu = new GPU()
      gpu.createKernel(function(data: ThreadKernelVariable) {
                const x = this.thread.x,
                    y = this.thread.y,
                    n =
                        4 *
                        (x +
                            (this.constants as {w: number; h: number}).w *
                                ((this.constants as {w: number; h: number}).h - y))
                const red = data[n],
                    green = data[n + 1],
                    blue = data[n + 2],
                    alpha = data[n + 3],
                    isTranslucent = alpha > 0 && alpha < 256
                this.color(
                    (isTranslucent ? activeColor[0] : red) / 256,
                    (isTranslucent ? activeColor[1] : green) / 256,
                    (isTranslucent ? activeColor[2] : blue) / 256,
                    (isTranslucent ? 256 : alpha) / 256
                )
          })

I think it is happening due to minification & is related to issue https://github.com/gpujs/gpu.js/issues/152

[harshkhandeparkar]

Try adding a semicolon after initialization.

P.S.: Dividing colors by 256 will produce incorrect output. The range of the input is 0-255 so you have to divide by 255.

[robertleeplummerjr]

The range of the input is 0-255 so you have to divide by 255.

A range of 0 to 255 is 256.

[harshkhandeparkar]

The range of the input is 0-255 so you have to divide by 255.

A range of 0 to 255 is 256.

The final range is 0-1 if you divide 0-255 by 256 you get 0-0.99609 and not 0-1.

[robertleeplummerjr]

Touche

[robertleeplummerjr]

I know this principle, and have coded it many times:

https://github.com/gpujs/gpu.js/blob/1955ad35005eeeb7a054719d21fad743de7f363c/src/backend/cpu/kernel.js#L183

Seems I was just having an off day.

[sarthak-saxena]

Try adding a semicolon after initialisation.

P.S.: Dividing colours by 256 will produce incorrect output. The range of the input is 0-255 so you have to divide by 255.

Thanks it's working fine after using semicolon but since I use prettier to remove semicolons seems like I have to customise it for gpu.js kernel functions

[robertleeplummerjr]

If I run your code through typescript playground, and remove all semicolons, it works:

    const gpu = new GPU()
    const kernel = gpu.createKernel(function (data, activeColor) {
        const x = this.thread.x, y = this.thread.y, n = 4 *
            (x +
                this.constants.w *
                    (this.constants.h - y))
        let red = data[n], green = data[n + 1], blue = data[n + 2], alpha = data[n + 3]
        const isTranslucent = alpha > 0 && alpha < 256
        if (isTranslucent) {
            red = activeColor[0]
            green = activeColor[1]
            blue = activeColor[2]
            alpha = 256
        }
        this.color(red / 256, green / 256, blue / 256, alpha / 256)
    })
        .setConstants({ w: 1, h: 1 })
        .setDynamicOutput(true)
        .setGraphical(true)
  
        kernel.setOutput([1, 1])
        kernel([1], [1,1,1])

We need a more definitive reproduction example to fix this issue.

[evanakm]

Please see my comment on #584, this is caused by minification and optimization, which is why it happens in the release build but not the debug build. Specifically, my project uses Angular 7, but I imagine it is a more general webpack issue. I needed to put the function in a separate file that is imported so that the optimizer skips over it.