Skip to content

Commit 0e31f58

Browse files
author
태재영
committed
ko: skinning
1 parent 959c79d commit 0e31f58

21 files changed

+1360
-82
lines changed

webgl/lessons/ko/webgl-2d-translation.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ Translation을 업데이트한 후에 이 함수를 호출할 수 있습니다.
5252
5353
// positionBuffer(ARRAY_BUFFER)에서 데이터 가져오는 방법을 attribute에 지시
5454
var size = 2; // 반복마다 2개의 컴포넌트
55-
var type = gl.FLOAT; // 데이터는 32bit float
55+
var type = gl.FLOAT; // 데이터는 32비트 부동 소수점
5656
var normalize = false; // 데이터 정규화 안 함
5757
var stride = 0; // 0 = 다음 위치를 가져오기 위해 반복마다 size * sizeof(type) 만큼 앞으로 이동
5858
var offset = 0; // 버퍼의 처음부터 시작

webgl/lessons/ko/webgl-2d-vs-3d-library.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ WebGL이 rasterization API이고 3D API가 아니라는 제 주장이 일부 사
1515
WebGL의 경우 rasterization API라고 부르는 게 중요하다고 생각한 이유가 있는데, 구체적으로는 WebGL을 사용해 3D로 무언가를 그리기 위해 필요한 3D 수학 지식의 양 때문입니다.
1616

1717
저는 3D 라이브러리라고 부르는 모든 것이 여러분을 위한 3D 영역을 수행해야 한다고 생각합니다.
18-
라이브러리에 3D 데이터, material 매개변수, 조명을 제공할 수 있어야 하며 3D를 그릴 수 있어야 합니다.
18+
라이브러리에 3D 데이터, 머티리얼 매개변수, 조명을 제공할 수 있어야 하며 3D를 그릴 수 있어야 합니다.
1919
WebGL과 OpenGL ES 2.0+는 모두 3D를 그리는데 사용되지만 이 설명에는 맞지 않습니다.
2020

2121
비유를 위해, C++은 기본적으로 "process word"를 하지 않습니다.
@@ -46,7 +46,7 @@ WebGL로 3D 그래픽을 그리는 라이브러리를 작성할 수는 있지만
4646
// 큐브 만들기
4747
var geometry = new THREE.BoxGeometry(200, 200, 200);
4848

49-
// Material 만들기
49+
// 머티리얼 만들기
5050
var material = new THREE.MeshPhongMaterial({
5151
ambient: 0x555555,
5252
color: 0x555555,
@@ -55,7 +55,7 @@ WebGL로 3D 그래픽을 그리는 라이브러리를 작성할 수는 있지만
5555
shading: THREE.SmoothShading
5656
});
5757

58-
// Geometry와 material 기반의 mesh 생성
58+
// 지오메트리와 머티리얼 기반의 메시 생성
5959
mesh = new THREE.Mesh(geometry, material);
6060
scene.add(mesh);
6161

webgl/lessons/ko/webgl-3d-geometry-lathe.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -796,8 +796,8 @@ O^2일 경우 최대 12조에 가까운 반복이 발생합니다.
796796
문제가 해결되었습니다!
797797
</p>
798798
<p>
799-
그래도 여전히 <code>distance</code>를 0.001로 <code>divisions</code>를 60으로 설정하면 mesh를 다시 계산하는 데 거의 1초가 걸립니다.
800-
이를 최적화하는 방법이 있을 수도 있지만 복잡한 mesh를 생성하는 게 일반적으로 느린 작업이라는 것을 깨닫는 게 요점이라고 생각합니다.
799+
그래도 여전히 <code>distance</code>를 0.001로 <code>divisions</code>를 60으로 설정하면 메시를 다시 계산하는 데 거의 1초가 걸립니다.
800+
이를 최적화하는 방법이 있을 수도 있지만 복잡한 메시를 생성하는 게 일반적으로 느린 작업이라는 것을 깨닫는 게 요점이라고 생각합니다.
801801
이게 3D 게임은 60fps로 실행할 수 있지만 3D 모델링 패키지는 종종 매우 낮은 프레임 레이트로 작동하는 이유입니다.
802802
</p>
803803
</div>

