fixes for new lesson-builder

Author: greggman

webgl/lessons/ja/webgl-how-it-works.md

@@ -333,16 +333,16 @@ trueにした場合、BYTE型 (-128 〜 127) なら-1.0 〜 +1.0 、UNSIGNED_BYT
 これで頂点ごとに1色につき4バイトしか必要なくなり、75%の節約になります。
 </p>
 <p>実際にコーディングしてみましょう。データの取り出し方を指定する部分は以下のコードになります。</p>
-<pre class="prettyprint showlinemods">
+<pre class="prettyprint showlinemods">{{#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);
-</pre>
+{{/escapehtml}}</pre>
 <p>バッファを色で塗りつぶす時は次のようにします。</p>
-<pre class="prettyprint showlinemods">
+<pre class="prettyprint showlinemods">{{#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);
 }
-</pre>
+{{/escapehtml}}</pre>
 <p>
 実行結果はこのようになります。
 </p>

webgl/lessons/ja/webgl1-to-webgl2.md

@@ -354,7 +354,7 @@ var someVAO = gl.createVertexArray();
 <p>WebGL1とWebGL2の両方で実行したい場合は、いくつかの課題があります。</p>
 <p>1つの回避策は、初期化時にWebGL1の拡張機能をWebGLコンテキストにコピーする事です。そうすると残りのコードをそのままにできます。以下が例です。
 </p>
-<pre class="prettyprint">
+<pre class="prettyprint">{{#escapehtml}}
 const gl = someCanvas.getContext("webgl");
 const haveVAOs = getAndApplyExtension(gl, "OES_vertex_array_object");
 
@@ -393,18 +393,18 @@ function getAndApplyExtension(gl, name) {
   }
   return ext;
 }
-</pre>
+{{/escapehtml}}</pre>
 <p>コードが両方で同じように動作するようになりました。例:</p>
-<pre class="prettyprint">
+<pre class="prettyprint">{{#escapehtml}}
 if (haveVAOs) {
   var someVAO = gl.createVertexArray();
   ...
 } else {
   ... do whatever for no VAOs.
 }
-</pre>
+{{/escapehtml}}</pre>
 <p>代替案は次のような事をしなければならないでしょう。</p>
-<pre class="prettyprint">
+<pre class="prettyprint">{{#escapehtml}}
 if (haveVAOs) {
   if (isWebGL2)
      someVAO = gl.createVertexArray();
@@ -415,7 +415,7 @@ if (haveVAOs) {
 } else {
   ... do whatever for no VAOs.
 }
-</pre>
+{{/escapehtml}}</pre>
 <p>注意点： 特に頂点配列オブジェクトの場合、<a href="https://github.com/greggman/oes-vertex-array-object-polyfill">ポリフィルを使用する</a>事をお勧めします。
 VAOはほとんどのシステムで利用可能です。
 VAOが利用可能ではない場合、ポリフィルが処理しコードがシンプルになります。

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

@@ -467,7 +467,7 @@ WebGL을 창의적으로 사용하기 위한 것이라는 점을 강조하고 
 혹시 눈치챘을지 모르지만 우리는 위치 좌표에 사용한 단위 사각형은 정확히 텍스쳐 좌표의 단위
 사각형과 크기가 일치합니다. 따라서 우리는 위치좌표를 바로 텍스쳐 좌표로 사용할 수 있습니다.
 </p>
-<pre class="prettyprint showlinemods">
+<pre class="prettyprint showlinemods">{{#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;
 }
-</pre>
+{{/escapehtml}}</pre>
 <p>
 이제 텍스쳐 좌표를 설정하는 코드를 삭제해도 됩니다. 삭제하더라도 이전과 완전히 동일하게 동작할 것입니다.
 </p>

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

@@ -28,7 +28,7 @@ WebGL(그리고 OpenGL ES 2.0+)도 3D 장면을 그릴 때 사용하긴 하지
 
 three.js를 사용하는 경우 코드는 아래와 같습니다.
 
-<pre class="prettyprint showlinemods">
+<pre class="prettyprint showlinemods">{{#escapehtml}}
   // 설정
   renderer = new THREE.WebGLRenderer({canvas: document.querySelector("#canvas")});
   c.appendChild(renderer.domElement);
@@ -64,15 +64,15 @@ three.js를 사용하는 경우 코드는 아래와 같습니다.
   light2 = new THREE.PointLight(0x0040ff, 2, 0);
   light2.position.set(-200, 100, 300);
   scene.add(light2);
-</pre>
+{{/escapehtml}}</pre>
 
 그러면 아래와 같이 표시됩니다.
 
 {{{example url="resources/three-js-cube-with-lights.html" }}}
 
 OpenGL(ES가 아닌)을 사용해 2개의 조명과 육면체를 그리는 유사한 코드입니다.
 
-<pre class="prettyprint showlinemods">
+<pre class="prettyprint showlinemods">{{#escapehtml}}
   // 설정
   glViewport(0, 0, width, height);
   glMatrixMode(GL_PROJECTION);
@@ -125,7 +125,7 @@ OpenGL(ES가 아닌)을 사용해 2개의 조명과 육면체를 그리는 유
   */
 
   glEnd();
-</pre>
+{{/escapehtml}}</pre>
 
 이 두 예제를 작성하는데 있어서 거의 3D 수학 지식이 필요하지 않다는 것에 주목하십시오. WebGL과 비교해서요. WebGL로 그리기 위한 코드는 작성하지 않을겁니다.
 코드는 그렇게 길어지지는 않을겁니다. 코드 라인이 얼마나 필요한지가 중요한 것이 아닙니다.

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

@@ -639,7 +639,7 @@ in vec4 a_position;
 in vec4 a_color;
 </pre>
 <p>둘 다 'vec4'지만, 우리가 버퍼에서 데이터를 가져오는 방법을 WebGL에 알려줄 때에는 아래와 같이 정의하였습니다.</p>
-<pre class="prettyprint showlinemods">
+<pre class="prettyprint showlinemods">{{#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);
-</pre>
+{{/escapehtml}}</pre>
 <p>
 위에 써있는 '3'들은 버퍼에서 iteration마다, attribute마다 3개의 값을 가져오라는 뜻입니다. 
 이래도 되는 이유는 WebGL의 정점 쉐이더는 입력하지 않는 값에 대해 기본값을 사용하기 때문입니다.

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%의 메모리 절감 효과가 있습니다.
 </p>
 <p>이를 위해 코드를 변경해 보겠습니다. WebGL에게 우리가 사용할 색상을 가져오는 방법을 알려줄 때, </p>
-<pre class="prettyprint showlinemods">
+<pre class="prettyprint showlinemods">{{#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);
-</pre>
+{{/escapehtml}}</pre>
 <p>그 다음 버퍼를 사용할 색상으로 채울때 입니다.</p>
-<pre class="prettyprint showlinemods">
+<pre class="prettyprint showlinemods">{{#escapehtml}}
 // 사각형을 구성하는 두 개의 삼각형의 색상으로 버퍼를 채움
 function setColors(gl) {
   // 2 개의 랜덤 색상 선택
@@ -309,7 +309,7 @@ function setColors(gl) {
           r2, b2, g2, 255]),
       gl.STATIC_DRAW);
 }
-</pre>
+{{/escapehtml}}</pre>
 <p>
 아래는 결과 예제입니다.
 </p>

webgl/lessons/ko/webgl-less-code-more-fun.md

@@ -439,19 +439,19 @@ objects.forEach(function(object) {
 <p>
 자바스크립트에 익숙하신 분은들 setter를 아래와 같이 직접 호출해서 사용할 수 있는지 궁금하실 겁니다.
 </p>
-<pre class="prettyprint">
+<pre class="prettyprint">{{#escapehtml}}
 // 초기화 시점에
 var uniformSetters = twgl.createUniformSetters(program);
 
 // 그리는 시점에
 uniformSetters.u_ambient([1, 0, 0, 1]); // ambient color를 빨간색으로 설정.
-</pre>
+{{/escapehtml}}</pre>
 <p>이렇게 하는것이 좋지 않은 이유는 GLSL 프로그램을 작성할 때 셰이더를 변경하는 경우가 종종 생긴다는 겁니다. 주로 디버깅 목적으로요.
 예를들어 프로그램을 사용했더니 화면에 아무것도 보이지 않는다고 합시다.
 저같은 경우 이렇게 아무것도 나타나지 않을때 때 제일 먼저 하는 작업은 셰이더를 단순화 하는 것입니다.
 예를들어 프래그먼트 셰이더의 출력을 아주 간단하게 바꿔봅니다.
 </p>
-<pre class="prettyprint showlinemods">
+<pre class="prettyprint showlinemods">{{#escapehtml}}
 #version 300 es
 precision highp float;
 
@@ -491,7 +491,7 @@ void main() {
       diffuseColor.a);
 *  outColor = vec4(0,1,0,1);  // &lt;!--- 단순한 초록색으로
 }
-</pre>
+{{/escapehtml}}</pre>
 <p><code>outColor</code>를 단색으로 설정하는 라인을 추가한 것에 주목하세요.
 대부분의 드라이버는 위쪽 라인의 코드들이 최종 결과에 영향을 주지 않는다는 것을 알아냅니다.
 그래서 모든 uniform들을 최적화합니다. 프로그램을 다시 실행하여 <code>twgl.createUniformSetters</code>를 호출하면 <code>u_ambient</code>를 위한 setter를 생성하지 못하고 위 코드에서 <code>uniformSetters.u_ambient()</code>를 호출하는 부분이 실패하면서 아래와 같은 메시지가 나타납니다.

webgl/lessons/ko/webgl-planar-projection-mapping.md

@@ -740,21 +740,21 @@ Geometry를 생성하는 것이 올바른 방법인데, 그렇지 않으면 2개
 <div class="webgl_bottombar">
 <h3>조건부 텍스처 참조</h3>
 <p>위의 프래그먼트 셰이더에서는 항상 두 개의 텍스처를 모두 읽게 됩니다.</p>
-<pre class="prettyprint"><code>
+<pre class="prettyprint"><code>{{#escapehtml}}
   vec4 projectedTexColor = texture(u_projectedTexture, projectedTexcoord.xy);
   vec4 texColor = texture(u_texture, v_texcoord) * u_colorMult;
 
   float projectedAmount = inRange ? 1.0 : 0.0;
   gl_FragColor = mix(texColor, projectedTexColor, projectedAmount);
-</code></pre>
+{{/escapehtml}}</code></pre>
 <p>왜 아래와 같이 하지 않았을까요?</p>
-<pre class="prettyprint"><code>
+<pre class="prettyprint"><code>{{#escapehtml}}
   if (inRange) {
     gl_FragColor = texture(u_projectedTexture, projectedTexcoord.xy);
   } else {
     gl_FragColor = texture(u_texture, v_texcoord) * u_colorMult;
   }
-</code></pre>
+{{/escapehtml}}</code></pre>
 <p><a href="https://www.khronos.org/registry/OpenGL/specs/es/3.0/GLSL_ES_Specification_3.00.pdf">GLSL ES 3.0 명세의 Section 8.8</a>에 따르면</p>
 <blockquote>
 <h4>Texture Lookup Functions</h4>
@@ -767,7 +767,7 @@ derivatives are undefined within non-uniform control flow and for vertex texture
 다시 말해 텍스처를 사용하는 경우 항상 텍스처에 접근할 수 있어야 한다는 것입니다. 
 결과를 조건부로 사용할 수는 있습니다.
 예를 들어 아래와 같이 작성하거나</p>
-<pre class="prettyprint"><code>
+<pre class="prettyprint"><code>{{#escapehtml}}
   vec4 projectedTexColor = texture(u_projectedTexture, projectedTexcoord.xy);
   vec4 texColor = texture(u_texture, v_texcoord) * u_colorMult;
 
@@ -776,14 +776,14 @@ derivatives are undefined within non-uniform control flow and for vertex texture
   } else {
     gl_FragColor = texColor;
   }
-</code></pre>
+{{/escapehtml}}</code></pre>
 <p>아래와 같이 작성할 수 있습니다.</p>
-<pre class="prettyprint"><code>
+<pre class="prettyprint"><code>{{#escapehtml}}
   vec4 projectedTexColor = texture(u_projectedTexture, projectedTexcoord.xy);
   vec4 texColor = texture(u_texture, v_texcoord) * u_colorMult;
 
   gl_FragColor = inRange ? projectedTexColor : texColor;
-</code></pre>
+{{/escapehtml}}</code></pre>
 <p>
 하지만 텍스처 접근 자체를 조건부로 만들 수는 없습니다.
 어떤 GPU에서는 작동될 수 있지만 모든 GPU에서 작동이 보장되지는 않습니다.

webgl/lessons/ko/webgl1-to-webgl2.md

@@ -355,14 +355,14 @@ extension을 사용하는 것처럼 작성하시면 안되고 조금은 수정
 <div class="webgl_bottombar">
 <h3>WebGL1 extension을 WebGL2처럼 만들기</h3>
 <p>WebGL1의 extension에 있던 함수들은, WebGL2에서는 extension 없이 사용할 수 있습니다. 예를 들면, WebGL1에서는 아래와 같았지만</p>
-<pre class="prettyprint">
+<pre class="prettyprint">{{#escapehtml}}
 var ext = gl.getExtension("OES_vertex_array_object");
 if (!ext) {
   // tell user they don't have the required extension or work around it
 } else {
   var someVAO = ext.createVertexArrayOES();
 }
-</pre>
+{{/escapehtml}}</pre>
 <p>
 WebGL2 에서는 이렇죠.
 </p>
@@ -373,7 +373,7 @@ var someVAO = gl.createVertexArray();
 좀 어려울 수 있습니다.</p>
 <p>한 가지 해결 방법은, 초기화할 때 WebGL1 extension을 WebGL context에 복사하는 것입니다.
 그렇게 하면 나머지 코드는 그대로입니다. 예시:</p>
-<pre class="prettyprint">
+<pre class="prettyprint">{{#escapehtml}}
 const gl = someCanvas.getContext("webgl");
 const haveVAOs = getAndApplyExtension(gl, "OES_vertex_array_object");
 
@@ -412,18 +412,18 @@ function getAndApplyExtension(gl, name) {
   }
   return ext;
 }
-</pre>
+{{/escapehtml}}</pre>
 <p>이제 이 코드는 WebGL1과 WebGL2 에서 대부분 똑같이 동작할 겁니다. 예시:</p>
-<pre class="prettyprint">
+<pre class="prettyprint">{{#escapehtml}}
 if (haveVAOs) {
   var someVAO = gl.createVertexArray();
   ...
 } else {
   ... do whatever for no VAOs.
 }
-</pre>
+{{/escapehtml}}</pre>
 <p>아니면 이런식으로 적어야겠죠.</p>
-<pre class="prettyprint">
+<pre class="prettyprint">{{#escapehtml}}
 if (haveVAOs) {
   if (isWebGL2)
      someVAO = gl.createVertexArray();
@@ -434,7 +434,7 @@ if (haveVAOs) {
 } else {
   ... do whatever for no VAOs.
 }
-</pre>
+{{/escapehtml}}</pre>
 <p>참고: Vertex Array Objects를 사용하는 경우에는, <a href="https://github.com/greggman/oes-vertex-array-object-polyfill">polyfill</a>을 사용하는 것을 권장합니다. VAO는 대부분의 시스템에서 지원되지만, 지원하지 않는 몇 시스템에서는 polyfill로 해결할 수 있습니다.
 코드의 변경 없이 말이죠.</p>
 </div>

webgl/lessons/pt-br/webgl-2d-vs-3d-library.md

@@ -35,7 +35,7 @@ com luzes.
 
 Aqui está o código em three.js para fazer isso
 
-<pre class="prettyprint showlinemods">
+<pre class="prettyprint showlinemods">{{#escapehtml}}
   // Setup.
   renderer = new THREE.WebGLRenderer({canvas: document.querySelector("#canvas")});
   c.appendChild(renderer.domElement);
@@ -71,15 +71,15 @@ Aqui está o código em three.js para fazer isso
   light2 = new THREE.PointLight(0x0040ff, 2, 0);
   light2.position.set(-200, 100, 300);
   scene.add(light2);
-</pre>
+{{/escapehtml}}</pre>
 
 e aqui é exibido.
 
 {{{example url="resources/three-js-cube-with-lights.html" }}}
 
 Aqui está o código similar em OpenGL (não ES) para exibir um cubo com 2 luzes.
 
-<pre class="prettyprint showlinemods">
+<pre class="prettyprint showlinemods">{{#escapehtml}}
   // Setup
   glViewport(0, 0, width, height);
   glMatrixMode(GL_PROJECTION);
@@ -132,7 +132,7 @@ Aqui está o código similar em OpenGL (não ES) para exibir um cubo com 2 luzes
   */
 
   glEnd();
-</pre>
+{{/escapehtml}}</pre>
 
 
 Observe como precisamos quase nenhum conhecimento de matemática para 3D para qualquer um desses