微信小程序createVKSession崩溃WebGLRenderer

SunXinFei commented 2 years ago

https://developers.weixin.qq.com/s/P6cQcCmK7QvS 官方VK的demo 如果替换成three-platformize，用three-platformize的WebGLRenderer或者WebGL1Renderer函数渲染，打开小程序会瞬间崩溃

deepkolos commented 2 years ago

@SunXinFei 有走rollup构建么 WebGLRenderer是用了webgl2的api, 只能用WebGL1Renderer

SunXinFei commented 2 years ago

WebGL1Renderer @deepkolos

嗯 WebGL1Renderer放在VK的demo里面会崩溃，而用threejs-miniprogram可以正常运行

最新结论见最新评论，threejs-miniprogram是108版本，而使用118以上版本虽然显性使用了WebGL1Renderer，但是仍然会导致闪崩

deepkolos commented 2 years ago

@SunXinFei 有接入three-platformize的VK报错的代码片段么

SunXinFei commented 2 years ago

@SunXinFei 有接入three-platformize的VK报错的代码片段么

@deepkolos 抱歉，没有，不过现象特别明显：官方提供的VKdemo随便一个几何体在我们的WebGL1Renderer瞬间崩溃，

deepkolos commented 2 years ago

@SunXinFei 那你是怎么测试😂, 把你测试的demo发个代码片段不就行了?

SunXinFei commented 2 years ago

@SunXinFei 那你是怎么测试😂, 把你测试的demo发个代码片段不就行了? @deepkolos 代码在这里=>>>>> index的副本.ts.txt 代码在这里=>>>>> 我根据你的这个项目，写个demo，可以看到如果有任意几何体，瞬间崩溃

https://developers.weixin.qq.com/s/P6cQcCmK7QvS而官方这个很稳定

deepkolos commented 2 years ago

我这边安卓测试没崩 @SunXinFei 很稳定, 看到的是一个蓝色的片

可以确认下矩阵求逆的写法是否是对的, 新版three和老的有区别

SunXinFei commented 2 years ago

我这边安卓测试没崩 @SunXinFei 很稳定, 看到的是一个蓝色的片

可以确认下矩阵求逆的写法是否是对的, 新版three和老的有区别

@deepkolos 我是iphone12 可以试一下IOS，过10秒多必崩，矩阵求逆老的是 this.camera.matrixWorld.getInverse(this.camera.matrixWorldInverse) 新的用的是 this.camera.matrixWorld.copy(this.camera.matrixWorldInverse).invert()

@deepkolos 嗯安卓确实不会崩，但是IOS确实崩

SunXinFei commented 2 years ago

最新调查结果：闪崩原因跟官方的着色器代码有关，但是108版本的three是运行正常的，118之后虽然用WebGL1Renderer，但是仍然会闪崩

this.renderer = new WebGL1Renderer({ antialias: true, alpha: true })
renderGL(frame) {
    const gl = this.renderer.getContext()
    const { yTexture, uvTexture } = frame.getCameraTexture(gl, 'yuv')
    const displayTransform = frame.getDisplayTransform()
    if (yTexture && uvTexture) {
      const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM)
      const currentTexture = gl.getParameter(gl.ACTIVE_TEXTURE)
      gl.useProgram(this._program)
      const posAttr = gl.getAttribLocation(this._program, 'a_position')
      const pos = gl.createBuffer()
      gl.bindBuffer(gl.ARRAY_BUFFER, pos)
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1, 1, -1, 1, 1, -1, -1, -1]), gl.STATIC_DRAW)
      gl.vertexAttribPointer(posAttr, 2, gl.FLOAT, false, 0, 0)
      gl.enableVertexAttribArray(posAttr)
      const texcoordAttr = gl.getAttribLocation(this._program, 'a_texCoord')
      const texcoord = gl.createBuffer()
      gl.bindBuffer(gl.ARRAY_BUFFER, texcoord)
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1, 1, 0, 1, 1, 0, 0, 0]), gl.STATIC_DRAW)
      gl.vertexAttribPointer(texcoordAttr, 2, gl.FLOAT, false, 0, 0)
      gl.enableVertexAttribArray(texcoordAttr)
      const dt = gl.getUniformLocation(this._program, 'displayTransform')
      gl.uniformMatrix3fv(dt, false, displayTransform)

      gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1)

      gl.activeTexture(gl.TEXTURE0 + 5)
      gl.bindTexture(gl.TEXTURE_2D, yTexture)

      gl.activeTexture(gl.TEXTURE0 + 6)
      gl.bindTexture(gl.TEXTURE_2D, uvTexture)

      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)

      gl.useProgram(currentProgram)
      gl.activeTexture(currentTexture)
    }
  }

z0y1 commented 2 years ago

gl.createBuffer gl.bufferData 这能放到渲染循环里面搞？

mydaoyuan commented 1 year ago

@SunXinFei 那你是怎么测试😂, 把你测试的demo发个代码片段不就行了? @deepkolos 代码在这里=>>>>> index的副本.ts.txt 代码在这里=>>>>> 我根据你的这个项目，写个demo，可以看到如果有任意几何体，瞬间崩溃

https://developers.weixin.qq.com/s/P6cQcCmK7QvS而官方这个很稳定

使用了 threejs 109 的 rollup 配置打包 threejs 108 的版本，但是demo 还是白屏。使用的安卓，微信版本 8.0.30

SunXinFei commented 1 year ago

最后在2022年3月份用的threejs-miniprogram实现的微信小程序AR

mydaoyuan commented 1 year ago

最后在2022年3月份用的threejs-miniprogram实现的微信小程序AR

请问在threejs-miniprogram + VKSession里，存在带贴图的 glft 模型加载后穿模一样，展示不正常吗？就像设置了材质的 side属性一样，但是不在 VKSession 就是正常展示的

SunXinFei commented 1 year ago

最后在2022年3月份用的threejs-miniprogram实现的微信小程序AR

请问在threejs-miniprogram + VKSession里，存在带贴图的 glft 模型加载后穿模一样，展示不正常吗？就像设置了材质的 side属性一样，但是不在 VKSession 就是正常展示的

穿模问题，当时遇到了一次，是不是你改了renderGL(frame)，里面的深度检测不要关 // 解决穿模问题 gl.enable(gl.DEPTH_TEST);

mydaoyuan commented 1 year ago

最后在2022年3月份用的threejs-miniprogram实现的微信小程序AR

请问在threejs-miniprogram + VKSession里，存在带贴图的 glft 模型加载后穿模一样，展示不正常吗？就像设置了材质的 side属性一样，但是不在 VKSession 就是正常展示的

穿模问题，当时遇到了一次，是不是你改了renderGL(frame)，里面的深度检测不要关 // 解决穿模问题 gl.enable(gl.DEPTH_TEST);

谢谢大佬指点💐，我使用的是官方提供的，确实是关闭了深度检测。开启后就正常了。不过这又引来了另外的问题。

小米10机器上，发现上屏的摄像头数据有问题，大约 1/4的区域有闪动的黑块。iOS 是正常的。
动态修改模型大小、位置后，会有一定概率黑模。

https://github.com/wechat-miniprogram/threejs-miniprogram/issues/15#issuecomment-1327152476

不知道大佬你说的「让threejs-miniprogram和three-platformize的gltfloader结合一起」的方案有没有这个问题🤯。

在加载模型上，我使用 blender gltf 分离导出后，使用gltf文件，贴图文件和 bin 文件，在 threejs-miniprogram 可以加载 gltf 文件了。不知道修改后的 gltfloader 会有这些问题吗？如果没有的话我也走你的方案😂

mydaoyuan commented 1 year ago

最后在2022年3月份用的threejs-miniprogram实现的微信小程序AR

请问在threejs-miniprogram + VKSession里，存在带贴图的 glft 模型加载后穿模一样，展示不正常吗？就像设置了材质的 side属性一样，但是不在 VKSession 就是正常展示的

穿模问题，当时遇到了一次，是不是你改了renderGL(frame)，里面的深度检测不要关 // 解决穿模问题 gl.enable(gl.DEPTH_TEST);

谢谢大佬指点💐，我使用的是官方提供的，确实是关闭了深度检测。开启后就正常了。不过这又引来了另外的问题。

小米10机器上，发现上屏的摄像头数据有问题，大约 1/4的区域有闪动的黑块。iOS 是正常的。

动态修改模型大小、位置后，会有一定概率黑模。

wechat-miniprogram/threejs-miniprogram#15 (comment)

不知道大佬你说的「让threejs-miniprogram和three-platformize的gltfloader结合一起」的方案有没有这个问题🤯。

在加载模型上，我使用 blender gltf 分离导出后，使用gltf文件，贴图文件和 bin 文件，在 threejs-miniprogram 可以加载 gltf 文件了。不知道修改后的 gltfloader 会有这些问题吗？如果没有的话我也走你的方案😂

黑块问题解决了，把顶点着色器的代码修改一下 gl_Position = vec4(p, 1); 修改为 gl_Position = vec4(p.x, p.y, -1, 1);