webgl/lessons/ko/webgl-3d-lighting-directional.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,7 @@ function setNormals(gl) {
240240
+
241241
+// normalBuffer(ARRAY_BUFFER)에서 데이터 가져오는 방법을 attribute에 지시
242242
+var size = 3; // 반복마다 3개의 컴포넌트
243-
+var type = gl.FLOAT; // 데이터는 32bit float
243+
+var type = gl.FLOAT; // 데이터는 32비트 부동 소수점
244244
+var normalize = false; // 데이터 정규화 (0-255에서 0-1로 전환)
245245
+var stride = 0; // 0 = 다음 위치를 가져오기 위해 반복마다 size * sizeof(type) 만큼 앞으로 이동
246246
+var offset = 0; // 버퍼의 처음부터 시작

webgl/lessons/ko/webgl-3d-orthographic.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ void main() {
5858
5959
// positionBuffer(ARRAY_BUFFER)에서 데이터 가져오는 방법을 attribute에 지시
6060
* var size = 3; // 반복마다 3개의 컴포넌트
61-
var type = gl.FLOAT; // 데이터는 32bit float
61+
var type = gl.FLOAT; // 데이터는 32비트 부동 소수점
6262
var normalize = false; // 데이터 정규화 안 함
6363
var stride = 0; // 0 = 다음 위치를 가져오기 위해 반복마다 size * sizeof(type) 만큼 앞으로 이동
6464
var offset = 0; // 버퍼의 처음부터 시작
@@ -630,7 +630,7 @@ attribute vec4 a_color;
630630
<pre class="prettyprint showlinemods">
631631
// positionBuffer(ARRAY_BUFFER)에서 데이터 가져오는 방법을 attribute에 지시
632632
var size = 3; // 반복마다 3개의 컴포넌트
633-
var type = gl.FLOAT; // 데이터는 32bit float
633+
var type = gl.FLOAT; // 데이터는 32비트 부동 소수점
634634
var normalize = false; // 데이터 정규화 안 함
635635
var stride = 0; // 0 = 다음 위치를 가져오기 위해 반복마다 size * sizeof(type) 만큼 앞으로 이동
636636
var offset = 0; // 버퍼의 처음부터 시작

webgl/lessons/ko/webgl-3d-perspective-correct-texturemapping.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ Varying의 데이터를 제공해야 하므로 버퍼를 만들어 데이터를
139139
140140
// brightnessBuffer의 데이터를 가져오는 방법을 attribute에 지시 (ARRAY_BUFFER)
141141
var size = 1; // 반복마다 1개의 컴포넌트
142-
var type = gl.FLOAT; // 데이터는 32bit float
142+
var type = gl.FLOAT; // 데이터는 32비트 부동 소수점
143143
var normalize = false; // 데이터 정규화 안 함
144144
var stride = 0; // 0 = 다음 위치를 가져오기 위해 반복마다 size * sizeof(type) 만큼 앞으로 이동
145145
var offset = 0; // 버퍼의 처음부터 시작

webgl/lessons/ko/webgl-cross-platform-issues.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -206,7 +206,7 @@ WebGL1에서 종종 누락되는 또 다른 extension은 2개 이상의 color at
206206
207207
WebGL1의 경우 다음의 3개의 extension이 거의 보편적으로 지원되는 것처럼 보이므로 사용자에게 이들이 누락되면 페이지가 작동하지 않을 것이라 경고하고 싶을 수 있지만 사용자가 페이지를 제대로 실행하지 못 할만큼 아주 오래된 기기를 가지고 있을 수 있습니다.
208208
209-
`ANGLE_instance_arrays`([instanced drawing](webgl-instanced-drawing.html)에 사용하는 기능), `OES_vertex_array_object`(단일 함수 호출로 모든 상태를 바꿀 수 있도록 모든 [attribute](webgl-attributes.html) 상태를 객체에 저장하는 기능), `OES_element_index_uint`([`drawElements`](webgl-indexed-vertices.html)로 `UNSIGNED_INT` 32bit index를 사용하는 기능)
209+
`ANGLE_instance_arrays`([instanced drawing](webgl-instanced-drawing.html)에 사용하는 기능), `OES_vertex_array_object`(단일 함수 호출로 모든 상태를 바꿀 수 있도록 모든 [attribute](webgl-attributes.html) 상태를 객체에 저장하는 기능), `OES_element_index_uint`([`drawElements`](webgl-indexed-vertices.html)로 `UNSIGNED_INT` 32비트 인덱스를 사용하는 기능)
210210
211211
## attribute location
212212

webgl/lessons/ko/webgl-drawing-without-data.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ gl.useProgram(program);
113113

114114
// idBuffer(ARRAY_BUFFER)에서 데이터 가져오는 방법을 속성에 지시
115115
const size = 1; // 반복마다 1개의 컴포넌트
116-
const type = gl.FLOAT; // 데이터는 32bit float
116+
const type = gl.FLOAT; // 데이터는 32비트 부동 소수점
117117
const normalize = false; // 데이터 정규화 안 함
118118
const stride = 0; // 0 = 다음 위치를 가져오기 위해 반복마다 size * sizeof(type) 만큼 앞으로 이동
119119
const offset = 0; // 버퍼의 처음부터 시작
@@ -205,7 +205,7 @@ const numVertsLoc = gl.getUniformLocation(program, 'numVerts');
205205

206206
// idBuffer(ARRAY_BUFFER)에서 데이터 가져오는 방법을 속성에 지시
207207
const size = 1; // 반복마다 1개의 컴포넌트
208-
const type = gl.FLOAT; // 데이터는 32bit float
208+
const type = gl.FLOAT; // 데이터는 32비트 부동 소수점
209209
const normalize = false; // 데이터 정규화 안 함
210210
const stride = 0; // 0 = 다음 위치를 가져오기 위해 반복마다 size * sizeof(type) 만큼 앞으로 이동
211211
const offset = 0; // 버퍼의 처음부터 시작

webgl/lessons/ko/webgl-environment-maps.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,7 @@ gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
245245

246246
// Tell the attribute how to get data out of normalBuffer (ARRAY_BUFFER)
247247
var size = 3; // 반복마다 3개의 컴포넌트
248-
var type = gl.FLOAT; // 데이터는 32bit 부동 소수점 값
248+
var type = gl.FLOAT; // 데이터는 32비트 부동 소수점 값
249249
var normalize = false; // 데이터 정규화 (0-255에서 0-1로 전환)
250250
var stride = 0; // 0 = 다음 위치를 가져오기 위해 반복마다 size * sizeof(type) 만큼 앞으로 이동
251251
var offset = 0; // 버퍼의 처음부터 시작

webgl/lessons/ko/webgl-fundamentals.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@ WebGL은 함수가 출력하는 위치를 기반으로 [점, 선, 삼각형](web
3333
일반적으로 버퍼는 위치, 법선, 텍스처 좌표, 정점 색상 등을 포함하지만 원하는 걸 자유롭게 넣어도 됩니다.
3434

3535
Attribute는 버퍼에서 데이터를 가져오고 정점 셰이더에 제공하는 방법을 지정하는데 사용됩니다.
36-
예를 들어 위치당 3개의 32bit float로 위치를 버퍼에 넣을 수 있는데요.
37-
특정한 attribute에게 어느 버퍼에서 위치를 가져올지, 어떤 type의 데이터를 가져와야 하는지 (3개의 32bit 부동 소수점), 버퍼의 offset이 어느 위치에서 시작되는지, 한 위치에서 다음으로 갈 때 몇 byte를 이동시킬 것인지 알려줘야 합니다.
36+
예를 들어 위치당 3개의 32비트 부동 소수점으로 위치를 버퍼에 넣을 수 있는데요.
37+
특정한 attribute에게 어느 버퍼에서 위치를 가져올지, 어떤 type의 데이터를 가져와야 하는지 (3개의 32비트 부동 소수점), 버퍼의 offset이 어느 위치에서 시작되는지, 한 위치에서 다음으로 갈 때 몇 byte를 이동시킬 것인지 알려줘야 합니다.
3838

3939
버퍼는 무작위로 접근할 수 없습니다.
4040
대신에 정점 셰이더가 지정한 횟수만큼 실행되는데요.
@@ -256,7 +256,7 @@ bind point는 WebGL 안에 있는 내부 전역 변수라고 생각하시면 되
256256

257257
여기까지 많은 것들이 있었는데요.
258258
먼저 javascript 배열인 `positions`가 있습니다.
259-
Javascript와 다르게 WebGL은 강력한 type을 가지는 데이터가 필요하므로, `new Float32Array(positions)`는 새로운 32bit 부동 소수점 배열을 생성하고 `positions`에서 값을 복사합니다.
259+
Javascript와 다르게 WebGL은 강력한 type을 가지는 데이터가 필요하므로, `new Float32Array(positions)`는 새로운 32비트 부동 소수점 배열을 생성하고 `positions`에서 값을 복사합니다.
260260
그런 다음 `gl.bufferData`는 데이터를 GPU의 `positionBuffer`로 복사합니다.
261261
위에서 `ARRAY_BUFFER` bind point로 할당했기 때문에 position buffer를 사용히고 있습니다.
262262

@@ -314,7 +314,7 @@ CSS로 크기를 결정한 다음 일치하도록 조정함으로써 이러한
314314

315315
// positionBuffer(ARRAY_BUFFER)의 데이터를 꺼내오는 방법을 attribute에 지시
316316
var size = 2; // 반복마다 2개의 컴포넌트
317-
var type = gl.FLOAT; // 데이터는 32bit float
317+
var type = gl.FLOAT; // 데이터는 32비트 부동 소수점
318318
var normalize = false; // 데이터 정규화 안 함
319319
var stride = 0; // 0 = 다음 위치를 가져오기 위해 반복마다 size * sizeof(type) 만큼 앞으로 이동
320320
var offset = 0; // 버퍼의 처음부터 시작
@@ -373,7 +373,7 @@ count가 3이기 때문에 정점 셰이더를 세 번 실행할 겁니다.
373373
WebGL은 이제 삼각형을 렌더링할 겁니다.
374374
그리려는 모든 픽셀에 대해 WebGL은 프래그먼트 셰이더를 호출하는데요.
375375
프래그먼트 셰이더는 `gl_FragColor``1, 0, 0.5, 1`로 설정합니다.
376-
캔버스는 채널당 8bit이기 때문에 이는 WebGL이 캔버스에 `[255, 0, 127, 255]`를 값으로 작성한다는 걸 의미합니다.
376+
캔버스는 채널당 8비트이기 때문에 이는 WebGL이 캔버스에 `[255, 0, 127, 255]`를 값으로 작성한다는 걸 의미합니다.
377377

378378
다음은 실시간 버전입니다.
379379

0 commit comments

Comments
 (0)