Game Development Reference
In-Depth Information
Loading the JSON model
Open the 02-Loading-Model-JSON.html file in your favorite editor.
The vertex shader remains the same as in the example
02-SqaureDrawIndexArrayColor.html .
The following code defines a simple fragment shader. We have added a vec4
variable, materialDiffuseColor , and qualified it as uniform . We pass the value of
the variable from the control.
The changes in the fragment shader code to load the JSON model are as follows.
Note that in the previous example ( 02-SqaureDrawIndexArrayColor.html ), we
passed the color as an attribute and then passed it as a varying qualifier to the
fragment shader. But in this example, we pass the color as a uniform qualifier, as
shown in the following code:
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
uniform vec4 materialDiffuseColor;
void main(void) {
gl_FragColor = materialDiffuseColor;
}
</script>
We did so because the color of each vertex was different; we pass values as an
attribute when the property of each vertex is different for the same primitive. If the
value of any vertex property does not change for a primitive, then we pass that value
as uniform . In this particular example, the color of each vertex remains the same.
The object is shaded with the same diffuse color for all vertices.
The changes in the control code to load the JSON model are as follows:
function start() {
var canvas = document.getElementById("squareWithDrawArrays");
initGL(canvas)
initShaders();
loadModel();
document.onkeydown = handleKeyDown;
}
function loadModel(){
$.getJSON("model/Cube.json",function(data){
vertices = data.vertices;
var faces=parseJSON(data);
 
Search WWH ::




Custom Search