公告列表
公告列表
收藏
回答

封面图显示报错，直接游戏流程终止？

我们游戏使用的是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")后调用。

不知道有没有大神遇见过，请指教。


回答关注问题邀请回答
收藏

1 个回答

  • 小游戏运营专员 - 宏
    小游戏运营专员 - 宏
    11-04

    请具体描述问题出现的流程，并提供能复现问题的简单代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。

    11-04
    有用
    回复
请 登录 后发表内容
相关问题
相关文档