关于新版的问题

[Aobanana-chan]

想点引用回复的，结果点到了重新开个issue。

Vite打包始终无法通过，dist里文件一直报

'default' is not exported by *******
2: import { normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
3: 
4: import RaindropFX from "raindrop-fx";
          ^
5: import { onBeforeUnmount, onMounted, ref } from "vue";

看源码应该是export了，但不能打包就很奇怪。源码改成export default RaindropFX 也没用。
直接拿源码用Vite打包的话，没有任何特效显示，控制台的log是有的，说明确实是实例化成功了，不过为什么没有效果，,等明天有空看看

然后拿example测试了一下destroy后，重新建canvas实例化。 背景图加载了，落雨没有渲染。
控制台的报错是

11 WebGL: INVALID_OPERATION: uniform1i: location not for current program
122 WebGL: INVALID_OPERATION: uniform4fv: location is not from current program
30 WebGL: INVALID_OPERATION: uniform1f: location not for current program
93 WebGL: INVALID_OPERATION: uniform2fv: location is not from current program

堆栈类似

uploadUniform material.ts:431
upload material.ts:134
drawMesh  renderer.ts:451
blit renderer.ts:317
downSample| blur.ts:73
blurBackground  renderer.ts:388
reloadBackground renderer.ts:329

[SardineFish]

更新了一个新的 PR

[Aobanana-chan]

好的，我试试，辛苦大佬了。
我今天也调了一天了，也知道问题在哪了，刚刚改了点渲染器和raindrop的代码，已经成功了一半，能重复加载但是运行久了就崩。 XD

[SardineFish]

是不是什么资源没有释放导致显存爆了（x

[SardineFish]

我找到的问题是在于 MaterialFromShader 里面复用 shader 的时候没有做销毁判断，并且这里面保存的 shader 是相当于 global 的。

[Aobanana-chan]

是的，我找到也是shader销毁的问题 XD
我写的解决方法是把shader的destroy函数override了一下，然后在raindrop里

  class RaindropMaterial extends MaterialFromShader(
    new Shader(raindropVert, raindropFrag, {
      blendRGB: [Blending.OneMinusDstColor, Blending.OneMinusSrcColor],
      depth: DepthTest.Disable,
      zWrite: false,
      attributes: {
        size: "aSize",
        modelMatrix: "aModelMatrix",
      },
    })
  ) {
    @shaderProp("uMainTex", "tex2d")
    texture: Texture | null = null;

    @shaderProp("uSize", "float")
    size = 0;
  }

当new RainDropFX的时候，new RaindropMaterial不会重新new Shader，所以我把这个改成了

function createRaindropMaterial() {
  class RaindropMaterial extends MaterialFromShader(
    new Shader(raindropVert, raindropFrag, {
      blendRGB: [Blending.OneMinusDstColor, Blending.OneMinusSrcColor],
      depth: DepthTest.Disable,
      zWrite: false,
      attributes: {
        size: "aSize",
        modelMatrix: "aModelMatrix",
      },
    })
  ) {
    @shaderProp("uMainTex", "tex2d")
    texture: Texture | null = null;

    @shaderProp("uSize", "float")
    size = 0;
  }

  return new RaindropMaterial();
}

然后其他有关new Shader的没改，其他的部分好像渲染不正确 XD

这个新的PR，Vite打包也是会'default' is not exported by xxx的，只能从源码打包，这个感觉应该是Vite的问题。

源码打包得把引用部分glsl的文件名后面加 ?raw，表示引入纯字符串，类似
import raindropVert from "./shader/raindrop-vert.glsl?raw";
，png图片只能引入url，所以我把

     this.raindropTex = await TextureImporter.buffer(raindropTexture).then((t) =>
       t.tex2d()
     );

改成了

    this.raindropTex = await TextureImporter.url(raindropTexture).then((t) =>
      t.tex2d()
    );

[SardineFish]

export 的问题可能是因为我是写成了 export = RaindropFX，已经改成 export default RaindropFX 了

[SardineFish]

之前写成 export = RaindropFX 是为了适配 esbuild 构建 browser bundle 的时候能够导出到 global，现在把 browser 的 entry 和 node 的 entry 分开了

[Aobanana-chan]

我之前试过改成export default RaindropFX，也是没用的，所以我估计这个是Vite的问题，甚至试过了export class RaindropFX{...}，打包都会出现问题，只能从src里打包

[SardineFish]

从源码打包或许可以用 vite-plugin-plain-text 将 shader 导入成 plain text

[SardineFish]

或许是你的 module resolution 配置的是 esm 模式？

[Aobanana-chan]

OK ！ 刚刚测试通过了。辛苦大佬了。
vite简介上写的Vite 以 原生 ESM 方式提供源码，估计是只有esm模式。不过Vite提供了原生的读入字符串的?raw模式，用不到vite-plugin-plain-text这个插件，后面加raw就是字符串了，唯一的问题就是那个png图片比较麻烦，不过改成url模式，Vite也会自己解决依赖，缺点就是会请求两次，一次js，一次图片。XD

[SardineFish]

esm 的问题或许也可以直接把 build/build-node.js 里改成，构建 esm 模式的包

require("esbuild").build({
    entryPoints: [
        "./src/index.ts"
    ],
    bundle: true,
    loader: {
        ".png": "binary",
        ".jpg": "binary",
        ".glsl": "text",
    },
    minify: !dev,
    watch: watch,
    sourcemap: true,
    outdir: "./dist",
    platform: "node",
    format: "esm",
})

[Aobanana-chan]

可以，有效！
感谢！

[SardineFish]

我在 PR 里增加了 package.json 里同时导出 esm 和 cjs 两种格式，应该可以直接引用这个 package 无需做任何修改了，能麻烦有空帮忙测试一下么，如果可以我就更新到 npm 上了

[Aobanana-chan]

打包失败了。

[commonjs--resolver] Missing "./dist/index" export in "raindrop-fx" package
error during build:
Error: Missing "./dist/index" export in "raindrop-fx" package

[SardineFish]