WebGL Séparation shader et html
Bonjour tout le monde,
Pour info, je débute en HTML5 et en WebGL.
Je souhaite tout simplement séparer les source de mes shader du code html.
J'ai essayé d'ajouter ceci:
Code:
<script id="shader-fs" type="text/javascript" src="fragmentShader.js"></script>
mais rien de ne change. Quand je passe en debug, la variable sous l'id shader-fs ne contient pas d'enfant.
Pour info, voici mon fragmentShader.js:
Code:
1
2
3
4
5
6
7
8
|
precision mediump float;
varying vec4 vColor;
void main(void) {
gl_FragColor = vColor;
} |
J'ai cherché des exemples de lecture de fichiers en Html5, mais ce ne sont que dans le cas où l'on souhaite télécharger ces fichiers.
N'y a-t-il pas une function "simple" pour lire un fichier dans le dossier courant?
Merci d'avance.
Edit:
J'ai trouvé une solution sur un autre forum basé sur du JQuery/Ajax:
Code:
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
| utils = {};
utils.allShaders = {};
utils.SHADER_TYPE_FRAGMENT = "x-shader/x-fragment";
utils.SHADER_TYPE_VERTEX = "x-shader/x-vertex";
utils.addShaderProg = function(gl, vertex, fragment) {
utils.loadShader(vertex, utils.SHADER_TYPE_VERTEX);
utils.loadShader(fragment, utils.SHADER_TYPE_FRAGMENT);
var vertexShader = utils.getShader(gl, vertex);
var fragmentShader = utils.getShader(gl, fragment);
var prog = gl.createProgram();
gl.attachShader(prog, vertexShader);
gl.attachShader(prog, fragmentShader);
gl.linkProgram(prog);
if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
alert("Could not initialise main shaders");
}
return prog;
};
utils.loadShader = function(file, type) {
var cache, shader;
$.ajax({
async : false, // need to wait... todo: deferred?
url : file, //todo: use global config for shaders folder?
success : function(result) {
cache = {
script : result,
type : type
};
}
});
// store in global cache
utils.allShaders[file] = cache;
};
utils.getShader = function(gl, id) {
//get the shader object from our main.shaders repository
var shaderObj = utils.allShaders[id];
var shaderScript = shaderObj.script;
var shaderType = shaderObj.type;
//create the right shader
var shader;
if (shaderType == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderType == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
}
//wire up the shader and compile
gl.shaderSource(shader, shaderScript);
gl.compileShader(shader);
//if things didn't go so well alert
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
//return the shader reference
return shader;
};//end:getShader |
J'espère que ça pourra aider quelqu'un ;)
