https://schreckc.github.io/cours/Telecom/tp1.html

1<!DOCTYPE html>
2<html>
3  <head>
4    <link rel="stylesheet" href="testjs.css"> 
5    </head>
6<body>
7
8<h1>TP1</h1>
9
10<canvas id="c" width="640" height="480"></canvas>
11
12</body>
13

14<script id="vertex-shader-2d" type="notjs">
15
16  // an attribute will receive data from a buffer
17  attribute vec4 a_position;
18
19  // all shaders have a main function
20  void main() {
21
22    // gl_Position is a special variable a vertex shader
23    // is responsible for setting
24    gl_Position = a_position;
25  }
26
27</script>

27

28<script id="fragment-shader-2d" type="notjs">
29
30  // fragment shaders don't have a default precision so we need
31  // to pick one. mediump is a good default
32  precision mediump float;
33
34  void main() {
35    // gl_FragColor is a special variable a fragment shader
36    // is responsible for setting
37    gl_FragColor = vec4(1, 0, 0.0, 1); // return red
38  }
39
40</script>

40
41<!--
42for most samples webgl-utils only provides shader compiling/linking and
43canvas resizing because why clutter the examples with code that's the same in every sample.
44See https://webglfundamentals.org/webgl/lessons/webgl-boilerplate.html
45and https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
46for webgl-utils, m3, m4, and webgl-lessons-ui.
47-->

48<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>

48
49

50<script src="tp1.js"></script>

50
51
52
53</html>