Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix WebGL example links #16765

Merged
merged 4 commits into from
Nov 6, 2023
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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/tree/gh-pages/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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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/tree/gh-pages/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")}}
Original file line number Diff line number Diff line change
Expand Up @@ -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/tree/gh-pages/tutorial/sample6) | [Abrir esta demo en una nueva pestaña](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample6/)

## Texturas entre dominios

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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")}}
Original file line number Diff line number Diff line change
Expand Up @@ -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.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/dom-examples/tree/main/webgl-examples/issues/20).

```js
function drawScene(gl, programInfo, buffers) {
Expand Down Expand Up @@ -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/tree/gh-pages/tutorial/sample2) | [Ouvrir cette démo dans une nouvelle page](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample2/)

## Opérations utilitaires matricielles

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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/tree/gh-pages/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") }}
Original file line number Diff line number Diff line change
Expand Up @@ -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/tree/gh-pages/tutorial).

## Préparation au rendu 3D

Expand Down Expand Up @@ -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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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/tree/gh-pages/tutorial/sample7) | [Ouvrir cette démo dans une nouvelle page](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample7/)

## Exercices

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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/tree/gh-pages/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")}}
Original file line number Diff line number Diff line change
Expand Up @@ -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/tree/gh-pages/tutorial/sample6) | [Ouvrir cette démo dans une nouvelle page](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample6/)

## Textures inter-domaines

Expand Down
4 changes: 2 additions & 2 deletions files/fr/web/guide/audio_and_video_manipulation/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/tree/gh-pages/tutorial/sample8) ([la voir en direct](https://mdn.github.io/webgl-examples/tutorial/sample8/) aussi).

### Vitesse de lecture

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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/tree/gh-pages/tutorial/sample4) | [新しいページでデモを開く](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample4/)

## さらに行列を操作する

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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/tree/gh-pages/tutorial)で確認できます。

この一連の記事が WebGL 自体を紹介していることに注意してください。ただし [THREE.js](https://threejs.org/) など、 WebGL の機能をカプセル化する多くのフレームワークが利用でき、三次元アプリケーションとゲームを簡単に構築することが可能です。

Expand Down Expand Up @@ -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/tree/gh-pages/tutorial/sample1) | [新しいページでデモを開く](https://mdn.github.io/webgl-examples/tutorial/sample1/)

## 関連情報

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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/tree/gh-pages/tutorial/sample7) | [新しいページでデモを開く](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample7/)

## 読者への課題

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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/tree/gh-pages/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")}}
Original file line number Diff line number Diff line change
Expand Up @@ -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/tree/gh-pages/tutorial/sample6) | [新しいページでデモを開く](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample6/)

## クロスドメインのテクスチャ

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
4 changes: 2 additions & 2 deletions files/ja/web/guide/audio_and_video_manipulation/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -119,9 +119,9 @@ processor.doLoad();

[WebGL](/ja/docs/Web/WebGL) はキャンバスを使用してハードウェアアクセラレーションによる三次元や二次元の描画を行う強力な API です。 {{htmlelement("video")}} 要素と組み合わせることで、動画をテクチャとして利用できます。つまり三次元空間上に動画を配置し、再生できます。

{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510) }}
{{EmbedGHLiveSample('dom-examples/webgl-examples/tutorial/sample8/index.html', 670, 510) }}

> **メモ:** [このデモのソースコードは GitHub](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample8) にあります ([ライブで表示](https://mdn.github.io/webgl-examples/tutorial/sample8/)も)。
> **メモ:** [このデモのソースコードは GitHub](https://github.com/mdn/dom-examples/tree/main/webgl-examples/tree/gh-pages/tutorial/sample8) にあります ([ライブで表示](https://mdn.github.io/webgl-examples/tutorial/sample8/)も)。

### 再生速度

Expand Down
Loading