├── .gitignore
├── README.md
└── src
├── index.html
└── js
└── gl_utils.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # WebGL
2 | WebGL Experiments using fragment and vertex shaders
3 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
8 |
16 |
17 |
33 |
34 |
37 |
38 |
--------------------------------------------------------------------------------
/src/js/gl_utils.js:
--------------------------------------------------------------------------------
1 | // Start time
2 | var time0 = (new Date()).getTime() / 1000;
3 |
4 | /**
5 | * Function that pulls out text content from a DOM element
6 | * @param id - ID of the DOM element
7 | * @returns {string}
8 | */
9 | function getStringFromDOMElement(id) {
10 | var node = document.getElementById(id);
11 |
12 | // Recurse and get all text in the node
13 | var recurseThroughDOMNode = function recurseThroughDOMNode(childNode, textContext) {
14 | if (childNode) {
15 | if (childNode.nodeType === 3) {
16 | textContext += childNode.textContent;
17 | }
18 | return recurseThroughDOMNode(childNode.nextSibling, textContext);
19 | } else {
20 | return textContext;
21 | }
22 | };
23 | return recurseThroughDOMNode(node.firstChild, '');
24 | }
25 |
26 | /**
27 | * Create and attach a shader to gl program
28 | * @param gl
29 | * @param program
30 | * @param type
31 | * @param src
32 | */
33 | function addshader(gl, program, type, src) {
34 | var shader = gl.createShader(type);
35 | gl.shaderSource(shader, src);
36 | gl.compileShader(shader);
37 | if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
38 | throw "Cannot compile shader:\n\n" + gl.getShaderInfoLog(shader);
39 | }
40 | gl.attachShader(program, shader);
41 | }
42 |
43 | /**
44 | * Function that creates and links the gl program with the
45 | * application's vertex and fragment shader.
46 | * @param gl
47 | * @param vertexShader
48 | * @param fragmentShader
49 | */
50 | function gl_init(gl, vertexShader, fragmentShader) {
51 | var program = gl.createProgram();
52 | var buffer = gl.createBuffer();
53 | addshader(gl, program, gl.VERTEX_SHADER, vertexShader);
54 | addshader(gl, program, gl.FRAGMENT_SHADER, fragmentShader);
55 | gl.linkProgram(program);
56 |
57 | if (! gl.getProgramParameter(program, gl.LINK_STATUS))
58 | throw "Could not link the shader program!";
59 | gl.useProgram(program);
60 |
61 | // Create a square as a strip of two triangles.
62 | gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
63 | gl.bufferData(
64 | gl.ARRAY_BUFFER,
65 | new Float32Array([
66 | -1,1,
67 | 0,1,
68 | 1,0,
69 | -1,-1,
70 | 0,1,
71 | -1,0]),
72 | gl.STATIC_DRAW
73 | );
74 |
75 | gl.aPosition = gl.getAttribLocation(program, "aPosition");
76 | gl.enableVertexAttribArray(gl.aPosition);
77 | gl.vertexAttribPointer(gl.aPosition, 3, gl.FLOAT, false, 0, 0);
78 | gl.uTime = gl.getUniformLocation(program, "uTime");
79 | }
80 |
81 | /**
82 | * This function is called once per frame.
83 | * @param gl
84 | */
85 | function gl_update(gl) {
86 | gl.uniform1f(gl.uTime, (new Date()).getTime() / 1000 - time0);
87 | gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
88 | // Start the next frame
89 | requestAnimFrame(function() { gl_update(gl); });
90 | }
91 |
92 | function start_gl(canvas_id, vertexShader, fragmentShader) {
93 | // Make sure the browser supports WebGL.
94 | try {
95 | var canvas = document.getElementById(canvas_id);
96 | var gl = canvas.getContext("experimental-webgl");
97 | } catch (e) {
98 | throw "Sorry, your browser does not support WebGL.";
99 | }
100 |
101 | // Initialize gl. Then start the frame loop.
102 | gl_init(gl, vertexShader, fragmentShader);
103 | gl_update(gl);
104 | }
105 |
106 | // A browser-independent way to call a function after 1/60 second.
107 | requestAnimFrame = (function() {
108 | return requestAnimationFrame
109 | || webkitRequestAnimationFrame
110 | || mozRequestAnimationFrame
111 | || oRequestAnimationFrame
112 | || msRequestAnimationFrame
113 | || function(callback) {
114 | setTimeout(callback, 1000 / 60);
115 | }; })();
116 |
--------------------------------------------------------------------------------