问题模块 框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
客户端 小游戏 Bug Android 7.1.2 红米4 6.7.3

- 当前 Bug 的表现（可附上截图）


使用webgl渲染时，调用 gl.uniform3fv, gl.uniform4fv 等接口设置shader参数时发现以下问题：
以 gl.uniform3fv(dest, v) 为例，如果 v = Float32Array([1,2,3]).subarray(1,2) ，即输入的参数是一个byteoffset != 0 的TypeArray，那么实际运行时该参数的设置结果是错误的，导致游戏显示出现各种问题。


- 预期表现


- 复现路径


我们还试过华为，三星的多款Android的手机，均有这个问题。




- 提供一个最简复现 Demo


测试代码：
let ctx = canvas.getContext('webgl')
let HEAP32 = new Int32Array(1024 * 1024 * 8)
let global_time = 0;
var aspectRatio;
var vertexArray;
var vertexBuffer;
var vertexNumComponents;
var vertexCount;
var uScalingFactor;
var uGlobalColor;
var uRotationVector;
var aVertexPosition;
var previousTime = 0.0;
var degreesPerSecond = 90.0;
var HEAP = new Float32Array(16);
var currentRotation = 8;
var currentScale = 10;
var currentAngle = 0;
var shaderProgram = null;
var rotationRate = 0;


function compileShader(code, type) {
let gl = ctx;
var shader = gl.createShader(type);
gl.shaderSource(shader, code);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.log(`Error compiling ${type === gl.VERTEX_SHADER ? "vertex" : "fragment"} shader:`);
console.log(gl.getShaderInfoLog(shader));
}
return shader;
}



function animateScene() {
let gl = ctx;
gl.viewport(0, 0, 320, 528);
gl.clearColor(0.8, 0.9, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
var radians = currentAngle * Math.PI / 180.0;
HEAP[currentRotation] = Math.sin(radians);
HEAP[currentRotation + 1] = Math.cos(radians);
gl.useProgram(shaderProgram);
uScalingFactor = gl.getUniformLocation(shaderProgram, "uScalingFactor");
uGlobalColor = gl.getUniformLocation(shaderProgram, "uGlobalColor");
uRotationVector = gl.getUniformLocation(shaderProgram, "uRotationVector");
gl.uniform2fv(uScalingFactor, HEAP.subarray(currentScale, currentScale + 2));
gl.uniform2fv(uRotationVector, HEAP.subarray(currentRotation, currentRotation + 2));
var rot = gl.getUniform(shaderProgram, uRotationVector);


if (rot[0] != HEAP[currentRotation] || rot[1] != HEAP[currentRotation + 1])
console.log("buggy");
else
console.log("ok");


gl.uniform4fv(uGlobalColor, [0.1, 0.7, 0.2, 1.0]);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
aVertexPosition = gl.getAttribLocation(shaderProgram, "aVertexPosition");


gl.enableVertexAttribArray(aVertexPosition);
gl.vertexAttribPointer(aVertexPosition, vertexNumComponents, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLES, 0, vertexCount);
window.requestAnimationFrame(function (currentTime) {
var deltaAngle = ((currentTime - previousTime) / 1000.0) * degreesPerSecond;
currentAngle = (currentAngle + deltaAngle) % 360;
previousTime = currentTime;
animateScene();
});
}


/**
* 游戏主函数
*/
export default class Main {
constructor() {
// 维护当前requestAnimationFrame的id
this.aniId = 0


console.log("start !!!!!")


this.startup();
}


startup() {
let gl = ctx;
var shaderSet = [
{
type: gl.VERTEX_SHADER,
code: "attribute vec2 aVertexPosition;" +
"uniform vec2 uScalingFactor;" +
"uniform vec2 uRotationVector;" +
"void main() {" +
"vec2 rotatedPosition = vec2(aVertexPosition.x * uRotationVector.y + aVertexPosition.y * uRotationVector.x," +
"aVertexPosition.y * uRotationVector.y - aVertexPosition.x * uRotationVector.x);" +
"gl_Position = vec4(rotatedPosition * uScalingFactor, 0.0, 1.0);" +
"}"
},
{
type: gl.FRAGMENT_SHADER,
code: "precision highp float;" +
"uniform vec4 uGlobalColor;" +
"void main() { gl_FragColor = uGlobalColor; }"
}
];
shaderProgram = this.buildShaderProgram(shaderSet);
aspectRatio = 320 / 528;
HEAP[currentRotation] = 0;
HEAP[currentRotation + 1] = 1;
HEAP[currentScale] = 1;
HEAP[currentScale + 1] = aspectRatio;
vertexArray = new Float32Array([
-0.5, 0.5, 0.5, 0.5, 0.5, -0.5,
-0.5, 0.5, 0.5, -0.5, -0.5, -0.5
]);
vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexArray, gl.STATIC_DRAW);
vertexNumComponents = 2;
vertexCount = vertexArray.length / vertexNumComponents;
currentAngle = 0.0;
rotationRate = 6;
animateScene();
}


buildShaderProgram(shaderInfo) {
let gl = ctx;
var program = gl.createProgram();
shaderInfo.forEach(function (desc) {
var shader = compileShader(desc.code, desc.type);
if (shader) gl.attachShader(program, shader);
});
gl.linkProgram(program)
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {