WebGL / JS: 2 Typed Arrays with different offset each use one buffer and used in gl.vertexAttribPointer() with different byte stride

If one buffer (in TypeScript - ArrayBuffer) is used by two Typed Arrays (ex. Float32Array) with different offset each and these two Typed Array each will be put in two different WebGL gl.vertexAttribPointer() methods with different byte stride parameter each - will this data (underlying buffer) duplicated (copied) twice in GPU memory or WebGL understands that this is same long block of bytes that used by different vertexAttribPointer methods?

There is an example with terminology of gltf but background is the same: will be only one copy of top block of bytes in GPU or two copies?

I can’t answer this question for WebGL in general. But since this is the glTF topic, a glTF-based client uploading each buffer view to the GPU only once is probably the best you can realistically hope for in this situation, unless you’re in full control of that code. Some clients will upload one buffer per mesh primitive, regardless of any shared buffer views. Assuming that two different glTF buffer views will upload as shared data on the GPU would be overly optimistic, for any glTF client implementation I’m aware of.

In general, glTF makes it possible to create buffer layouts that match what any particular client may require. But few clients, if any, are going to be flexible enough to support direct upload of everything glTF buffer layouts allow, without reorganizing the buffers in some cases. To fully optimize an application, you’d probably want to prepare your glTF data in a layout that matches the engine’s unique requirements, or at least ensure that all of your assets have similar layouts. See: Efficiently rendering glTF models | Toji.dev