封面图显示报错,直接游戏流程终止?
我们游戏使用的是Laya引擎,3.1.0版本。开始使用文档中提供的封面图插件,公司同事有一台iphone11,用的ios14的系统,微信版本8.0.53,会黑屏。于是我们想在游戏开始的时候,使用webgl最原始的方法来渲染一张图片。结果这台机器继续黑屏,但是这次我们截取到一下错误码: (in promise) MiniProgramError _.texStorage2D is not a function. (In '_.texStorage2D(i,d,s,l,h)', '_.texStorage2D' is undefined) TypeError: _ texStorage2D is not a function. (In '_.texStorage2D(i,d,s,l,h)', '_.texStorage2D' is undefined) at setTexturePixelsData@weapp: (wxfs//js/game.js:93871:768165) at setPixelsData@weapp: (wxfs//js/game.js: 93871:44782) at Context@weapp: (wxfs//js/game.js:93871:289005) at initRender@weapp: (wxfs//js/game.js:93871:487196) at Render@weapp: (wxfs//js/game.js:93871:486064) at createRender@weapp: (wxfs//js/game.js:93871:670026) at initRender2D@weapp: (wxfs//js/game.js:93871:669152) at q@weapp: (wxcommlib/WAGameSubContext.js:1:57899) at weapp: (wxcommlib/WAGameSubContext.js:1:58125) 我在附录完整代码, (function(){ const startUpCanvas = window.canvas; // 注意,这里自动做了上下文的适配,也就打破了laya引擎的设置,所以,如果引擎应设置了要webgl1,这里就要修改 const contextName = ["webgl2", "experimental-webgl2","webgl", "experimental-webgl"] var gl = null; var playMode = "" for (var i = 0; i < contextName.length; i++) { try { gl = canvas.getContext(contextName[i], this._config); } catch (e) { } if (gl) { playMode = contextName[i]; console.log("gl:"+playMode); break; } } if(gl != null){ // 加载图片 const img = wx.createImage(); img.src = 'images/startup.jpg'; // 替换为你的图片 URL img.onload = function(){ // 图片加载完成后绘制 drawImage(gl, img); } }else{ return; } // 顶点着色器和片段着色器代码 const vertexShaderSource = ` attribute vec4 a_position; attribute vec2 a_texCoord; varying vec2 v_texCoord; void main() { gl_Position = a_position; v_texCoord = a_texCoord; } `; const fragmentShaderSource = ` precision mediump float; varying vec2 v_texCoord; uniform sampler2D u_texture; void main() { gl_FragColor = texture2D(u_texture, v_texCoord); } `; // 编译着色器 function compileShader(gl, source, type) { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS); if (!success) { console.error('Shader compilation failed:', gl.getShaderInfoLog(shader)); gl.deleteShader(shader); return null; } return shader; } // 创建着色器程序 function createShaderProgram(gl, vertexSource, fragmentSource) { const vertexShader = compileShader(gl, vertexSource, gl.VERTEX_SHADER); const fragmentShader = compileShader(gl, fragmentSource, gl.FRAGMENT_SHADER); const program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); const success = gl.getProgramParameter(program, gl.LINK_STATUS); if (!success) { console.error('Program linking failed:', gl.getProgramInfoLog(program)); gl.deleteProgram(program); return null; } return program; } // 创建着色器程序 const shaderProgram = createShaderProgram(gl, vertexShaderSource, fragmentShaderSource); function drawImage(gl, image) { const screenInfo = wx.getWindowInfo(); const scale = Math.max( screenInfo.screenWidth / image.width , screenInfo.screenHeight / image.height); const scaleX = image.width / screenInfo.screenWidth * scale; const scaleY = image.height / screenInfo.screenHeight * scale; const vertices = new Float32Array([ -scaleX, scaleY, 0.0, -scaleX, -scaleY, 0.0, scaleX, -scaleY, 0.0, scaleX, scaleY, 0.0 ]); const texCoords = new Float32Array([ 0.0, 0.0, 0.0, 1.0, 1.0, 1.0, 1.0, 0.0 ]); if(playMode === "webgl2" || playMode === "experimental-webgl2"){ drawInWebGL2(gl, image, vertices, texCoords); }else if(playMode === "webgl" || playMode === "experimental-webgl"){ drawInWebGL1(gl, image, vertices, texCoords); } } function drawInWebGL2(gl, image, vertices, texCoords){ // 创建并绑定顶点缓冲区 const vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); // 创建并绑定纹理坐标缓冲区 const texCoordBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer); gl.bufferData(gl.ARRAY_BUFFER, texCoords, gl.STATIC_DRAW); // 获取属性位置 const positionLocation = gl.getAttribLocation(shaderProgram, 'a_position'); const texCoordLocation = gl.getAttribLocation(shaderProgram, 'a_texCoord'); // 绑定顶点缓冲区 gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.enableVertexAttribArray(positionLocation); gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0); // 绑定纹理坐标缓冲区 gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer); gl.enableVertexAttribArray(texCoordLocation); gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0); const texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); gl.useProgram(shaderProgram); gl.drawArrays(gl.TRIANGLE_FAN, 0, 4); gl.bindTexture(gl.TEXTURE_2D, null); } function drawInWebGL1(gl, image, vertices, texCoords){ const vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); const texCoordBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer); gl.bufferData(gl.ARRAY_BUFFER, texCoords, gl.STATIC_DRAW); const texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); gl.generateMipmap(gl.TEXTURE_2D); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.useProgram(shaderProgram); // 绑定顶点数据 gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); const positionLocation = gl.getAttribLocation(shaderProgram, 'a_position'); gl.enableVertexAttribArray(positionLocation); gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0); // 绑定纹理坐标数据 gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer); const texCoordLocation = gl.getAttribLocation(shaderProgram, 'a_texCoord'); gl.enableVertexAttribArray(texCoordLocation); gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0); // 绑定纹理 gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, texture); const u_Sampler = gl.getUniformLocation(shaderProgram, 'u_Sampler'); gl.uniform1i(u_Sampler, 0); gl.drawArrays(gl.TRIANGLE_FAN, 0, 4); gl.bindTexture(gl.TEXTURE_2D, null); } })() 该代码在 require("weapp-adapter.js")后调用。 不知道有没有大神遇见过,请指教。