this.evaluate = function()
{
var vertexShaderSource = `#version 300 es
// an attribute is an input (in) to a vertex shader.
// It will receive data from a buffer
in vec4 a_position;
uniform mat4 u_tW;
uniform mat4 u_tV;
uniform mat4 u_tP;
// all shaders have a main function
void main() {
// gl_Position is a special variable a vertex shader
// is responsible for setting
mat4 tWV = u_tV * u_tW;
mat4 tWVP = u_tP * tWV;
//vec4 pos = u_tW * a_position;
gl_Position = tWVP * a_position;
}
`;
var fragmentShaderSource = `#version 300 es
// fragment shaders don't have a default precision so we need
// to pick one. mediump is a good default. It means "medium precision"
precision mediump float;
// we need to declare an output for the fragment shader
out vec4 outColor;
void main() {
// Just set the output to a constant redish-purple
outColor = vec4(1, 0, 0.5, 1);
}
`;
/////////////////////////init time
if(undefined(gl)){
console.log("setting up WebGL 2")
var canvas = document.getElementById("gl-canvas");
//context is set globally
webgl2gl = canvas.getContext("webgl2");
gl = webgl2gl;
if(!gl){"WebGL2 is not supported by your browser."}
}
//compile the shaders
var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
//create the shader program by linking vs and ps
var program = createProgram(gl, vertexShader, fragmentShader);
//location of attribute
var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
//create buffer for attributes
var positionBuffer = gl.createBuffer();
//bind the position buffer to apply webgl functions on it
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
// quad
var positions = [
0.5, -0.5,
0.5, 0.5,
-0.5, -0.5,
-0.5,-0.5,
-0.5,0.5,
0.5,0.5
];
//apply buffer data to gl.ARRAY_BUFFER (previously bound for positions)
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
//create vertex array buffer
var vao = gl.createVertexArray();
gl.bindVertexArray(vao);
gl.enableVertexAttribArray(positionAttributeLocation);
var size = 2; // 2 components per iteration
var type = gl.FLOAT; // the data is 32bit floats
var normalize = false; // don't normalize the data
var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position
var offset = 0; // start at the beginning of the buffer
//binds the current ARRAY_BUFFER to the attribute
gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset)
//set renderer window to fill the canvas div
webglUtils.resizeCanvasToDisplaySize(gl.canvas);
//set the viewport (clipspace)
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
//clear the canvas color
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
//set the shader Programming
gl.useProgram(program);
//bind the buffers to the attributes
gl.bindVertexArray(vao);
var transformLocation = gl.getUniformLocation(program, "u_tW");
var transform = glMat.mat4.create();
glMat.mat4.fromZRotation(transform, 0.0);
gl.uniformMatrix4fv(transformLocation, false, transform);
var tVLocation = gl.getUniformLocation(program, "u_tV");
gl.uniformMatrix4fv(tVLocation, false, ViewIn.getValue(0));
var tPLocation = gl.getUniformLocation(program, "u_tP");
gl.uniformMatrix4fv(tPLocation, false, PerspectiveIn.getValue(0));
//EXECUTE the GLSL program
var primitiveType = gl.TRIANGLES;
var offset = 0;
var count = 6;
gl.drawArrays(primitiveType, offset, count);
var input = InputPin1.getValue(0);
OutputPin1.setValue(input, 0);
///////////////////////////////////Getting Started
var View = ViewIn.getValue(0) ;
}
this.evaluate = function()
{
//calculate translation matrix
var translation_values = glMat.vec3.fromValues(TransXYZ.getValue(0), TransXYZ.getValue(1), TransXYZ.getValue(2));
var translation = glMat.mat4.create();
glMat.mat4.fromTranslation(translation, translation_values);
//calculate rotation X
var r_x = glMat.mat4.create();
glMat.mat4.fromXRotation(r_x, RotXYZ.getValue(0));
//rotation Y
var r_y = glMat.mat4.create();
glMat.mat4.fromYRotation(r_y, RotXYZ.getValue(1));
//resulting rotation
var rotation = glMat.mat4.create();
glMat.mat4.mul(rotation, r_x, r_y);
//apply final transform matrix
var transform = glMat.mat4.create();
glMat.mat4.mul(transform, translation, rotation);
var perspective = glMat.mat4.create();
var fov = 0.2;
var aspect = 1.0;
var near = 0.05;
var far = 200;
glMat.mat4.perspective(perspective,fov, aspect, near, far);
ViewOut.setValue(0, transform );
PerspectiveOut.setValue(0, perspective );
///////////////////////////////////Getting Started
}