Javascript 微信（WebGL）小游戏不在设备上运行，但在devtool中运行 我想做什么

我正在尝试将我自己的基于WebGL的引擎移植到微信小游戏环境中，目前正在尝试使用粉色清除WebGL上下文：

有什么问题吗 我遵循了腾讯提供的示例以及关于如何设置游戏项目的ThreeJS示例。它在微信开发者工具中工作得很好（如上图所示），但是当我尝试在我的设备（Android手机）上打开它时，它被卡在100%加载屏幕上：

它保持这样大约1分钟，然后显示黑屏

我的代码 我的代码中没有资源加载。 下面是我的

main.js

中的内容：

var ctx=canvas.getContext（'webgl'{
反别名：是的，
深度：没错，
preserveDrawingBuffer:true
});
视口（0,0，ctx.canvas.width，ctx.canvas.height）
ctx.colorMask（真，真，真，真）
ctx.depthMask（真）
ctx.enable（ctx.BLEND）
ctx.blendFunc（ctx.SRC_ALPHA，ctx.ONE_减去SRC_ALPHA）
ctx.clearColor（1.0,0.0,1.0,1.0）
导出默认类主{
构造函数（）{
window.requestAnimationFrame（this.loop.bind（this），画布）
}
render（）{
ctx.clear（ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT）
}
更新（）{
}
循环（）{
this.update（）
this.render（）
window.requestAnimationFrame（this.loop.bind（this），画布）
}
}

我的

game.js也很简单：

import./weapp适配器/index.js'
导入“./symbol”
从“/js/Main”导入Main
新的Main（）

My
game.json
仅包含以下内容：

{
    "deviceOrientation": "portrait"
}

附加信息
我还注意到，当我在render函数中尝试Threejs示例（在设备上工作）和注释行时，它的行为也会相同（陷入100%加载）。
解决方案
我终于想出了解决办法：

当我将WebGL上下文初始化放在动画帧的第一个调用中，而实际渲染在所有其他调用中完成时，它在我的Android设备上按预期工作。这里是
main.js
我已更改：

导出默认类Main{
构造函数（）{
this.render=this.render_
requestAnimationFrame（（）=>this.animate（））
}
showmsg（t，c）{
wx.showmodel({
标题：“+t，
内容：“+c，
showCancel:false，
确认文本：'确定'，
成功：函数（res）{}
});
}
制作动画（）{
这个。render（）；
requestAnimationFrame（（）=>this.animate（））
}
先渲染_（）{
this.render=this.render\u normal
var_this=这个
this.domeElement=画布
var contextAttributes={
阿尔法：错，
深度：没错，
模板：假，
反别名：假
}
this.doElement.addEventListener（“webglcontextlost”，函数（e）{
_this.showmsg（“WebGL”，“上下文丢失”）；
}，错）
this.doElement.addEventListener（“webglcontextrestored”，函数（e）{
_this.showmsg（“WebGL”，“上下文恢复”）；
}，错）
this._gl=this.domeElement.getContext（'webgl'，contextAttributes）| this.domeElement.getContext（'experimental webgl'，contextAttributes）
var _gl=这个。_gl
var vsrc=“”
vsrc+=“统一mat4 uModelView；”
vsrc+=“统一mat4视图；”
vsrc+=“属性highp vec4位置；”
vsrc+=“无效主（无效）{”
vsrc+=“总图位置=（视图*模型视图）*位置；”
vsrc+=“}”
var vid=_gl.createShader（_gl.VERTEX_SHADER）
_总账着色器源（vid、vsrc）
_总帐编辑主管（vid）
if（！\u总账getShaderParameter（参见，总账编译状态））{
console.error（“顶点着色器失败：”，_gl.getShaderInfoLog（vid））
}
这个
var fsrc=“”
fsrc+=“无效主（无效）{”
fsrc+=“gl_FragColor=vec4（1.0,1.0,0.0,1.0）；”
fsrc+=“}”
var fid=\u gl.createShader（\u gl.FRAGMENT\u SHADER）
_总账着色器源（fid、fsrc）
_总帐编译主管（fid）
if（！\u总账getShaderParameter（fid，\u总账编译状态））{
console.error（“片段着色器失败：”，_gl.getShaderInfoLog（fid））
}
这是.\u fid=fid
var pid=_gl.createProgram（）
_总承包商附件（pid，vid）
_总承包商附件（pid、fid）
_总账链接程序（pid）
if（！\u总账getProgramParameter（pid、\u总账链接\u状态））{
let info=\u gl.getProgramInfoLog（pid）
控制台。错误（“程序链接失败：”，信息）
}
_总账使用程序（pid）
这个
变量位置=_gl.getAttribLocation（pid，“位置”）
变量uModelView=_gl.getUniformLocation（pid，“uModelView”）
var uProjView=_gl.getUniformLocation（pid，“uProjView”）
_gl.uniformMatrix4fv（uModelView，false，[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]）
_gl.uniformMatrix4fv（uProjView，false，[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,1]）
this.uni=[uModelView，uProjView]
本阶段=0.0
var数据=[0,0,0,1,0,0,0,1,0]
var idata=[0,1,2]
var vbID=_gl.createBuffer（）
_gl.bindBuffer（_gl.ARRAY_BUFFER，vbID）
_总账缓冲区数据（总账数组缓冲区、新Float32Array（数据）、总账静态绘图）
var vbiID=_gl.createBuffer（）；
_gl.bindBuffer（_gl.ELEMENT_ARRAY_BUFFER，vbiID）
_gl.bufferData（_gl.ELEMENT_ARRAY_BUFFER，新UINT16阵列（idata），_gl.STATIC_DRAW）
_总账VertexAttributePointer（位置，3，浮点，假，0，0）
_gl.EnableVertexAttributeArray（位置）
_gl.bindBuffer（_gl.ELEMENT_ARRAY_BUFFER，vbiID）
this.vb=[vbID，vbiID]
_gl.clearColor（1.0,0.0,1.0,1.0）
}
渲染_法线（）{
var _gl=这个。_gl
变量et=60.0/1000.0
此相位+=180.0*60.0/1000.0
var py=Math.sin（本阶段*Math.PI/180.0）*0.5
_gl.uniformMatrix4fv（此.uni[0]，假[1,0,0,0,0,1,0,0,0,0,1,0，py，0,0,1]）
_总账清除（\u总账颜色\u缓冲\u位）
_总图抽屉元素（_gl.三角形，3，_gl.无符号_.短，0）
}
}

出了什么问题
在实际设备上，微信小游戏似乎在一个单独的线程中运行动画循环，而不是在主JavaScript执行中运行。由于WebGL（OpenGL）上下文只能通过