工程是使用小游戏的第一个创建模板，纯gl模式，在game,在game.js的测试代码如下 // 请求动画帧兼容性处理

if (!wx.requestAnimationFrame) {

  wx.requestAnimationFrame = function (callback) {

    setTimeout(callback, 1000 / 60);

  };

}

// 创建画布

const canvas = wx.createCanvas();

const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");

// 顶点着色器源代码

const vertexShaderSource = `

attribute vec4 a_position;

void main() {

  gl_Position = a_position;

}

`;

// 片段着色器源代码

const fragmentShaderSource = `

precision mediump float;

void main() {

  gl_FragColor = vec4(1, 0, 0, 1);

}

`;

// 创建、编译和检查顶点着色器

const vertexShader = gl.createShader(gl.VERTEX_SHADER);

gl.shaderSource(vertexShader, vertexShaderSource);

gl.compileShader(vertexShader);

if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {

  console.error("Vertex shader compilation failed: ", gl.getShaderInfoLog(vertexShader));

}

// 创建、编译和检查片段着色器

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

gl.shaderSource(fragmentShader, fragmentShaderSource);

gl.compileShader(fragmentShader);

if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {

  console.error("Fragment shader compilation failed: ", gl.getShaderInfoLog(fragmentShader));

}

// 创建着色器程序并附加着色器

const shaderProgram = gl.createProgram();

gl.attachShader(shaderProgram, vertexShader);

gl.attachShader(shaderProgram, fragmentShader);

gl.linkProgram(shaderProgram);

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {

  console.error("Program linking failed: ", gl.getProgramInfoLog(shaderProgram));

}

// 使用着色器程序

gl.useProgram(shaderProgram);

// 设置清除颜色和视口

gl.clearColor(0, 0, 0, 1);

gl.viewport(0, 0, canvas.width, canvas.height);

// 创建包含顶点数据的缓冲区

const vertexBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

const vertices = new Float32Array([

  -0.5, -0.5,

   0.5, -0.5,

  -0.5,  0.5,

   0.5,  0.5

]);

gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// 获取顶点着色器中 a_position 属性的位置

const a_position = gl.getAttribLocation(shaderProgram, "a_position");

// 启用顶点属性数组

gl.enableVertexAttribArray(a_position);

// 将缓冲区绑定到 a_position 属性

gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);

// 绘制场景的函数

function drawScene() {

  // 清除颜色缓冲区

  gl.clear(gl.COLOR_BUFFER_BIT);

  // 绘制三角形

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

  // 请求下一帧

  wx.requestAnimationFrame(drawScene);

  console.log('drawScene');

}

// 开始绘制

drawScene();

以上是测试代码，写在game.js中，game.json内容如下 {

    "deviceOrientation": "portrait",

    "renderMode": "webgl"

}

，渲染模拟机截图，真机表现一样。