-
Notifications
You must be signed in to change notification settings - Fork 2
/
webgl.js
126 lines (110 loc) · 3.72 KB
/
webgl.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
// taken from http://webglfundamentals.org/webgl/lessons/webgl-boilerplate.html
let gl = null;
const context = () => {
if (!gl) {
const canvas = document.getElementById('canvas');
gl = canvas.getContext('experimental-webgl');
if (!gl) {
gl = canvas.getContext('webgl');
}
}
return gl;
};
/**
* Creates and compiles a shader.
*
* @param {!WebGLRenderingContext} gl The WebGL Context.
* @param {string} shaderSource The GLSL source code for the shader.
* @param {number} shaderType The type of shader, VERTEX_SHADER or
* FRAGMENT_SHADER.
* @return {!WebGLShader} The shader.
*/
const compileShader = (gl, shaderSource, shaderType) => {
// Create the shader object
var shader = gl.createShader(shaderType);
// Set the shader source code.
gl.shaderSource(shader, shaderSource);
// Compile the shader
gl.compileShader(shader);
// Check if it compiled
var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (!success) {
// Something went wrong during compilation; get the error
throw 'could not compile shader:' + gl.getShaderInfoLog(shader);
}
return shader;
};
/**
* Creates a program from 2 shaders.
*
* @param {!WebGLRenderingContext) gl The WebGL context.
* @param {!WebGLShader} vertexShader A vertex shader.
* @param {!WebGLShader} fragmentShader A fragment shader.
* @return {!WebGLProgram} A program.
*/
const createProgram = (gl, vertexShader, fragmentShader) => {
// create a program.
var program = gl.createProgram();
// attach the shaders.
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
// link the program.
gl.linkProgram(program);
// Check if it linked.
var success = gl.getProgramParameter(program, gl.LINK_STATUS);
if (!success) {
// something went wrong with the link
throw ('program filed to link:' + gl.getProgramInfoLog (program));
}
return program;
};
/**
* Creates a shader from the content of a script tag.
*
* @param {!WebGLRenderingContext} gl The WebGL Context.
* @param {string} scriptId The id of the script tag.
* @param {string} opt_shaderType. The type of shader to create.
* If not passed in will use the type attribute from the
* script tag.
* @return {!WebGLShader} A shader.
*/
const createShaderFromScript = (gl, scriptId, opt_shaderType) => {
// look up the script tag by id.
var shaderScript = document.getElementById(scriptId);
if (!shaderScript) {
throw('*** Error: unknown script element' + scriptId);
}
// extract the contents of the script tag.
var shaderSource = shaderScript.text;
// If we didn't pass in a type, use the 'type' from
// the script tag.
if (!opt_shaderType) {
if (shaderScript.type == 'x-shader/x-vertex') {
opt_shaderType = gl.VERTEX_SHADER;
} else if (shaderScript.type == 'x-shader/x-fragment') {
opt_shaderType = gl.FRAGMENT_SHADER;
} else if (!opt_shaderType) {
throw('*** Error: shader type not set');
}
}
return compileShader(gl, shaderSource, opt_shaderType);
};
/**
* Creates a program from 2 script tags.
*
* @param {!WebGLRenderingContext} gl The WebGL Context.
* @param {string} vertexShaderId The id of the vertex shader script tag.
* @param {string} fragmentShaderId The id of the fragment shader script tag.
* @return {!WebGLProgram} A program
*/
const createProgramFromScripts = (gl, vertexShaderId, fragmentShaderId) => {
var vertexShader = createShaderFromScriptTag(gl, vertexShaderId);
var fragmentShader = createShaderFromScriptTag(gl, fragmentShaderId);
return createProgram(gl, vertexShader, fragmentShader);
};
module.exports = {
compileShader: compileShader,
createProgram: createProgram,
createShaderFromScript: createShaderFromScript,
context: context
};