kr translate, en typo, updated memory layout

webgpu/lessons/ko/webgpu-memory-layout.md

@@ -68,8 +68,10 @@ ourStructValuesAsF32[kAccelerationOffset] = 3.4;
 ourStructValuesAsU32[kFrameCountOffset] = 56;    // 정수값
 ```
 
+## `TypedArrays`
+
 유의할 것은, 이를 수행하기 위한 방법에는 수많은 방법이 존재한다는 겁니다.
-`TypeArray`의 생성자는 다양한 형태를 가질 수 있습니다.
+`TypedArray`의 생성자는 다양한 형태를 가질 수 있습니다.
 
 예를 들어 아래와 같습니다.
 
@@ -89,6 +91,16 @@ ourStructValuesAsU32[kFrameCountOffset] = 56;    // 정수값
    srcArray.forEach((v, i) => dstArray[i] = v);
    ```
 
+  "숫자로 복사"된다는 것은 무슨 뜻일까요? 아래 예시를 봅시다.
+
+   ```js
+   const f32s = new Float32Array([0.8, 0.9, 1.0, 1.1, 1.2]);
+   const u32s = new Uint32Array(f32s); 
+   console.log(u32s);   // produces 0, 0, 1, 1, 1
+   ```
+
+   이렇게 되는 이유는 0.8이나 1.2같은 값을 `Uint32Array`에 넣을 수 없기 때문입니다.
+
 * `new Float32Array(someArrayBuffer)`
 
    이건 저희가 이전에 사용해봤습니다. **기존에 있던 버퍼**를 보기 위한 새로운 `Float32Array` 뷰를 만듭니다.
@@ -122,10 +134,10 @@ frameCountView[0] = 56;
 
 * `length`: 요소의 개수
 * `byteLength`: 바이트 기반의 크기
-* `byteOffset`: `ArrayBuffer`에 대한 `TypeArray`의 오프셋
-* `buffer`: 이 `TypeArray`가 바라보고 있는 `ArrayBuffer`
+* `byteOffset`: `ArrayBuffer`에 대한 `TypedArray`의 오프셋
+* `buffer`: 이 `TypedArray`가 바라보고 있는 `ArrayBuffer`
 
-그리고 `TypeArray`는 여러 메서드를 갖고 있습니다.
+그리고 `TypedArray`는 여러 메서드를 갖고 있습니다.
 많은 메서드들은 `Array`에 있는 것과 유사하지만, `subarray`는 그렇지 않습니다.
 이는 동일한 타입의 새로운 `TypedArray` 뷰를 만듭니다.
 파라미터는 `subarray(begin, end)`이며, `end`는 포함되지 않습니다.
@@ -149,6 +161,50 @@ accelerationView[0] = 3.4;
 frameCountView[0] = 56;
 ```
 
+## 동일한 `ArrayBuffer`에 대한 여러 뷰
+
+**동일한 arrayBuffer**에 대해 뷰를 갖는다는 것은 이런 의미입니다. 예를 들어,
+
+```js
+const v1 = new Float32Array(5);
+const v2 = v1.subarray(3, 5);  // view the last 2 floats of v1
+v2[0] = 123;
+v2[1] = 456;
+console.log(v1);  // shows 0, 0, 0, 123, 456
+```
+
+비슷하게, 만일 다른 타입의 뷰를 만든다면 아래와 같습니다.
+
+```js
+const f32 = new Float32Array([1, 1000, -1000])
+const u32 = new Uint32Array(f32.buffer);
+
+console.log(Array.from(u32).map(v => v.toString(16).padStart(8, '0')));
+// shows '3f800000', '447a0000', 'c47a0000' 
+```
+
+위 값은 1, 1000, -1000에 대한 부동소수점의 32비트 hex(*역주: 16진수*) 표현입니다.
+
+## `map` 이슈
+
+주의해야 할 것은 `TypedArray`의 `map` 함수는 동일한 타입의 새로운 typed array를 만든다는 것입니다!
+
+```js
+const f32a = new Float32Array(1, 2, 3);
+const f32b = f32a.map(v => v * 2);                    // Ok
+const f32c = f32a.map(v => `${v} doubled = ${v *2}`); // BAD!
+                    //  you can't put a string in a Float32Array
+```
+
+typedarray를 다른 타입으로 맵핑해야 한다면 직접 배열을 순회하거나 `Array.from`를 사용할 수 있도록 자바스크립트 바열로 변환해야 합니다.
+위 예제의 경우에는 아래와 같습니다.
+
+```js
+const f32d = Array.from(f32a).map(v => `${v} doubled = ${v *2}`); // Ok
+```
+
+## vec과 mat 타입
+
 [WGSL](webgpu-wgsl.html)는 4개의 기본 타입에서 비롯된 여러 타입들을 갖고 있습니다.
 아래처럼요.
 

webgpu/lessons/webgpu-memory-layout.md

@@ -79,7 +79,7 @@ ourStructValuesAsU32[kFrameCountOffset] = 56;    // an integer value
 ## `TypedArrays`
 
 Note, like many things in programming there are multiple ways we could
-do this. `TypeArray`s have a constructor that takes various forms. For example
+do this. `TypedArray`s have a constructor that takes various forms. For example
 
 * `new Float32Array(12)`
 
@@ -149,10 +149,10 @@ Further, every `TypedArray` has the following properties
 
 * `length`: number of units
 * `byteLength`: size in bytes
-* `byteOffset`: offset in the `TypeArray`'s `ArrayBuffer`
-* `buffer`: the `ArrayBuffer` this `TypeArray` is viewing 
+* `byteOffset`: offset in the `TypedArray`'s `ArrayBuffer`
+* `buffer`: the `ArrayBuffer` this `TypedArray` is viewing 
 
-And `TypeArray`s have various methods, many are similar to `Array` but
+And `TypedArray`s have various methods, many are similar to `Array` but
 one that is not is `subarray`. It creates a new `TypedArray` view
 of the same type. Its parameters are `subarray(begin, end)` were
 `end` is not included. So `someTypedArray.subarray(5, 10)` makes