Fix WebGL example links (#16765)

* Fix WebGL example links

* Fix WebGL live example links

* Fix WebGL example links

* Tweak some links for fr

---------

Co-authored-by: SphinxKnight <[email protected]>

files/es/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md

@@ -260,9 +260,9 @@ El primer paso es limpiar el canvas de nuestro color de fondo; establecemos la p
 
 Entonces establecemos la posición del cuadrado plano al cargar la posición de identidad y alejando la cámara en 6 unidades. Déspues de eso, enlazamos el buffer del vértice del cuadrado al atributo que el shader estaba usando para `aVertexPosition` y le decimos a WebGL como jalar los datos fuera de este. Finalmente dibujamos el objeto al llamar el método {{domxref("WebGLRenderingContext.drawArrays()", "drawArrays()")}}.
 
-{{EmbedGHLiveSample('webgl-examples/tutorial/sample2/index.html', 670, 510) }}
+{{EmbedGHLiveSample('dom-examples/webgl-examples/tutorial/sample2/index.html', 670, 510) }}
 
-[Ver código completo](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample2) | [Abrir esta demostración en una nueva página](http://mdn.github.io/webgl-examples/tutorial/sample2/)
+[Ver código completo](https://github.com/mdn/dom-examples/tree/main/webgl-examples/tutorial/sample2) | [Abrir esta demostración en una nueva página](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample2/)
 
 ## Utilidades para operaciones de Matrices
 

files/es/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md

@@ -89,8 +89,8 @@ Then, drawScene() puede ser revisado para que utilice dichos colores cuando dibu
 
 gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer); gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
 
-{{EmbedGHLiveSample('webgl-examples/tutorial/sample3/index.html', 670, 510) }}
+{{EmbedGHLiveSample('dom-examples/webgl-examples/tutorial/sample3/index.html', 670, 510) }}
 
-[Ver el código completo](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample3) | [Abrir demostración en una nueva página](http://mdn.github.io/webgl-examples/tutorial/sample3/)
+[Ver el código completo](https://github.com/mdn/dom-examples/tree/main/webgl-examples/tutorial/sample3) | [Abrir demostración en una nueva página](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample3/)
 
 {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}

files/es/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md

@@ -177,9 +177,9 @@ GL proporciona 32 registros de textura; La primera de ellas es gl.TEXTURE0. Vinc
 
 En este punto, el cubo giratorio debe estar listo.
 
-{{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510) }}
+{{EmbedGHLiveSample('dom-examples/webgl-examples/tutorial/sample6/index.html', 670, 510) }}
 
-[Ver el código completo](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample6) | [Abrir esta demo en una nueva pestaña](http://mdn.github.io/webgl-examples/tutorial/sample6/)
+[Ver el código completo](https://github.com/mdn/dom-examples/tree/main/webgl-examples/tutorial/sample6) | [Abrir esta demo en una nueva pestaña](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample6/)
 
 ## Texturas entre dominios
 

files/fr/web/api/webgl_api/by_example/video_textures/index.md

@@ -9,6 +9,6 @@ Cet exemple illustre comment utiliser des fichiers vidéos comme textures.
 
 ### Des textures à partir de vidéos
 
-{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510)}}
+{{EmbedGHLiveSample('dom-examples/webgl-examples/tutorial/sample8/index.html', 670, 510)}}
 
 {{Previous("Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}

files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md

@@ -188,7 +188,7 @@ Une fois que cela est fait, nous créons un tableau JavaScript contenant la posi
 
 Une fois que les shaders sont définis, que les emplacements sont retrouvés, et que les positions des sommets du carré 2D sont stockées dans le tampon, nous pouvons faire effectivement le rendu de la scène. Puisque nous n'animons rien dans cet exemple, notre fonction `drawScene()` est très simple. Elle utilise quelques routines utilitaires que nous décrirons sous peu.
 
-> **Note :** Vous pourriez obtenir une erreur JavaScript indiquant _"mat4 n'est pas défini"_. Cela signifie qu'il existe une dépendance à **glmatrix**. Vous pouvez inclure [gl-matrix.js](https://mdn.github.io/webgl-examples/tutorial/gl-matrix.js) pour résoudre ce problème, comme suggéré [ici](https://github.com/mdn/webgl-examples/issues/20).
+> **Note :** Vous pourriez obtenir une erreur JavaScript indiquant _"mat4 n'est pas défini"_. Cela signifie qu'il existe une dépendance à **glmatrix**. Vous pouvez inclure [gl-matrix](https://www.npmjs.com/package/gl-matrix) pour résoudre ce problème.
 
 ```js
 function drawScene(gl, programInfo, buffers) {
@@ -281,9 +281,9 @@ La première étape consiste à effacer le canevas avec notre arrière plan ; en
 
 Ensuite, nous établissons la position du carré 2D en chargeant la position de l'origine et en nous déplaçant de 6 unités à partir de la caméra. Après cela, nous lions le tampon des sommets du carré à l'attribut que le shader utilise comme `aVertexPosition` et nous indiquons à WebGL comment en extraire les données. Enfin, nous dessinons l'objet en appelant la méthode {{domxref ("WebGLRenderingContext.drawArrays()", "drawArrays()")}}.
 
-{{EmbedGHLiveSample('webgl-examples/tutorial/sample2/index.html', 670, 510) }}
+{{EmbedGHLiveSample('dom-examples/webgl-examples/tutorial/sample2/index.html', 670, 510) }}
 
-[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample2) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample2/)
+[Voir le code complet](https://github.com/mdn/dom-examples/tree/main/webgl-examples/tutorial/sample2) | [Ouvrir cette démo dans une nouvelle page](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample2/)
 
 ## Opérations utilitaires matricielles
 

files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md

@@ -54,8 +54,8 @@ squareRotation += deltaTime;
 
 Ce code utilise le laps de temps qui s'est écoulé depuis la dernière fois que nous avons mis à jour la valeur `squareRotation` pour déterminer de combien faire tourner le carré.
 
-{{EmbedGHLiveSample('webgl-examples/tutorial/sample4/index.html', 670, 510) }}
+{{EmbedGHLiveSample('dom-examples/webgl-examples/tutorial/sample4/index.html', 670, 510) }}
 
-[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample4) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample4/)
+[Voir le code complet](https://github.com/mdn/dom-examples/tree/main/webgl-examples/tutorial/sample4) | [Ouvrir cette démo dans une nouvelle page](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample4/)
 
 {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}

files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md

@@ -7,7 +7,7 @@ slug: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
 
 Cet article va vous donner une introduction aux bases de l'utilisation de WebGL. Il est supposé que vous avez déjà une compréhension des mathématiques impliquées dans les graphismes 3D, et cet article ne prétend pas vous enseigner les concepts des graphismes 3D par eux-mêmes.
 
-Les exemples de code de ce tutoriel peuvent aussi être trouvés dans le [webgl-examples GitHub repository](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial).
+Les exemples de code de ce tutoriel peuvent aussi être trouvés dans le [webgl-examples GitHub repository](https://github.com/mdn/dom-examples/tree/main/webgl-examples/tutorial).
 
 ## Préparation au rendu 3D
 
@@ -57,9 +57,9 @@ Si le contexte est initialisé avec succès, la variable `gl` sera notre référ
 
 A ce stade, votre code est suffisant pour que le contexte WebGL puisse s'initialiser avec succès, et vous devriez vous retrouver avec une grande boîte noire et vide, prête à - et attendant de - recevoir du contenu.
 
-{{EmbedGHLiveSample('webgl-examples/tutorial/sample1/index.html', 670, 510) }}
+{{EmbedGHLiveSample('dom-examples/webgl-examples/tutorial/sample1/index.html', 670, 510) }}
 
-[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample1) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample1/)
+[Voir le code complet](https://github.com/mdn/dom-examples/tree/main/webgl-examples/tutorial/sample1) | [Ouvrir cette démo dans une nouvelle page](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample1/)
 
 ## Voir aussi
 

files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.md

@@ -151,9 +151,9 @@ Ici nous récupérons la couleur de chaque texel (tas de pixel pour une texture)
 
 Et c'est tout !
 
-{{EmbedGHLiveSample('webgl-examples/tutorial/sample7/index.html', 670, 510) }}
+{{EmbedGHLiveSample('dom-examples/webgl-examples/tutorial/sample7/index.html', 670, 510) }}
 
-[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample7) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample7/)
+[Voir le code complet](https://github.com/mdn/dom-examples/tree/main/webgl-examples/tutorial/sample7) | [Ouvrir cette démo dans une nouvelle page](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample7/)
 
 ## Exercices
 

files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md

@@ -121,8 +121,8 @@ Ensuite, `drawScene()` peut être modifié pour utiliser réellement ces couleur
 }
 ```
 
-{{EmbedGHLiveSample('webgl-examples/tutorial/sample3/index.html', 670, 510) }}
+{{EmbedGHLiveSample('dom-examples/webgl-examples/tutorial/sample3/index.html', 670, 510) }}
 
-[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample3) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample3/)
+[Voir le code complet](https://github.com/mdn/dom-examples/tree/main/webgl-examples/tutorial/sample3) | [Ouvrir cette démo dans une nouvelle page](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample3/)
 
 {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}

files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md

@@ -287,9 +287,9 @@ function drawScene(gl, programInfo, buffers, texture, deltaTime) {
 
 Arrivés ce point, le cube en rotation devrait être prêt à fonctionner.
 
-{{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510) }}
+{{EmbedGHLiveSample('dom-examples/webgl-examples/tutorial/sample6/index.html', 670, 510) }}
 
-[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample6) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample6/)
+[Voir le code complet](https://github.com/mdn/dom-examples/tree/main/webgl-examples/tutorial/sample6) | [Ouvrir cette démo dans une nouvelle page](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample6/)
 
 ## Textures inter-domaines
 

files/fr/web/guide/audio_and_video_manipulation/index.md

@@ -30,10 +30,10 @@ On peut configurer notre lecteur vidéo et l'élément `<canvas>` comme ceci:
   height="270"
   crossorigin="anonymous">
   <source
-    src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm"
+    src="https://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm"
     type="video/webm" />
   <source
-    src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"
+    src="https://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"
     type="video/mp4" />
 </video>
 
@@ -113,9 +113,9 @@ processor.doLoad();
 
 Exemple:
 
-{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510) }}
+{{EmbedGHLiveSample('dom-examples/webgl-examples/tutorial/sample8/index.html', 670, 510) }}
 
-> **Note :** Vous pouvez trouver le [code source de cette démo sur GitHub](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample8) ([la voir en direct](https://mdn.github.io/webgl-examples/tutorial/sample8/) aussi).
+> **Note :** Vous pouvez trouver le [code source de cette démo sur GitHub](https://github.com/mdn/dom-examples/tree/main/webgl-examples/tutorial/sample8) ([la voir en direct](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample8/) aussi).
 
 ### Vitesse de lecture
 
@@ -127,7 +127,7 @@ HTML:
 <video
   id="my-video"
   controls
-  src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"></video>
+  src="https://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"></video>
 ```
 
 JavaScript:
@@ -142,10 +142,10 @@ myVideo.playbackRate = 2;
 ```html hidden
 <video id="my-video" controls="true" width="480" height="270">
   <source
-    src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm"
+    src="https://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm"
     type="video/webm" />
   <source
-    src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"
+    src="https://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"
     type="video/mp4" />
 </video>
 <div class="playable-buttons">

files/ja/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md

@@ -91,9 +91,9 @@ mvTranslate([squareXOffset, squareYOffset, squareZOffset]);
 
 以上で、正方形が回転するとともにズームイン・ズームアウトしながら、環境内を近づいたり遠ざかったりするようランダムに動き回ります。これはスクリーンセーバーのようです。
 
-{{EmbedGHLiveSample('webgl-examples/tutorial/sample4/index.html', 670, 510)}}
+{{EmbedGHLiveSample('dom-examples/webgl-examples/tutorial/sample4/index.html', 670, 510)}}
 
-[コードを確認する](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample4) | [新しいページでデモを開く](http://mdn.github.io/webgl-examples/tutorial/sample4/)
+[コードを確認する](https://github.com/mdn/dom-examples/tree/main/webgl-examples/tutorial/sample4) | [新しいページでデモを開く](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample4/)
 
 ## さらに行列を操作する
 

files/ja/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md

@@ -11,7 +11,7 @@ WebGL のプログラムは JavaScript で記述する制御コードと、コ
 
 この記事では、 WebGL の基礎を紹介します。ここでは、三次元グラフィックスに関する数学的な知識を理解していることを前提とします。よって、 OpenGL そのものの説明は行いません。
 
-このチュートリアルで使用するコード例は、[GitHub の webgl-examples リポジトリー](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial)で確認できます。
+このチュートリアルで使用するコード例は、[GitHub の webgl-examples リポジトリー](https://github.com/mdn/dom-examples/tree/main/webgl-examples/tutorial)で確認できます。
 
 この一連の記事が WebGL 自体を紹介していることに注意してください。ただし [THREE.js](https://threejs.org/) など、 WebGL の機能をカプセル化する多くのフレームワークが利用でき、三次元アプリケーションとゲームを簡単に構築することが可能です。
 
@@ -63,9 +63,9 @@ window.onload = main;
 
 この時点で、 WebGL コンテキストが正常に初期化されるのに十分なコードがあり、コンテンツを受信する準備ができて待機している大きな黒い空のボックスになります。
 
-{{EmbedGHLiveSample('webgl-examples/tutorial/sample1/index.html', 670, 510) }}
+{{EmbedGHLiveSample('dom-examples/webgl-examples/tutorial/sample1/index.html', 670, 510) }}
 
-[コードを確認する](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample1) | [新しいページでデモを開く](https://mdn.github.io/webgl-examples/tutorial/sample1/)
+[コードを確認する](https://github.com/mdn/dom-examples/tree/main/webgl-examples/tutorial/sample1) | [新しいページでデモを開く](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample1/)
 
 ## 関連情報
 

files/ja/web/api/webgl_api/tutorial/lighting_in_webgl/index.md

@@ -153,9 +153,9 @@ gl.uniformMatrix4fv(
 
 以上で完成です!
 
-{{EmbedGHLiveSample('webgl-examples/tutorial/sample7/index.html', 670, 510)}}
+{{EmbedGHLiveSample('dom-examples/webgl-examples/tutorial/sample7/index.html', 670, 510)}}
 
-[コードを確認する](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample7) | [新しいページでデモを開く](http://mdn.github.io/webgl-examples/tutorial/sample7/)
+[コードを確認する](https://github.com/mdn/dom-examples/tree/main/webgl-examples/tutorial/sample7) | [新しいページでデモを開く](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample7/)
 
 ## 読者への課題
 

files/ja/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md

@@ -92,8 +92,8 @@ gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
 gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
 ```
 
-{{EmbedGHLiveSample('webgl-examples/tutorial/sample3/index.html', 670, 510)}}
+{{EmbedGHLiveSample('dom-examples/webgl-examples/tutorial/sample3/index.html', 670, 510)}}
 
-[コードを確認する](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample3) | [新しいページでデモを開く](http://mdn.github.io/webgl-examples/tutorial/sample3/)
+[コードを確認する](https://github.com/mdn/dom-examples/tree/main/webgl-examples/tutorial/sample3) | [新しいページでデモを開く](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample3/)
 
 {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}

files/ja/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md

@@ -178,9 +178,9 @@ GL は 32 個のテクスチャレジスタを提供し、その 1 つ目が `gl
 
 以上でテクスチャが貼り付けられた、回転するキューブが完成します。
 
-{{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510)}}
+{{EmbedGHLiveSample('dom-examples/webgl-examples/tutorial/sample6/index.html', 670, 510)}}
 
-[コードを確認する](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample6) | [新しいページでデモを開く](http://mdn.github.io/webgl-examples/tutorial/sample6/)
+[コードを確認する](https://github.com/mdn/dom-examples/tree/main/webgl-examples/tutorial/sample6) | [新しいページでデモを開く](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample6/)
 
 ## クロスドメインのテクスチャ
 

files/ja/web/api/webxr_device_api/movement_and_motion/index.md

@@ -518,7 +518,7 @@ function applyViewerControls(refSpace) {
 
 `renderScene()` 関数は、ユーザーがその瞬間に見える世界の部分を実際にレンダリングするために呼び出されます。 XR ギアに必要な 3D 効果を確立するために、それぞれの目でわずかに異なる位置を使用し、それぞれの目に対して 1 回ずつ呼び出されます。
 
-このコードのほとんどは、[WebGL でのライティング](/ja/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL)の記事の `drawScene()` 関数から直接取得した典型的な WebGL レンダリングコードであり、この例の WebGL レンダリング部分の詳細についてはそこを参照してください（[GitHub でコードを見る](https://github.com/mdn/webgl-examples/blob/gh-pages/tutorial/sample7/webgl-demo.js)）。 しかし、ここでは、この例に固有のコードから始まっているので、その部分について詳しく見ていきます。
+このコードのほとんどは、[WebGL でのライティング](/ja/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL)の記事の `drawScene()` 関数から直接取得した典型的な WebGL レンダリングコードであり、この例の WebGL レンダリング部分の詳細についてはそこを参照してください（[GitHub でコードを見る](https://github.com/mdn/dom-examples/tree/main/webgl-examples/blob/gh-pages/tutorial/sample7/webgl-demo.js)）。 しかし、ここでは、この例に固有のコードから始まっているので、その部分について詳しく見ていきます。
 
 ```js
 const normalMatrix = mat4.create();