http -> https

getElementById to querySelector

.gitignore

@@ -3,4 +3,5 @@
 node_modules
 out
 package-lock.json
+webglfundamentals.check.json
 

README.md

@@ -1,7 +1,7 @@
 WebGL Fundamentals
 ===================
 
-This is [a series of lessons or tutorials about WebGL](http://webglfundamentals.org/).
+This is [a series of lessons or tutorials about WebGL](https://webglfundamentals.org/).
 
 Unlike most WebGL lessons these are not based off of OpenGL.
 OpenGL is 20 years old. The lessons of OpenGL don't match well with WebGL.
@@ -60,10 +60,10 @@ Current fields are
       description: 'Learn WebGL from the ground up. No magic',
 
       // Link to the language root.
-      link: 'http://webglfundamentals.org/webgl/lessons/ja',  // replace `ja` with country code
+      link: 'https://webglfundamentals.org/webgl/lessons/ja',  // replace `ja` with country code
 
       // html that appears after the article and before the comments
-      commentSectionHeader: '<div>Questions? <a href="http://stackoverflow.com/questions/tagged/webgl">Ask on stackoverflow</a>.</div>\n        <div>Issue/Bug? <a href="http://github.com/gfxfundamentals/webgl-fundamentals/issues">Create an issue on github</a>.</div>',
+      commentSectionHeader: '<div>Questions? <a href="https://stackoverflow.com/questions/tagged/webgl">Ask on stackoverflow</a>.</div>\n        <div>Issue/Bug? <a href="https://github.com/gfxfundamentals/webgl-fundamentals/issues">Create an issue on github</a>.</div>',
 
       // markdown that appears for untranslated articles
       missing: "Sorry this article has not been translated yet. [Translations Welcome](https://github.com/gfxfundamentals/webgl-fundamentals)! 😄\n\n[Here's the original English article for now]({{{origLink}}}).",
@@ -159,7 +159,7 @@ Which means you can localize the labels like this
 
 For testing reference the sample directly in your browser. For example
 
-[`http://localhost:8080/webgl/lessons/resources/directional-lighting.html?lightDir=光線方向&surface1=オブジェクト&surface2=表面方向&dot=dot(光線反対方向,表面方向)%20%3D%20&ui-rotation=角度`](http://webglfundamentals.org/webgl/lessons/resources/directional-lighting.html?lightDir=光線方向&surface1=オブジェクト&surface2=表面方向&dot=dot(光線反対方向,表面方向)%20%3D%20&ui-rotation=角度)
+[`http://localhost:8080/webgl/lessons/resources/directional-lighting.html?lightDir=光線方向&surface1=オブジェクト&surface2=表面方向&dot=dot(光線反対方向,表面方向)%20%3D%20&ui-rotation=角度`](https://webglfundamentals.org/webgl/lessons/resources/directional-lighting.html?lightDir=光線方向&surface1=オブジェクト&surface2=表面方向&dot=dot(光線反対方向,表面方向)%20%3D%20&ui-rotation=角度)
 
 ### To build
 

contributors.md

@@ -3,6 +3,6 @@ WebGLFundamentals.org Contributors
 
 WebGLFundamentals is brought to you by:
 
-*    Gregg (Greggman) Tavares [games.greggman.com](http://games.greggman.com)
+*    Gregg (Greggman) Tavares [games.greggman.com](https://games.greggman.com)
 
 

docs.md

@@ -2,7 +2,7 @@ WebGLFundamentals API Docs
 ==========================
 
 These docs are an attempt to help explain some of the helper functions
-used in the articles on [webglfundamentals.org](http://webglfundamentals.org).
+used in the articles on [webglfundamentals.org](https://webglfundamentals.org).
 
 WebGL is a very low-level API and so using it is very verbose. To draw a simple
 lighted cube can easily require 50-100 WebGL calls. Calls to create buffers
@@ -29,7 +29,7 @@ for common shapes like spheres, cubes, planes, cones, etc can be found here](/do
 
 #JSDoc3 Plea
 
-These docs are generated with [JSDoc3](http://usejsdoc.org/). I find them very confusing to look at
+These docs are generated with [JSDoc3](https://usejsdoc.org/). I find them very confusing to look at
 and in some places frustratingly verbose. If you have any experience with JSDoc3 and know how to
 make the docs more approachable and useful please [submit a pull request](https://github.com/gfxfundamentals/webgl-fundamentals)
 or [file an issue with details](https://github.com/gfxfundamentals/webgl-fundamentals/issues).

robots.txt

@@ -1,3 +1,3 @@
-Sitemap: http://webglfundamentals.org/sitemap.xml
+Sitemap: https://webglfundamentals.org/sitemap.xml
 
 

webgl/frustum-diagram.html

@@ -80,8 +80,8 @@
 <!--
 for most samples webgl-utils only provides shader compiling/linking and
 canvas resizing because why clutter the examples with code that's the same in every sample.
-See http://webglfundamentals.org/webgl/lessons/webgl-boilerplate.html
-and http://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
+See https://webglfundamentals.org/webgl/lessons/webgl-boilerplate.html
+and https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
 for webgl-utils, m3, m4, and webgl-lessons-ui.
 -->
 <script src="resources/webgl-utils.js"></script>

webgl/glyph-texture-atlas-maker.html

@@ -19,8 +19,8 @@
 <!--
 for most samples webgl-utils only provides shader compiling/linking and
 canvas resizing because why clutter the examples with code that's the same in every sample.
-See http://webglfundamentals.org/webgl/lessons/webgl-boilerplate.html
-and http://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
+See https://webglfundamentals.org/webgl/lessons/webgl-boilerplate.html
+and https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
 for webgl-utils, m3, m4, and webgl-lessons-ui.
 -->
 <script src="resources/webgl-utils.js"></script>

webgl/lessons/fr/langinfo.hanson

@@ -4,8 +4,8 @@
   defaultExampleCaption: "Cliquer ici pour ouvrir dans une nouvelle fenêtre",
   title: 'WebGL - Les bases',
   description: 'Les bases de WebGL. Sans magie.',
-  link: 'http://webglfundamentals.org/webgl/lessons/fr',
-  commentSectionHeader: '<div>Une question ? <a href="http://stackoverflow.com/questions/tagged/webgl">Demander sur stackoverflow</a>.</div>\n        <div>Un problème ? <a href="http://github.com/vinci-mz/webgl-fundamentals/issues">Signaler sur github</a>.</div>',
+  link: 'https://webglfundamentals.org/webgl/lessons/fr',
+  commentSectionHeader: '<div>Une question ? <a href="https://stackoverflow.com/questions/tagged/webgl">Demander sur stackoverflow</a>.</div>\n        <div>Un problème ? <a href="https://github.com/vinci-mz/webgl-fundamentals/issues">Signaler sur github</a>.</div>',
   missing: "Sorry this article has not been translated yet. [Translations Welcome](https://github.com/gfxfundamentals/webgl-fundamentals)! 😄\n\n[Here's the original English article for now]({{{origLink}}}).",
   toc: 'Table des Matières',
   categoryMapping: {

webgl/lessons/fr/toc.html

@@ -1,6 +1,6 @@
 {{{tocHtml}}}
 <ul>
   <li><a href="/docs/">Aide pour la doc de l'API</a></li>
-  <li><a href="http://twgljs.org">TWGL, une librairie de base pour WebGL</a></li>
+  <li><a href="https://twgljs.org">TWGL, une librairie de base pour WebGL</a></li>
   <li><a href="https://github.com/gfxfundamentals/webgl-fundamentals">Github</a></li>
 </ul>

webgl/lessons/fr/webgl-3d-perspective.md

@@ -282,7 +282,7 @@ Mais il reste quelques soucis. Si on met Z à -100 on se retrouve avec quelque c
 Quest-ce qu'il se passe ? Pourquoi le F disparaît ? Tout comme WebGL tronque le X et le Y au-delà de -1 et +1 il tronque aussi le Z. 
 Ce qu'on voit c'est le Z < -1. 
 
-Je pourrais entrer dans les détails pour résoudre ça mais [vous pouvez déduire la solution](http://stackoverflow.com/a/28301213/128511) comme on l'a fait dans les projections 2D. On a besoin de prendre Z, ajouter du déplacement et du changement d'échelle, et on peut ajuster tout ce qu'on veut entre -1 et +1. 
+Je pourrais entrer dans les détails pour résoudre ça mais [vous pouvez déduire la solution](https://stackoverflow.com/a/28301213/128511) comme on l'a fait dans les projections 2D. On a besoin de prendre Z, ajouter du déplacement et du changement d'échelle, et on peut ajuster tout ce qu'on veut entre -1 et +1. 
 
 Ce qui est génial c'est que tout ça peut être fusionné dans une seule matrice ! Mieux, plutôt qu'un 'facteur de fuite' on va plutôt prendre en entrée l'angle du champ de vision désiré et calculer le reste à partir de ça. 
 

webgl/lessons/fr/webgl-fundamentals.md

@@ -80,7 +80,7 @@ Pour de la 2D on travaillera plutôt en pixels qu'en espace de projection, donc
 pouvoir fournir des rectangles en pixels et les faire convertir en espace de projection à notre place.
 Voici le nouveau shader de vertex
 
-    <script id="2d-vertex-shader" type="x-shader/x-vertex">
+    <script id="vertex-shader-2d" type="x-shader/x-vertex">
     attribute vec2 a_position;
 
     uniform vec2 u_resolution;

webgl/lessons/index.md

@@ -7,7 +7,7 @@ They are NOT old rehashed out of date OpenGL articles like many others on the ne
 They are entirely new, discarding the old out of date ideas and bringing you
 to a full understanding of what WebGL really is and how it really works.
 
-If you are interested in WebGL2 please see [webgl2fundamentals.org](http://webgl2fundamentals.org)
+If you are interested in WebGL2 please see [webgl2fundamentals.org](https://webgl2fundamentals.org)
 
 {{{include "webgl/lessons/toc.html"}}}
 

webgl/lessons/ja/index.md

@@ -7,7 +7,7 @@ WebGLを基本から学ぶ授業.
 時代遅れのアイデアを捨てて、
 WebGLとは何か、WebGLがどうやって動くかについて、理解へと導く、完全に新たな記事である。
 
-WebGL2に興味があればこれを参照して下さい[webgl2fundamentals.org](http://webgl2fundamentals.org)
+WebGL2に興味があればこれを参照して下さい[webgl2fundamentals.org](https://webgl2fundamentals.org)
 
 {{{include "webgl/lessons/ja/toc.html"}}}
 

webgl/lessons/ja/langinfo.hanson

@@ -4,8 +4,8 @@
   defaultExampleCaption: "クリックして別のウインドウを開く",
   title: 'WebGLを基本から学ぶ',
   description: 'この記事はWebGLの基本から教える記事である。',
-  link: 'http://webglfundamentals.org/',
-  commentSectionHeader: '<div>質問? <a href="http://stackoverflow.com/questions/tagged/webgl">stackoverflowで質問(英語)</a>.</div>\n        <div>問題点/バグ? <a href="http://github.com/gfxfundamentals/webgl-fundamentals/issues">githubでissueを作成</a>.</div>',
+  link: 'https://webglfundamentals.org/',
+  commentSectionHeader: '<div>質問? <a href="https://stackoverflow.com/questions/tagged/webgl">stackoverflowで質問(英語)</a>.</div>\n        <div>問題点/バグ? <a href="https://github.com/gfxfundamentals/webgl-fundamentals/issues">githubでissueを作成</a>.</div>',
   missing: "ごめん！この記事はまだ翻訳されていない。[翻訳してくれますか？](https://github.com/gfxfundamentals/webgl-fundamentals)! 😄\n\n[ここに英語版がある]({{{origLink}}}).",
   toc: '目次',
   categoryMapping: {

webgl/lessons/ja/toc.html

@@ -1,6 +1,6 @@
 {{{tocHtml}}}
 <ul>
   <li><a href="/docs/">Helper API Docs(英語)</a></li>
-  <li><a href="http://twgljs.org">TWGL, A tiny WebGL helper library</a></li>
+  <li><a href="https://twgljs.org">TWGL, A tiny WebGL helper library</a></li>
   <li><a href="https://github.com/gfxfundamentals/webgl-fundamentals">github</a></li>
 </ul>

webgl/lessons/ja/webgl-2-textures.md

@@ -87,7 +87,7 @@ function main() {
 今回は２枚の画像をそれぞれ表示するのではなく、画素ひとつひとつを乗算するような処理にしておこう。
 
 ```
-<script id="2d-fragment-shader" type="x-shader/x-fragment">
+<script id="fragment-shader-2d" type="x-shader/x-fragment">
 precision mediump float;
 
 // ロードされたテクスチャ

webgl/lessons/ja/webgl-2d-matrices.md

@@ -179,7 +179,7 @@ newY = y * sy;
 
 シェーダーを変更しよう。前回のシェーダーはこれである。
 
-    <script id="2d-vertex-shader" type="x-shader/x-vertex">
+    <script id="vertex-shader-2d" type="x-shader/x-vertex">
     attribute vec2 a_position;
 
     uniform vec2 u_resolution;
@@ -202,7 +202,7 @@ newY = y * sy;
 
 新しいシェーダーはそれよりずいぶん簡単である。
 
-    <script id="2d-vertex-shader" type="x-shader/x-vertex">
+    <script id="vertex-shader-2d" type="x-shader/x-vertex">
     attribute vec2 a_position;
 
     uniform vec2 u_resolution;
@@ -379,7 +379,7 @@ newY = y * sy;
 
 そうすれば、シェーダーコードをもっと単純化出来る。これは最新のシェーダーの全て
 
-    <script id="2d-vertex-shader" type="x-shader/x-vertex">
+    <script id="vertex-shader-2d" type="x-shader/x-vertex">
     attribute vec2 a_position;
 
     uniform mat3 u_matrix;

webgl/lessons/ja/webgl-2d-rotation.md

@@ -28,7 +28,7 @@ TOC: 二次元での回転
 
 これは更新された頂点シェーダーである。
 
-    <script id="2d-vertex-shader" type="x-shader/x-vertex">
+    <script id="vertex-shader-2d" type="x-shader/x-vertex">
     attribute vec2 a_position;
 
     uniform vec2 u_resolution;

webgl/lessons/ja/webgl-2d-scale.md

@@ -12,7 +12,7 @@ TOC: 二次元での拡大縮小
 [前回のサンプル](webgl-2d-rotation.html)の更新はこれである。
 
 ```
-<script id="2d-vertex-shader" type="x-shader/x-vertex">
+<script id="vertex-shader-2d" type="x-shader/x-vertex">
 attribute vec2 a_position;
 
 uniform vec2 u_resolution;

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

@@ -129,7 +129,7 @@ function setGeometry(gl, x, y) {
 これは新しい頂点シェーダー
 
 ```
-<script id="2d-vertex-shader" type="x-shader/x-vertex">
+<script id="vertex-shader-2d" type="x-shader/x-vertex">
 attribute vec2 a_position;
 
 uniform vec2 u_resolution;

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

@@ -20,7 +20,7 @@ TOC: 三次元の正投影
 これは前のシェーダーである。
 
 ```
-<script id="2d-vertex-shader" type="x-shader/x-vertex">
+<script id="vertex-shader-2d" type="x-shader/x-vertex">
 attribute vec2 a_position;
 
 uniform mat3 u_matrix;
@@ -35,7 +35,7 @@ void main() {
 これは新しいシェーダーである。
 
 ```
-<script id="3d-vertex-shader" type="x-shader/x-vertex">
+<script id="vertex-shader-3d" type="x-shader/x-vertex">
 *attribute vec4 a_position;
 
 *uniform mat4 u_matrix;
@@ -326,7 +326,7 @@ Zもピクセル単位で計算する。`width`のような値を`depth`に与
 これは新しい頂点シェーダーである。
 
 ```
-<script id="3d-vertex-shader" type="x-shader/x-vertex">
+<script id="vertex-shader-3d" type="x-shader/x-vertex">
 attribute vec4 a_position;
 +attribute vec4 a_color;
 
@@ -347,7 +347,7 @@ void main() {
 その色はピクセルシェーダーで使わなければいけない。
 
 ```
-<script id="3d-fragment-shader" type="x-shader/x-fragment">
+<script id="fragment-shader-3d" type="x-shader/x-fragment">
 precision mediump float;
 
 +// 頂点シェーダーに渡された色。

webgl/lessons/ja/webgl-3d-perspective.md

@@ -50,7 +50,7 @@ Zは補正係数を掛けると調整出来るようになる。
 じゃあ、やってみょう！最初に頂点シェーダーを更新して、頂点位置を補正係数に掛けたZで割る。
 
 ```
-<script id="3d-vertex-shader" type="x-shader/x-vertex">
+<script id="vertex-shader-3d" type="x-shader/x-vertex">
 ...
 +uniform float u_fudgeFactor;  // 補正係数
 ...
@@ -106,7 +106,7 @@ void main() {
 簡単に確認したければ、頂点シェーダーで手動でXとYを割る代わりに`gl_Position.w`を`zToDivideBy`に割り当てる。
 
 ```
-<script id="2d-vertex-shader" type="x-shader/x-vertex">
+<script id="vertex-shader-2d" type="x-shader/x-vertex">
 ...
 uniform float u_fudgeFactor;
 ...
@@ -227,7 +227,7 @@ w_out = z_in * fudgeFactor + 1;
 まず頂点シェーダーを前の単純な形に戻す。
 
 ```
-<script id="2d-vertex-shader" type="x-shader/x-vertex">
+<script id="vertex-shader-2d" type="x-shader/x-vertex">
 uniform mat4 u_matrix;
 
 void main() {
@@ -281,7 +281,7 @@ function makeZToWMatrix(fudgeFactor) {
 それは何でだろう？何で「F」が消えているか？XとYは-1〜+1の制限があると同じようにZも-1〜+1の制限がある。
 この消えているところはZが−１以下になっている場合である。
 
-その問題を解決する数学を細かく説明出来るけど、二次元の投影行列数学と同じように[答えを導き出すこと出来るだろう](http://stackoverflow.com/a/28301213/128511)。Zをとって、何かを足して、何かにスケールすると、
+その問題を解決する数学を細かく説明出来るけど、二次元の投影行列数学と同じように[答えを導き出すこと出来るだろう](https://stackoverflow.com/a/28301213/128511)。Zをとって、何かを足して、何かにスケールすると、
 どの値の範囲からも-1〜+1出来る。
 
 それら全部を一つの行列で出来る。その上、補正係数の`fudgeFactor`は`fieldOfView`という視野も同じ行列で決められる。

webgl/lessons/ja/webgl-boilerplate.md

@@ -179,14 +179,14 @@ script要素から読み込んでコンパイルし、プログラムにアタ
 以上で、私の「最小のWebGLひな型コード(boilerplate code)」のおおまかな紹介を終わります。
 [`webgl-utils.js`のコードはここにあります](../resources/webgl-utils.js)。
 
-さらにしっかり構成されたライブラリに興味があるようでしたら[TWGL.js](http://twgljs.org)
+さらにしっかり構成されたライブラリに興味があるようでしたら[TWGL.js](https://twgljs.org)
 をチェックしてください。
 
 WebGLを複雑に見せているもう一つの要素は「シェーダーにデータを渡す手順」です。
 そのあたりの話題については「[WebGLの仕組み](webgl-how-it-works.html)」
 で紹介しています。
 これについては、「[少ないコード、大きな喜び](webgl-less-code-more-fun.html)」や、
-[TWGL](http://twgljs.org)も参考になるはずです。
+[TWGL](https://twgljs.org)も参考になるはずです。
 
 以上のほかにも、同様の理由で作られたスクリプトがあるので紹介しておきます。
 

webgl/lessons/ja/webgl-fundamentals.md

@@ -144,7 +144,7 @@ WebGLでは、色は０〜１で指定する。
 GLSLのstringをする方法はいくつかある。文字列の連結とか、AJAXでダウンロードすることとか、複数行テンプレートstring(multiline template strings)とか。
 今回は、typeがJavaScriptではないscript要素に入れる方法をとる。
 
-    <script id="2d-vertex-shader" type="notjs">
+    <script id="vertex-shader-2d" type="notjs">
 
       // バッファーからデータを取る属性
       attribute vec4 a_position;
@@ -158,7 +158,7 @@ GLSLのstringをする方法はいくつかある。文字列の連結とか、A
 
     </script>
 
-    <script id="2d-fragment-shader" type="notjs">
+    <script id="fragment-shader-2d" type="notjs">
 
       // フラグメントシェーダーは既定の精度がないので選択することが必要である。
       // 「mediump」は一般的な既定の設定である。それは「中間の精度」の意味である。
@@ -198,8 +198,8 @@ GLSLのstringをする方法はいくつかある。文字列の連結とか、A
 
 出来たら、その関数でシェーダー２つを作成出来る
 
-    var vertexShaderSource = document.querySelector("#2d-vertex-shader").text;
-    var fragmentShaderSource = document.querySelector("#2d-fragment-shader").text;
+    var vertexShaderSource = document.querySelector("#vertex-shader-2d").text;
+    var fragmentShaderSource = document.querySelector("#fragment-shader-2d").text;
 
     var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
     var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
@@ -385,7 +385,7 @@ WebGLは`gl_Position`に割り当てられた３つの値で三角形を描画
 ピクセルで与えて、ピクセル座標からクリップ空間に自動で変換するように、シェーダーの計算の仕方を変更しよう。
 これは変更されたシェーダー：
 
-    <script id="2d-vertex-shader" type="notjs">
+    <script id="vertex-shader-2d" type="notjs">
 
     -  attribute vec4 a_position;
     *  attribute vec2 a_position;
@@ -473,7 +473,7 @@ Note: このサンプルとその後の全てのサンプルは、シェーダ
 
 まずフラグメントシェーダーを、色ユニフォームが使えるようにする。
 
-    <script id="2d-fragment-shader" type="notjs">
+    <script id="fragment-shader-2d" type="notjs">
       precision mediump float;
 
     +  uniform vec4 u_color;