# Computer Graphics for Games

Links for Lecture Skeletal Animation on 24/03/2026

#### Link 1 - An Example Skeleton

{% embed url="<https://playground.babylonjs.com/#BCU1XR#8096>" %}

#### Link 2  - Animation Keyframe Data in JSON

{% embed url="<https://www.chinedufn.com/webgl-skeletal-animation-tutorial/>" %}

Right Click, choose "Inspect", Select "Sources"-> basic-overview-tutorial.js Line 4

<figure><img src="https://3464970502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JUKGJZ67JX02QZdPhsy%2Fuploads%2FaV9r2Jz9eqeHvoDZA2um%2Fimage.png?alt=media&#x26;token=c4f4cf8b-7217-4d3e-aaf3-c57ea51d05e3" alt="" width="375"><figcaption></figcaption></figure>

#### Link 3 - 2 Link Arms

{% embed url="<http://learnwebgl.brown37.net/transformations2/transformations_example4.html>" %}

Play with robot arm rotations

<figure><img src="https://3464970502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JUKGJZ67JX02QZdPhsy%2Fuploads%2FxpvvtVxZEHBPtyy26ZvX%2Fimage.png?alt=media&#x26;token=a7199a17-c46f-4858-9ae7-66c4d7809270" alt="" width="375"><figcaption></figcaption></figure>

#### Link 4 - Have a Look of the Transform Code

{% embed url="<https://jsfiddle.net/debianx/jvuxz3qk/28/>" %}

<figure><img src="https://3464970502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JUKGJZ67JX02QZdPhsy%2Fuploads%2FQJquaAosPKkkVzAotDyx%2Fimage.png?alt=media&#x26;token=aaead21b-eb83-4c35-8412-001a8ec3a982" alt="" width="375"><figcaption></figcaption></figure>

#### Link 5 - Play with Bone/Joint Rotations

{% embed url="<https://playground.babylonjs.com/#BCU1XR#8096>" %}

<figure><img src="https://3464970502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JUKGJZ67JX02QZdPhsy%2Fuploads%2FtNPApiBKuFKaQqLH4cxI%2Fimage.png?alt=media&#x26;token=e2d09741-103b-4fc8-99e4-3931379a98f3" alt="" width="375"><figcaption></figcaption></figure>

#### Link 6 - Linear Blend Skinning Artefacts

{% embed url="<https://playground.babylonjs.com/#1BZJVJ#1110>" %}

1. Rotate the Upper Arm around its X axis to see twists
2. Rotate the Elbow around its Y axis to see collpase

![](https://3464970502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JUKGJZ67JX02QZdPhsy%2Fuploads%2FjoJzCYuEmUGLkVu9p4ed%2Fimage.png?alt=media\&token=c6f54c3c-79b4-4911-91a7-6c830fc3c123)[
](https://playground.babylonjs.com/#1BZJVJ#1110)

###

### Link 7 - Let's Play with Arm Animation

{% embed url="<https://jsfiddle.net/debianx/jvuxz3qk/28/>" %}

![](https://3464970502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JUKGJZ67JX02QZdPhsy%2Fuploads%2FZ46MAZlfcbaqZJKg1Iv3%2Fimage.png?alt=media\&token=ad598b8d-336a-49d4-b2c7-46cb1ac18a0f)[ <br>](https://jsfiddle.net/debianx/jvuxz3qk/28/)

#### Task 1&#x20;

Line 136 sets the maximum rotation angle for each joint&#x20;

Change the max value of the angle from Math.PI \* 0.3 to Math.PI \* 0.8 to observe the collapsing effect for the middle joint

#### Task 2

Line 49 the weight array defines the weights for the vertices&#x20;

Try to change line 54 and 55\
54: 1, 0, 0, 0, // 2 \
55: 1, 0, 0, 0, // 3&#x20;

from “1, 0, 0, 0” to “ .5,.5, 0, 0, “ to see what happens

Before

{% code lineNumbers="true" expandable="true" %}

```javascript
    weight: {
      numComponents: 4,
      data: [
       1, 0, 0, 0,  // 0
       1, 0, 0, 0,  // 1
       1, 0, 0, 0,  // 2
       1, 0, 0, 0,  // 3
       0.5, 0.5, 0, 0,  // 4
       0.5, 0.5, 0, 0,  // 5
       0, 1, 0, 0,  // 6
       0, 1, 0, 0,  // 7
       0, 0.5, 0.5, 0,  // 8
       0, 0.5, 0.5, 0,  // 9
      ],
    },
```

{% endcode %}

After

{% code expandable="true" %}

```javascript
    weight: {
      numComponents: 4,
      data: [
       1, 0, 0, 0,  // 0
       1, 0, 0, 0,  // 1
       0.5, 0.5, 0, 0,  // 2
       0.5, 0.5, 0, 0,  // 3
       0.5, 0.5, 0, 0,  // 4
       0.5, 0.5, 0, 0,  // 5
       0, 1, 0, 0,  // 6
       0, 1, 0, 0,  // 7
       0, 0.5, 0.5, 0,  // 8
       0, 0.5, 0.5, 0,  // 9
      ],
    },
```

{% endcode %}