実際にコーディングしてみましょう。データの取り出し方を指定する部分は以下のコードになります。
-
+{{#escapehtml}}
var size = 4;
* var type = gl.UNSIGNED_BYTE;
* var normalize = true;
var stride = 0;
var offset = 0;
gl.vertexAttribPointer(colorLocation, size, type, normalize, stride, offset);
-
+{{/escapehtml}}
バッファを色で塗りつぶす時は次のようにします。
-
+{{#escapehtml}}
// Fill the buffer with colors for the 2 triangles
// that make the rectangle.
function setColors(gl) {
@@ -365,7 +365,7 @@ function setColors(gl) {
r2, b2, g2, 255]),
gl.STATIC_DRAW);
}
-
+{{/escapehtml}}
実行結果はこのようになります。
diff --git a/webgl/lessons/ja/webgl1-to-webgl2.md b/webgl/lessons/ja/webgl1-to-webgl2.md index aa00aa3fc..041a0b165 100644 --- a/webgl/lessons/ja/webgl1-to-webgl2.md +++ b/webgl/lessons/ja/webgl1-to-webgl2.md @@ -354,7 +354,7 @@ var someVAO = gl.createVertexArray();WebGL1とWebGL2の両方で実行したい場合は、いくつかの課題があります。
1つの回避策は、初期化時にWebGL1の拡張機能をWebGLコンテキストにコピーする事です。そうすると残りのコードをそのままにできます。以下が例です。
-
+{{#escapehtml}}
const gl = someCanvas.getContext("webgl");
const haveVAOs = getAndApplyExtension(gl, "OES_vertex_array_object");
@@ -393,18 +393,18 @@ function getAndApplyExtension(gl, name) {
}
return ext;
}
-
+{{/escapehtml}}
コードが両方で同じように動作するようになりました。例:
-
+{{#escapehtml}}
if (haveVAOs) {
var someVAO = gl.createVertexArray();
...
} else {
... do whatever for no VAOs.
}
-
+{{/escapehtml}}
代替案は次のような事をしなければならないでしょう。
-
+{{#escapehtml}}
if (haveVAOs) {
if (isWebGL2)
someVAO = gl.createVertexArray();
@@ -415,7 +415,7 @@ if (haveVAOs) {
} else {
... do whatever for no VAOs.
}
-
+{{/escapehtml}}
注意点： 特に頂点配列オブジェクトの場合、ポリフィルを使用する事をお勧めします。 VAOはほとんどのシステムで利用可能です。 VAOが利用可能ではない場合、ポリフィルが処理しコードがシンプルになります。 diff --git a/webgl/lessons/ko/webgl-2d-drawimage.md b/webgl/lessons/ko/webgl-2d-drawimage.md index e2fc0c949..1e6d2a1aa 100644 --- a/webgl/lessons/ko/webgl-2d-drawimage.md +++ b/webgl/lessons/ko/webgl-2d-drawimage.md @@ -467,7 +467,7 @@ WebGL을 창의적으로 사용하기 위한 것이라는 점을 강조하고 혹시 눈치챘을지 모르지만 우리는 위치 좌표에 사용한 단위 사각형은 정확히 텍스쳐 좌표의 단위 사각형과 크기가 일치합니다. 따라서 우리는 위치좌표를 바로 텍스쳐 좌표로 사용할 수 있습니다.
-
+{{#escapehtml}}
#version 300 es
in vec4 a_position;
-in vec2 a_texcoord;
@@ -481,7 +481,7 @@ void main() {
gl_Position = u_matrix * a_position;
* v_texcoord = (u_textureMatrix * a_position).xy;
}
-
+{{/escapehtml}}
이제 텍스쳐 좌표를 설정하는 코드를 삭제해도 됩니다. 삭제하더라도 이전과 완전히 동일하게 동작할 것입니다.
diff --git a/webgl/lessons/ko/webgl-2d-vs-3d-library.md b/webgl/lessons/ko/webgl-2d-vs-3d-library.md index 0f98ac7b8..79280a629 100644 --- a/webgl/lessons/ko/webgl-2d-vs-3d-library.md +++ b/webgl/lessons/ko/webgl-2d-vs-3d-library.md @@ -28,7 +28,7 @@ WebGL(그리고 OpenGL ES 2.0+)도 3D 장면을 그릴 때 사용하긴 하지 three.js를 사용하는 경우 코드는 아래와 같습니다. -
+{{#escapehtml}}
// 설정
renderer = new THREE.WebGLRenderer({canvas: document.querySelector("#canvas")});
c.appendChild(renderer.domElement);
@@ -64,7 +64,7 @@ three.js를 사용하는 경우 코드는 아래와 같습니다.
light2 = new THREE.PointLight(0x0040ff, 2, 0);
light2.position.set(-200, 100, 300);
scene.add(light2);
-
+{{/escapehtml}}
그러면 아래와 같이 표시됩니다.
@@ -72,7 +72,7 @@ three.js를 사용하는 경우 코드는 아래와 같습니다.
OpenGL(ES가 아닌)을 사용해 2개의 조명과 육면체를 그리는 유사한 코드입니다.
-
+{{#escapehtml}}
// 설정
glViewport(0, 0, width, height);
glMatrixMode(GL_PROJECTION);
@@ -125,7 +125,7 @@ OpenGL(ES가 아닌)을 사용해 2개의 조명과 육면체를 그리는 유
*/
glEnd();
-
+{{/escapehtml}}
이 두 예제를 작성하는데 있어서 거의 3D 수학 지식이 필요하지 않다는 것에 주목하십시오. WebGL과 비교해서요. WebGL로 그리기 위한 코드는 작성하지 않을겁니다.
코드는 그렇게 길어지지는 않을겁니다. 코드 라인이 얼마나 필요한지가 중요한 것이 아닙니다.
diff --git a/webgl/lessons/ko/webgl-3d-orthographic.md b/webgl/lessons/ko/webgl-3d-orthographic.md
index 0ef63c37f..db9c5191a 100644
--- a/webgl/lessons/ko/webgl-3d-orthographic.md
+++ b/webgl/lessons/ko/webgl-3d-orthographic.md
@@ -639,7 +639,7 @@ in vec4 a_position;
in vec4 a_color;
둘 다 'vec4'지만, 우리가 버퍼에서 데이터를 가져오는 방법을 WebGL에 알려줄 때에는 아래와 같이 정의하였습니다.
-
+{{#escapehtml}}
// attribute에게 positionBuffer (ARRAY_BUFFER)로부터 데이터를 가져오는 법을 알려줍니다.
var size = 3; // iteration마다 3 개의 component
var type = gl.FLOAT; // 데이터는 32bit floats
@@ -658,7 +658,7 @@ var stride = 0; // 0 = 각 iteration마다 다음 색상값을 얻기 위
var offset = 0; // 버퍼의 맨 앞부분부터 시작
gl.vertexAttribPointer(
colorAttributeLocation, size, type, normalize, stride, offset);
-
+{{/escapehtml}}
위에 써있는 '3'들은 버퍼에서 iteration마다, attribute마다 3개의 값을 가져오라는 뜻입니다. 이래도 되는 이유는 WebGL의 정점 쉐이더는 입력하지 않는 값에 대해 기본값을 사용하기 때문입니다. diff --git a/webgl/lessons/ko/webgl-how-it-works.md b/webgl/lessons/ko/webgl-how-it-works.md index 2ce781a7e..0ba615585 100644 --- a/webgl/lessons/ko/webgl-how-it-works.md +++ b/webgl/lessons/ko/webgl-how-it-works.md @@ -278,16 +278,16 @@ attribute의 위치를 알게 되면 두개의 명령문을 실행합니다. 정규화된 데이터의 가장 일반적인 용도는 색상입니다. 대부분의 경우 색상은 0.0에서 1.0 사이의 값으로 정의됩니다. 빨강, 초록, 파랑 그리고 알파에 대해 완전한 부동소수점을 사용하면 각 정점의 각 색상을 위해 16바이트를 사용하게 됩니다. 복잡한 geometry가 있는 경우 더 많은 바이트가 추가될 수 있습니다. 그 대신 색상들을 0이 0.0으로, 255가 1.0을 표현하는 UNSIGNED_BYTE로 변환 할 수 있습니다. 이제 정점당 색상에 4 바이트만 필요하므로 75%의 메모리 절감 효과가 있습니다.
이를 위해 코드를 변경해 보겠습니다. WebGL에게 우리가 사용할 색상을 가져오는 방법을 알려줄 때,
-
+{{#escapehtml}}
var size = 4;
* var type = gl.UNSIGNED_BYTE;
* var normalize = true;
var stride = 0;
var offset = 0;
gl.vertexAttribPointer(colorLocation, size, type, normalize, stride, offset);
-
+{{/escapehtml}}
그 다음 버퍼를 사용할 색상으로 채울때 입니다.
-
+{{#escapehtml}}
// 사각형을 구성하는 두 개의 삼각형의 색상으로 버퍼를 채움
function setColors(gl) {
// 2 개의 랜덤 색상 선택
@@ -309,7 +309,7 @@ function setColors(gl) {
r2, b2, g2, 255]),
gl.STATIC_DRAW);
}
-
+{{/escapehtml}}
아래는 결과 예제입니다.
diff --git a/webgl/lessons/ko/webgl-less-code-more-fun.md b/webgl/lessons/ko/webgl-less-code-more-fun.md index 1c5de347f..662e2f066 100644 --- a/webgl/lessons/ko/webgl-less-code-more-fun.md +++ b/webgl/lessons/ko/webgl-less-code-more-fun.md @@ -439,19 +439,19 @@ objects.forEach(function(object) {자바스크립트에 익숙하신 분은들 setter를 아래와 같이 직접 호출해서 사용할 수 있는지 궁금하실 겁니다.
-
+{{#escapehtml}}
// 초기화 시점에
var uniformSetters = twgl.createUniformSetters(program);
// 그리는 시점에
uniformSetters.u_ambient([1, 0, 0, 1]); // ambient color를 빨간색으로 설정.
-
+{{/escapehtml}}
이렇게 하는것이 좋지 않은 이유는 GLSL 프로그램을 작성할 때 셰이더를 변경하는 경우가 종종 생긴다는 겁니다. 주로 디버깅 목적으로요. 예를들어 프로그램을 사용했더니 화면에 아무것도 보이지 않는다고 합시다. 저같은 경우 이렇게 아무것도 나타나지 않을때 때 제일 먼저 하는 작업은 셰이더를 단순화 하는 것입니다. 예를들어 프래그먼트 셰이더의 출력을 아주 간단하게 바꿔봅니다.
-
+{{#escapehtml}}
#version 300 es
precision highp float;
@@ -491,7 +491,7 @@ void main() {
diffuseColor.a);
* outColor = vec4(0,1,0,1); // <!--- 단순한 초록색으로
}
-
+{{/escapehtml}}
outColor를 단색으로 설정하는 라인을 추가한 것에 주목하세요.
대부분의 드라이버는 위쪽 라인의 코드들이 최종 결과에 영향을 주지 않는다는 것을 알아냅니다.
그래서 모든 uniform들을 최적화합니다. 프로그램을 다시 실행하여 twgl.createUniformSetters를 호출하면 u_ambient를 위한 setter를 생성하지 못하고 위 코드에서 uniformSetters.u_ambient()를 호출하는 부분이 실패하면서 아래와 같은 메시지가 나타납니다.
diff --git a/webgl/lessons/ko/webgl-planar-projection-mapping.md b/webgl/lessons/ko/webgl-planar-projection-mapping.md
index 929a82d67..82f914c7f 100644
--- a/webgl/lessons/ko/webgl-planar-projection-mapping.md
+++ b/webgl/lessons/ko/webgl-planar-projection-mapping.md
@@ -740,21 +740,21 @@ Geometry를 생성하는 것이 올바른 방법인데, 그렇지 않으면 2개
你可以看到它们在共享处没有被当作相同点，因为它们不是100%的相等。
起初我想通过提供一个误差范围，检查顶点的距离是否在范围内，如果小于误差范围就认为是同一点。 就像这样。 -
+{{#escapehtml}}
const epsilon = 0.0001;
const tempVerts = [];
function getVertIndex(position) {
@@ -740,7 +740,7 @@ function getVertIndex(position) {
tempVerts.push(position);
return tempVerts.length - 1;
}
-
+{{/escapehtml}}
它成功了，我解决了接缝问题。但是它消耗的时间太长，导致UI交互不稳定。 这是因为它是一个复杂度为 O^2 的解决方法，如果你滑动滑块在最多的情况下就会创建大约 20000 个点， 再加上 O^2 的复杂度就是 3 亿次迭代。 @@ -767,17 +767,17 @@ function getVertIndex(position) {