This repository has been archived by the owner on May 9, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.js
90 lines (79 loc) · 3.42 KB
/
index.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
import * as cgl from "../src/calder.js";
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
const glPosition = new cgl.InterfaceVariable(cgl.Qualifier.Out, new cgl.VariableSource(new cgl.Type(cgl.Kind.Vec4), 'gl_Position'));
const glFragColor = new cgl.InterfaceVariable(cgl.Qualifier.Out, new cgl.VariableSource(new cgl.Type(cgl.Kind.Vec4), 'gl_FragColor'));
const vertexPosition = new cgl.InterfaceVariable(cgl.Qualifier.Attribute, new cgl.VariableSource(new cgl.Type(cgl.Kind.Vec4), 'vertexPosition'));
const colour = new cgl.InterfaceVariable(cgl.Qualifier.Uniform, new cgl.VariableSource(new cgl.Type(cgl.Kind.Vec4), 'colour'));
const modelView = new cgl.InterfaceVariable(cgl.Qualifier.Uniform, new cgl.VariableSource(new cgl.Type(cgl.Kind.Mat4), 'modelView'));
const projection = new cgl.InterfaceVariable(cgl.Qualifier.Uniform, new cgl.VariableSource(new cgl.Type(cgl.Kind.Mat4), 'projection'));
const vertexShader = new cgl.Shader(
new cgl.Function('main', [
new cgl.Statement(
new cgl.EqualAssignment(
new cgl.Reference(glPosition),
new cgl.Multiplication(
new cgl.Reference(projection),
new cgl.Multiplication(
new cgl.Reference(modelView),
new cgl.Reference(vertexPosition)
)
)
)
)
]), [], [
new cgl.VariableDeclaration(vertexPosition),
new cgl.VariableDeclaration(projection),
new cgl.VariableDeclaration(modelView)
]
);
const fragShader = new cgl.Shader(
new cgl.Function('main', [
new cgl.Statement(
new cgl.EqualAssignment(
new cgl.Reference(glFragColor),
new cgl.Reference(colour)
)
)
]), [], [new cgl.VariableDeclaration(colour)]
);
const pipelineBuilder = new cgl.ShaderPipelineBuilder(vertexShader, fragShader);
const pipeline = pipelineBuilder.build(gl);
const fieldOfView = 45 * Math.PI / 180;
const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
const zNear = 0.1;
const zFar = 100.0;
const projectionMatrix = mat4.create();
mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);
const modelViewMatrix = mat4.create();
mat4.translate(modelViewMatrix, modelViewMatrix, [-0.0, 0.0, -6.0]);
function render() {
pipeline.useProgram();
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
pipeline.vertexPosition = [
1.0, 1.0, 0.0, 1.0,
-1.0, 1.0, 0.0, 1.0,
1.0, -1.0, 0.0, 1.0,
-1.0, -1.0, 0.0, 1.0
];
pipeline.colour = [1.0, 1.0, 1.0, 1.0];
pipeline.modelView = modelViewMatrix;
pipeline.projection = projectionMatrix;
pipeline.draw(4);
}
render();
document.body.addEventListener('mousemove', function(e) {
const x = (e.clientX - window.innerWidth/2)/(window.innerWidth/2);
const y = (e.clientY - window.innerHeight/2)/(window.innerHeight/2);
mat4.identity(modelViewMatrix);
mat4.translate(modelViewMatrix, modelViewMatrix, [-0.0, 0.0, -6.0]);
mat4.rotate(modelViewMatrix, modelViewMatrix, y*Math.PI/3, [1, 0, 0]);
mat4.rotate(modelViewMatrix, modelViewMatrix, x*Math.PI/3, [0, 1, 0]);
if (window.requestAnimationFrame) {
window.requestAnimationFrame(render);
}
});