Skip to content

Commit

Permalink
fix: update links to webgl-examples (mdn#17711)
Browse files Browse the repository at this point in the history
  • Loading branch information
Schalk Neethling authored Jun 27, 2022
1 parent 2f3c653 commit 57f6004
Show file tree
Hide file tree
Showing 11 changed files with 22 additions and 22 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,6 @@ This example demonstrates how to use video files as textures for WebGL surfaces.

## Textures from video

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

{{Previous("Learn/WebGL/By_example/Textures_from_code")}}
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ tags:

Once you've successfully [created a WebGL context](/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL), you can start rendering into it. A simple thing we can do is draw a simple square untextured plane, so let's start there, by building code to draw a square plane.

The complete source code for this project is [available on GitHub](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample2).
The complete source code for this project is [available on GitHub](https://github.com/mdn/dom-examples/webgl-examples/tree/master/tutorial/sample2).

> **Note:** This project uses the [glMatrix](https://glmatrix.net/) library to perform its matrix operations, so you will need to include that in your project. We're loading a copy from a CDN in our HTML's {{HTMLElement("head")}}.
Expand Down Expand Up @@ -300,9 +300,9 @@ The first step is to clear the canvas to our background color; then we establish

Then we establish the position of the square plane by loading the identity position and translating away from the camera by 6 units. After that, we bind the square's vertex buffer to the attribute the shader is using for `aVertexPosition` and we tell WebGL how to pull the data out of it. Finally we draw the object by calling the {{domxref("WebGLRenderingContext.drawArrays()", "drawArrays()")}} method.

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

[View the complete code](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample2) | [Open this demo on a new page](https://mdn.github.io/webgl-examples/tutorial/sample2/)
[View the complete code](https://github.com/mdn/dom-examples/webgl-examples/tree/master/tutorial/sample2) | [Open this demo on a new page](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample2/)

## Matrix utility operations

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@ squareRotation += deltaTime;

This code uses the amount of time that's passed since the last time we updated the value of `squareRotation` to determine how far to rotate the square.

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

[View the complete code](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample4) | [Open this demo on a new page](https://mdn.github.io/webgl-examples/tutorial/sample4/)
[View the complete code](https://github.com/mdn/dom-examples/webgl-examples/tree/master/tutorial/sample4) | [Open this demo on a new 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 @@ -145,9 +145,9 @@ In the definition of `render()` if `copyVideo` is true, then we call `updateText

That's all there is to it!

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

[View the complete code](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample8) | [Open this demo on a new page](https://mdn.github.io/webgl-examples/tutorial/sample8/)
[View the complete code](https://github.com/mdn/dom-examples/webgl-examples/tree/master/tutorial/sample8) | [Open this demo on a new page](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample8/)

## See also

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -177,8 +177,8 @@ mat4.rotate(modelViewMatrix, modelViewMatrix, cubeRotation * .7, [0, 1, 0]);

At this point, we now have an animated cube rotating, its six faces rather vividly colored.

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

[View the complete code](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample5) | [Open this demo on a new page](https://mdn.github.io/webgl-examples/tutorial/sample5/)
[View the complete code](https://github.com/mdn/dom-examples/webgl-examples/tree/master/tutorial/sample5) | [Open this demo on a new page](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample5/)

{{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ WebGL programs consist of control code written in JavaScript and shader code (GL

This article will introduce you to the basics of using WebGL. It's assumed that you already have an understanding of the mathematics involved in 3D graphics, and this article doesn't pretend to try to teach you 3D graphics concepts itself.

The code examples in this tutorial can also be found in the [webgl-examples GitHub repository](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial).
The code examples in this tutorial can also be found in the [webgl-examples folder on GitHub](https://github.com/mdn/dom-examples/webgl-examples/tree/master/tutorial).

It's worth noting here that this series of articles introduces WebGL itself; however, there are a number of frameworks available that encapsulate WebGL's capabilities, making it easier to build 3D applications and games, such as [THREE.js](https://threejs.org/) and [BABYLON.js](https://www.babylonjs.com/).

Expand Down Expand Up @@ -64,9 +64,9 @@ If the context is successfully initialized, the variable `gl` is our reference t

At this point, you have enough code that the WebGL context should successfully initialize, and you should wind up with a big black, empty box, ready and waiting to receive content.

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

[View the complete code](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample1) | [Open this demo on a new page](https://mdn.github.io/webgl-examples/tutorial/sample1/)
[View the complete code](https://github.com/mdn/dom-examples/webgl-examples/tree/master/tutorial/sample1) | [Open this demo on a new page](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample1/)

## See also

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -230,9 +230,9 @@ The only thing left is to look up the location of the `aVertexNormal` attribute

And that's it!

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

[View the complete code](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample7) | [Open this demo on a new page](https://mdn.github.io/webgl-examples/tutorial/sample7/)
[View the complete code](https://github.com/mdn/dom-examples/webgl-examples/tree/master/tutorial/sample7) | [Open this demo on a new page](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample7/)

## Exercises for the reader

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -127,8 +127,8 @@ Then, `drawScene()` can have the following added to it so it actually uses these
}
```
{{EmbedGHLiveSample('webgl-examples/tutorial/sample3/index.html', 670, 510) }}
{{EmbedGHLiveSample('dom-examples/webgl-examples/tutorial/sample3/index.html', 670, 510) }}
[View the complete code](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample3) | [Open this demo on a new page](https://mdn.github.io/webgl-examples/tutorial/sample3/)
[View the complete code](https://github.com/mdn/dom-examples/webgl-examples/tree/master/tutorial/sample3) | [Open this demo on a new 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 @@ -271,9 +271,9 @@ function drawScene(gl, programInfo, buffers, texture, deltaTime) {
At this point, the rotating cube should be good to go.
{{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510) }}
{{EmbedGHLiveSample('dom-examples/webgl-examples/tutorial/sample6/index.html', 670, 510) }}
[View the complete code](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample6) | [Open this demo on a new page](https://mdn.github.io/webgl-examples/tutorial/sample6/)
[View the complete code](https://github.com/mdn/dom-examples/webgl-examples/tree/master/tutorial/sample6) | [Open this demo on a new page](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample6/)
## Cross-domain textures
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -528,7 +528,7 @@ We copy the transform's {{domxref("XRRigidTransform.matrix", "matrix")}} into `m

The `renderScene()` function is called to actually render the parts of the world that are visible to the user at the moment. It's called once for each eye, with slightly different positions for each eye, in order to establish the 3D effect needed for XR gear.

Most of this code is typical WebGL rendering code, taken directly from the `drawScene()` function in the [Lighting in WebGL](/en-US/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL) article, and it's there that you should look for details on the WebGL rendering parts of this example \[[view the code on GitHub](https://github.com/mdn/webgl-examples/blob/gh-pages/tutorial/sample7/webgl-demo.js)]. But here it begins with some code specific to this example, so we'll take a deeper look at that part.
Most of this code is typical WebGL rendering code, taken directly from the `drawScene()` function in the [Lighting in WebGL](/en-US/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL) article, and it's there that you should look for details on the WebGL rendering parts of this example \[[view the code on GitHub](https://github.com/mdn/dom-examples/webgl-examples/blob/master/tutorial/sample7/webgl-demo.js)]. But here it begins with some code specific to this example, so we'll take a deeper look at that part.

```js
const normalMatrix = mat4.create();
Expand Down
4 changes: 2 additions & 2 deletions files/en-us/web/guide/audio_and_video_manipulation/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -114,9 +114,9 @@ You can achieve the same result by applying the {{cssxref("filter-function/grays

[WebGL](/en-US/docs/Web/API/WebGL_API) is a powerful API that uses canvas to draw hardware-accelerated 3D or 2D scenes. You can combine WebGL and the {{htmlelement("video")}} element to create video textures, which means you can put video inside 3D scenes.

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

> **Note:** You can find the [source code of this demo on GitHub](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample8) ([see it live](https://mdn.github.io/webgl-examples/tutorial/sample8/) also).
> **Note:** You can find the [source code of this demo on GitHub](https://github.com/mdn/dom-examples/webgl-examples/tree/master/tutorial/sample8) ([see it live](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample8/) also).
### Playback rate

Expand Down

0 comments on commit 57f6004

Please sign in to comment.