Fix element buffer read error (#1950)

* fix: buffer read error

e2e/case/material-blinn-phong.ts

@@ -36,8 +36,6 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
   light1.addComponent(DirectLight);
   light2.addComponent(DirectLight);
 
-  engine.run();
-
   engine.resourceManager
     .load([
       {

e2e/case/material-pbr-clearcoat.ts

@@ -5,13 +5,10 @@
 import {
   AmbientLight,
   AssetType,
-  BackgroundMode,
   Camera,
   DirectLight,
   GLTFResource,
   Logger,
-  PrimitiveMesh,
-  SkyBoxMaterial,
   Vector3,
   WebGLEngine
 } from "@galacean/engine";
@@ -37,14 +34,6 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
   cameraNode.transform.lookAt(new Vector3());
   const camera = cameraNode.addComponent(Camera);
 
-  // Create sky
-  const sky = background.sky;
-  const skyMaterial = new SkyBoxMaterial(engine);
-  background.mode = BackgroundMode.Sky;
-
-  sky.material = skyMaterial;
-  sky.mesh = PrimitiveMesh.createCuboid(engine, 1, 1, 1);
-
   Promise.all([
     engine.resourceManager
       .load<GLTFResource>("https://gw.alipayobjects.com/os/bmw-prod/16875768-21cf-481f-b05f-454c17866ba0.glb")
@@ -60,11 +49,8 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
       })
       .then((ambientLight) => {
         scene.ambientLight = ambientLight;
-        skyMaterial.texture = ambientLight.specularTexture;
-        skyMaterial.textureDecodeRGBM = true;
       })
   ]).then(() => {
-    engine.run();
     updateForE2E(engine);
     const category = "Material";
     const name = "material-pbr-clearcoat";

e2e/case/material-pbr.ts

@@ -2,18 +2,7 @@
  * @title PBR Base
  * @category Material
  */
-import {
-  AmbientLight,
-  AssetType,
-  BackgroundMode,
-  Camera,
-  DirectLight,
-  GLTFResource,
-  PrimitiveMesh,
-  SkyBoxMaterial,
-  Vector3,
-  WebGLEngine
-} from "@galacean/engine";
+import { AmbientLight, AssetType, Camera, DirectLight, GLTFResource, Vector3, WebGLEngine } from "@galacean/engine";
 import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 // Create engine
@@ -31,23 +20,15 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
 
   //Create camera
   const cameraNode = rootEntity.createChild("camera_node");
-  cameraNode.transform.position = new Vector3(0.25, 0.25, 1.5);
+  cameraNode.transform.position = new Vector3(0, 5, 20);
   const camera = cameraNode.addComponent(Camera);
 
-  // Create sky
-  const sky = scene.background.sky;
-  const skyMaterial = new SkyBoxMaterial(engine);
-  scene.background.mode = BackgroundMode.Sky;
-  sky.material = skyMaterial;
-  sky.mesh = PrimitiveMesh.createCuboid(engine, 1, 1, 1);
-
   Promise.all([
     engine.resourceManager
-      .load<GLTFResource>("https://gw.alipayobjects.com/os/bmw-prod/477b0093-7ee8-41af-a0dd-836608a4f130.gltf")
+      .load<GLTFResource>("https://gw.alipayobjects.com/os/bmw-prod/7c7b887c-05d6-43dd-b354-216e738e81ed.gltf")
       .then((gltf) => {
         const { defaultSceneRoot } = gltf;
         rootEntity.addChild(defaultSceneRoot);
-        defaultSceneRoot.transform.setScale(100, 100, 100);
       }),
     engine.resourceManager
       .load<AmbientLight>({
@@ -56,8 +37,6 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
       })
       .then((ambientLight) => {
         scene.ambientLight = ambientLight;
-        skyMaterial.texture = ambientLight.specularTexture;
-        skyMaterial.textureDecodeRGBM = true;
       })
   ]).then(() => {
     updateForE2E(engine);

e2e/case/material-shaderReplacement.ts

@@ -5,14 +5,11 @@
 import {
   AmbientLight,
   AssetType,
-  BackgroundMode,
   Camera,
   DirectLight,
   GLTFResource,
   Logger,
-  PrimitiveMesh,
   Shader,
-  SkyBoxMaterial,
   Texture2D,
   WebGLEngine
 } from "@galacean/engine";
@@ -48,15 +45,6 @@ async function main() {
   cameraEntity.transform.setPosition(0, 0, 5);
   const camera = cameraEntity.addComponent(Camera);
 
-  // Create sky
-  const background = scene.background;
-  background.mode = BackgroundMode.Sky;
-
-  const sky = background.sky;
-  const skyMaterial = new SkyBoxMaterial(engine);
-  sky.material = skyMaterial;
-  sky.mesh = PrimitiveMesh.createCuboid(engine, 1, 1, 1);
-
   engine.resourceManager
     .load([
       {
@@ -80,8 +68,6 @@ async function main() {
       // Add ambient light
       const ambientLight = <AmbientLight>resources[0];
       scene.ambientLight = ambientLight;
-      skyMaterial.texture = ambientLight.specularTexture;
-      skyMaterial.textureDecodeRGBM = true;
 
       // Add helmet model
       const glTFResourceHelmet = <GLTFResource>resources[1];
@@ -104,9 +90,6 @@ async function main() {
         material.shaderData.setTexture("u_UVCheckTexture", uvCheckTexture);
       }
 
-      // Run engine
-      engine.run();
-
       camera.setReplacementShader(Shader.find("UVCheckShader"));
       updateForE2E(engine);
       const category = "Material";

e2e/fixtures/originImage/Material_material-pbr-clearcoat.jpg

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8f0cca35f54459b6fd9251298502be519c5f0cfbff2a75cefc59e438d56fccaf
-size 550560
+oid sha256:da9e29bdb951cad1e643e7cf35acbaec1e84e5c5283110d3a7cee90160c8eb0f
+size 300068

e2e/fixtures/originImage/Material_material-pbr.jpg

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d223cfefecb126c57c6e3b8f27186d9c0e1ec1ad8c7bef4ae84c50879b0e7fb0
-size 543395
+oid sha256:03583e47ff99d4dee9dbadaff47eaade23d341f3c5308e8312c97c9e771fae6a
+size 161683

e2e/fixtures/originImage/Material_material-shaderReplacement.jpg

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d0ab95467be4c5e3ace5ee305e5a3dcf103ce22e251f40d9d3efc2607bcec7ba
-size 713031
+oid sha256:3811c7832d3d6ff159ceab56a6e20360ae778e8883221d501fabab66692c9788
+size 307028

e2e/support/commands.ts

@@ -42,7 +42,7 @@ Cypress.Commands.add("screenshotWithThreshold", (category, name, threshold = 0)
   cy.visit(`/mpa/${name}.html`);
   const imageName = `${category}_${name}.jpg`;
   const filePath = path.join(downloadsFolder, imageName);
-  cy.get("#screenshot")
+  cy.get("#screenshot", { timeout: 60000 })
     .click({ force: true })
     .then(() => {
       return new Promise((resolve) => {

e2e/tests/material.cy.ts

@@ -1,12 +1,12 @@
 describe("Material", () => {
-  it("PBR", () => {
-    cy.screenshotWithThreshold("Material", "material-pbr", 0.2);
-  });
-
   it("PBR Clearcoat", () => {
     cy.screenshotWithThreshold("Material", "material-pbr-clearcoat", 0.2);
   });
 
+  it("PBR", () => {
+    cy.screenshotWithThreshold("Material", "material-pbr", 0.2);
+  });
+
   it("Unlit", () => {
     cy.screenshotWithThreshold("Material", "material-unlit", 0.2);
   });

packages/core/src/graphic/Buffer.ts

@@ -115,7 +115,13 @@ export class Buffer extends GraphicsResource {
       this._byteLength = byteLength;
       this._platformBuffer = engine._hardwareRenderer.createPlatformBuffer(type, byteLength, bufferUsage, data);
       if (readable) {
-        const buffer = (data.constructor === ArrayBuffer ? data : (<ArrayBufferView>data).buffer).slice(0, byteLength);
+        const buffer =
+          data.constructor === ArrayBuffer
+            ? data.slice(0)
+            : (<ArrayBufferView>data).buffer.slice(
+                (<ArrayBufferView>data).byteOffset,
+                (<ArrayBufferView>data).byteOffset + byteLength
+              );
         this._data = new Uint8Array(buffer);
       }
     }

tests/src/core/ModelMesh.test.ts

@@ -38,7 +38,7 @@ describe("ModelMesh Test", async function () {
   let falsyTangents: Vector4[];
   let falsyWeights: Vector4[];
   let falsyJoints: Vector4[];
- before(async function () {
+  before(async function () {
     engine = await WebGLEngine.create({ canvas: document.createElement("canvas") });
     modelMesh = new ModelMesh(engine);
     positions = [new Vector3(0, 0, 0), new Vector3(0, 1, 0), new Vector3(1, 1, 0)];
@@ -245,9 +245,10 @@ describe("ModelMesh Test", async function () {
 
   it("Read the advanced vertex data of the model set by buffer", () => {
     const modelMesh = new ModelMesh(engine);
-    const arrayBuffer = new ArrayBuffer(40 * 2);
+    const arrayBuffer = new ArrayBuffer(40 * 2 + 20); // test offset 20
+    const arrayBufferView = new Uint8Array(arrayBuffer, 20);
 
-    const float32Array = new Float32Array(arrayBuffer);
+    const float32Array = new Float32Array(arrayBuffer, 20);
     (float32Array[0] = 1), (float32Array[1] = 2), (float32Array[2] = 3);
     (float32Array[3] = 1), (float32Array[4] = 1), (float32Array[5] = 1);
     (float32Array[6] = 0.5), (float32Array[7] = 0.5);
@@ -256,14 +257,14 @@ describe("ModelMesh Test", async function () {
     (float32Array[13] = 0), (float32Array[14] = -1), (float32Array[15] = 0);
     (float32Array[16] = -0.5), (float32Array[17] = -0.5);
 
-    const uint8Array = new Uint8Array(arrayBuffer);
+    const uint8Array = new Uint8Array(arrayBuffer, 20);
     (uint8Array[32] = 1), (uint8Array[33] = 2), (uint8Array[34] = 3), (uint8Array[35] = 4);
     (uint8Array[36] = 11), (uint8Array[37] = 12), (uint8Array[38] = 13), (uint8Array[39] = 14);
 
     (uint8Array[72] = 9), (uint8Array[73] = 10), (uint8Array[74] = 11), (uint8Array[75] = 12);
     (uint8Array[76] = 29), (uint8Array[77] = 55), (uint8Array[78] = 77), (uint8Array[79] = 88);
 
-    const vertexBuffer = new Buffer(engine, BufferBindFlag.VertexBuffer, arrayBuffer, BufferUsage.Static, true);
+    const vertexBuffer = new Buffer(engine, BufferBindFlag.VertexBuffer, arrayBufferView, BufferUsage.Static, true);
     modelMesh.setVertexBufferBinding(vertexBuffer, 40, 0);
     // Test Vector3、Vector2、UByte4、NormalizedUByte4 format
     modelMesh.setVertexElements([