微信小程序createVKSession崩溃WebGLRenderer #25

SunXinFei · 2021-12-17T06:04:31Z

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

deepkolos · 2021-12-17T07:35:49Z

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

SunXinFei · 2021-12-17T08:04:08Z

WebGL1Renderer
@deepkolos

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

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

deepkolos · 2021-12-17T08:25:04Z

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

SunXinFei · 2021-12-17T17:12:31Z

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

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

deepkolos · 2021-12-19T02:12:54Z

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

SunXinFei · 2021-12-19T04:41:26Z

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

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

deepkolos · 2021-12-19T11:16:30Z

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

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

SunXinFei · 2021-12-20T02:46:04Z

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

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

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

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

SunXinFei · 2022-03-10T08:02:08Z

最新调查结果：
闪崩原因跟官方的着色器代码有关，但是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 · 2022-05-11T16:44:19Z

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

mydaoyuan · 2022-11-24T04:27:45Z

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

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

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

SunXinFei · 2022-11-25T06:23:45Z

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

mydaoyuan · 2022-11-25T07:44:48Z

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

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

SunXinFei · 2022-11-25T08:38:03Z

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

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

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

mydaoyuan · 2022-11-25T12:38:10Z

最后在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 会有这些问题吗？如果没有的话我也走你的方案😂

mydaoyuan · 2022-11-27T04:22:09Z

最后在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 · 2022-11-29T02:25:13Z

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

mydaoyuan · 2022-11-29T02:28:15Z

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

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

HJ-Hao · 2022-12-23T04:23:39Z

最新调查结果：闪崩原因跟官方的着色器代码有关，但是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 · 2022-12-23T09:06:27Z

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

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

SunXinFei · 2022-12-29T12:21:19Z

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

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

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

HJ-Hao · 2022-12-29T12:32:04Z

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

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

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

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

SunXinFei · 2023-06-25T15:28:33Z

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

微信小程序createVKSession崩溃WebGLRenderer #25

微信小程序createVKSession崩溃WebGLRenderer #25

SunXinFei commented Dec 17, 2021

deepkolos commented Dec 17, 2021 •

edited

Loading

SunXinFei commented Dec 17, 2021 •

edited

Loading

deepkolos commented Dec 17, 2021

SunXinFei commented Dec 17, 2021

deepkolos commented Dec 19, 2021

SunXinFei commented Dec 19, 2021 •

edited

Loading

deepkolos commented Dec 19, 2021 •

edited

Loading

SunXinFei commented Dec 20, 2021 •

edited

Loading

SunXinFei commented Mar 10, 2022

z0y1 commented May 11, 2022

mydaoyuan commented Nov 24, 2022 •

edited

Loading

SunXinFei commented Nov 25, 2022 •

edited

Loading

mydaoyuan commented Nov 25, 2022

SunXinFei commented Nov 25, 2022

mydaoyuan commented Nov 25, 2022

mydaoyuan commented Nov 27, 2022

SunXinFei commented Nov 29, 2022

mydaoyuan commented Nov 29, 2022

HJ-Hao commented Dec 23, 2022

HJ-Hao commented Dec 23, 2022

SunXinFei commented Dec 29, 2022

HJ-Hao commented Dec 29, 2022

SunXinFei commented Jun 25, 2023 •

edited

Loading

微信小程序createVKSession崩溃WebGLRenderer #25

微信小程序createVKSession崩溃WebGLRenderer #25

Comments

SunXinFei commented Dec 17, 2021

deepkolos commented Dec 17, 2021 • edited Loading

SunXinFei commented Dec 17, 2021 • edited Loading

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

deepkolos commented Dec 17, 2021

SunXinFei commented Dec 17, 2021

deepkolos commented Dec 19, 2021

SunXinFei commented Dec 19, 2021 • edited Loading

deepkolos commented Dec 19, 2021 • edited Loading

SunXinFei commented Dec 20, 2021 • edited Loading

SunXinFei commented Mar 10, 2022

z0y1 commented May 11, 2022

mydaoyuan commented Nov 24, 2022 • edited Loading

SunXinFei commented Nov 25, 2022 • edited Loading

mydaoyuan commented Nov 25, 2022

SunXinFei commented Nov 25, 2022

mydaoyuan commented Nov 25, 2022

mydaoyuan commented Nov 27, 2022

SunXinFei commented Nov 29, 2022

mydaoyuan commented Nov 29, 2022

HJ-Hao commented Dec 23, 2022

HJ-Hao commented Dec 23, 2022

SunXinFei commented Dec 29, 2022

HJ-Hao commented Dec 29, 2022

SunXinFei commented Jun 25, 2023 • edited Loading

deepkolos commented Dec 17, 2021 •

edited

Loading

SunXinFei commented Dec 17, 2021 •

edited

Loading

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

SunXinFei commented Dec 19, 2021 •

edited

Loading

deepkolos commented Dec 19, 2021 •

edited

Loading

SunXinFei commented Dec 20, 2021 •

edited

Loading

mydaoyuan commented Nov 24, 2022 •

edited

Loading

SunXinFei commented Nov 25, 2022 •

edited

Loading

SunXinFei commented Jun 25, 2023 •

edited

Loading