SunXinFei commented 1 year ago

我的方案没有黑模问题，其他方案试了很多，如果用其他方案都有概率出现贴图丢失问题，导致黒模。 gltf模型可以用分离文件，整个glb的文件也可以，但是不要自己用网页编辑器去换贴图纹理，也可能导致纹理展开问题导致黒模。

mydaoyuan commented 1 year ago

我的方案没有黑模问题，其他方案试了很多，如果用其他方案都有概率出现贴图丢失问题，导致黒模。 gltf模型可以用分离文件，整个glb的文件也可以，但是不要自己用网页编辑器去换贴图纹理，也可能导致纹理展开问题导致黒模。

定位到问题了。是因为模型的问题，我更换模型后没有复现了。小程序的bug总是奇奇怪怪的0 0

HJ-Hao commented 1 year ago

最新调查结果：闪崩原因跟官方的着色器代码有关，但是108版本的three是运行正常的，118之后虽然用WebGL1Renderer，但是仍然会闪崩

this.renderer = new WebGL1Renderer({ antialias: true, alpha: true })
renderGL(frame) {
    const gl = this.renderer.getContext()
    const { yTexture, uvTexture } = frame.getCameraTexture(gl, 'yuv')
    const displayTransform = frame.getDisplayTransform()
    if (yTexture && uvTexture) {
      const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM)
      const currentTexture = gl.getParameter(gl.ACTIVE_TEXTURE)
      gl.useProgram(this._program)
      const posAttr = gl.getAttribLocation(this._program, 'a_position')
      const pos = gl.createBuffer()
      gl.bindBuffer(gl.ARRAY_BUFFER, pos)
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1, 1, -1, 1, 1, -1, -1, -1]), gl.STATIC_DRAW)
      gl.vertexAttribPointer(posAttr, 2, gl.FLOAT, false, 0, 0)
      gl.enableVertexAttribArray(posAttr)
      const texcoordAttr = gl.getAttribLocation(this._program, 'a_texCoord')
      const texcoord = gl.createBuffer()
      gl.bindBuffer(gl.ARRAY_BUFFER, texcoord)
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1, 1, 0, 1, 1, 0, 0, 0]), gl.STATIC_DRAW)
      gl.vertexAttribPointer(texcoordAttr, 2, gl.FLOAT, false, 0, 0)
      gl.enableVertexAttribArray(texcoordAttr)
      const dt = gl.getUniformLocation(this._program, 'displayTransform')
      gl.uniformMatrix3fv(dt, false, displayTransform)

      gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1)

      gl.activeTexture(gl.TEXTURE0 + 5)
      gl.bindTexture(gl.TEXTURE_2D, yTexture)

      gl.activeTexture(gl.TEXTURE0 + 6)
      gl.bindTexture(gl.TEXTURE_2D, uvTexture)

      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)

      gl.useProgram(currentProgram)
      gl.activeTexture(currentTexture)
    }
  }

想问下大佬这个着色器的问题怎么解决呢，我目前也遇到这个问题，VKSession模型加入场景后闪退

HJ-Hao commented 1 year ago

最后在2022年3月份用的threejs-miniprogram实现的微信小程序AR

如果用threejs-miniprogram实现，我这边加载glb模型动画信息会出错，检查了是gltf-loader的问题，想更新成three-platform渲染却遇到了闪退问题，想知道这个闪退问题有没有解决方案呢？

SunXinFei commented 1 year ago

最后在2022年3月份用的threejs-miniprogram实现的微信小程序AR

如果用threejs-miniprogram实现，我这边加载glb模型动画信息会出错，检查了是gltf-loader的问题，想更新成three-platform渲染却遇到了闪退问题，想知道这个闪退问题有没有解决方案呢？

用three-platform的gltf-loader配合threejs-miniprogram

HJ-Hao commented 1 year ago

最后在2022年3月份用的threejs-miniprogram实现的微信小程序AR

如果用threejs-miniprogram实现，我这边加载glb模型动画信息会出错，检查了是gltf-loader的问题，想更新成three-platform渲染却遇到了闪退问题，想知道这个闪退问题有没有解决方案呢？

用three-platform的gltf-loader配合threejs-miniprogram

嗯嗯感谢回答，目前还是直接用three-platform解决的，测试过新版的官方着色器代码是ok的不会出现闪退问题

SunXinFei commented 1 year ago

https://github.com/SunXinFei/wx-3d-ar-viewer 把去年做的小程序AR相关的探索，做了下开源，解决AR中各种问题

deepkolos / three-platformize