Commit d87de859 authored by Bjørn Tore's avatar Bjørn Tore
Browse files

Update public/Kubemann1.html, js/Kubemann1.js files

parent 2e0dd521
Pipeline #10125 failed with stage
"use strict";
var VSHADER = `
attribute vec3 a_position;
attribute vec4 a_color;
varying vec4 v_color;
uniform mat4 u_modelViewMatrix;
uniform mat4 u_projectionMatrix;
void main() {
v_color = a_color;
gl_Position = u_projectionMatrix * u_modelViewMatrix * vec4(a_position, 1);
}
`;
var FSHADER = `
precision mediump float;
varying vec4 v_color;
void main() {
gl_FragColor = v_color;
}
`;
//Buffers:
var cubeVertBuffer = null;
var cubeIndexBuffer = null;
var lineIndexBuffer = null;
//Color buffers:
var lineColorBuffer = null;
var red = null;
var green = null;
var blue = null;
var yellow = null;
var orange = null;
//Matrices:
var modelMatrix = null;
var viewMatrix = null;
var projectionMatrix = null;
var modelViewMatrix = null;
//Matrix uniforms:
var u_modelViewMatrix = null;
var u_projectionMatrix = null;
var canvas = null;
var gl = null;
function main() {
initContext();
initShaders(gl, VSHADER, FSHADER);
initMatrices();
initBuffers();
draw();
}
function initContext() {
canvas = document.getElementById("webgl");
gl = getWebGLContext(canvas);
}
function initMatrices() {
modelMatrix = new Matrix4();
viewMatrix = new Matrix4();
modelViewMatrix = new Matrix4();
projectionMatrix = new Matrix4();
u_modelViewMatrix = gl.getUniformLocation(gl.program, "u_modelViewMatrix");
u_projectionMatrix = gl.getUniformLocation(gl.program, "u_projectionMatrix");
}
function initBuffers() {
//36 stk posisjoner:
var cubeVertices = new Float32Array([
//front
1.0, 1.0, 1.0,
-1.0, 1.0, 1.0,
1.0, -1.0, 1.0,
-1.0, -1.0, 1.0,
//Bak
1.0, 1.0, -1.0,
-1.0, 1.0, -1.0,
1.0, -1.0, -1.0,
-1.0, -1.0, -1.0
]);
var cubeIndices = new Uint16Array([1, 0, 3, 2, 6, 0, 4, 1, 5, 3, 7, 6, 5, 4]);
var lineIndices = new Uint16Array([
//Front face
0, 1, 2,
0, 2, 3,
//right side
3,2,4,
3,4,7,
//Back side
4,5,7,
5,6,7,
//left
5,0,6,
1,0,5,
//topp
0,3,6,
6,3,7,
//bottom
5,1,2,
5,2,4,
]);
cubeVertBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertBuffer);
gl.bufferData(gl.ARRAY_BUFFER, cubeVertices, gl.STATIC_DRAW);
cubeVertBuffer.itemSize = 3;
cubeVertBuffer.numItems = 8;
gl.bindBuffer(gl.ARRAY_BUFFER, null);
cubeIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeIndexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, cubeIndices, gl.STATIC_DRAW);
cubeIndexBuffer.itemSize = 3;
cubeIndexBuffer.numItems = 12;
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
lineIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, lineIndexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, lineIndices, gl.STATIC_DRAW);
lineIndexBuffer.itemSize = 2;
lineIndexBuffer.numItems = 12;
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
var lineColor = new Float32Array([
0, 0, 0, 1,
0, 0, 0, 1,
0, 0, 0, 1,
0, 0, 0, 1,
0, 0, 0, 1,
0, 0, 0, 1,
0, 0, 0, 1,
0, 0, 0, 1,
0, 0, 0, 1,
0, 0, 0, 1,
0, 0, 0, 1,
0, 0, 0, 1,
]);
//Linebuffer
lineColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, lineColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, lineColor, gl.STATIC_DRAW);
lineColorBuffer.itemSize = 4;
lineColorBuffer.numItems = 12;
gl.bindBuffer(gl.ARRAY_BUFFER, null);
var greenColor = new Float32Array([
0, 1, 0, 1,
0, 1, 0, 1,
0, 1, 0, 1,
0, 1, 0, 1,
0, 1, 0, 1,
0, 1, 0, 1,
0, 1, 0, 1,
0, 1, 0, 1
]);
var redColor = new Float32Array([
1, 0, 0, 1,
1, 0, 0, 1,
1, 0, 0, 1,
1, 0, 0, 1,
1, 0, 0, 1,
1, 0, 0, 1,
1, 0, 0, 1,
1, 0, 0, 1
]);
var yellowColor = new Float32Array([
1, 1, 0, 1,
1, 1, 0, 1,
1, 1, 0, 1,
1, 1, 0, 1,
1, 1, 0, 1,
1, 1, 0, 1,
1, 1, 0, 1,
1, 1, 0, 1
]);
var blueColor = new Float32Array([
0, 0, 1, 1,
0, 0, 1, 1,
0, 0, 1, 1,
0, 0, 1, 1,
0, 0, 1, 1,
0, 0, 1, 1,
0, 0, 1, 1,
0, 0, 1, 1,
]);
var orangeColor = new Float32Array([
1, 0.5, 0, 1,
1, 0.5, 0, 1,
1, 0.5, 0, 1,
1, 0.5, 0, 1,
1, 0.5, 0, 1,
1, 0.5, 0, 1,
1, 0.5, 0, 1,
1, 0.5, 0, 1,
]);
red = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, red);
gl.bufferData(gl.ARRAY_BUFFER, redColor, gl.STATIC_DRAW);
red.itemSize = 4;
red.numItems = 8;
gl.bindBuffer(gl.ARRAY_BUFFER, null);
green = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, green);
gl.bufferData(gl.ARRAY_BUFFER, greenColor, gl.STATIC_DRAW);
green.itemSize = 4;
green.numItems = 8;
gl.bindBuffer(gl.ARRAY_BUFFER, null);
blue = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, blue);
gl.bufferData(gl.ARRAY_BUFFER, blueColor, gl.STATIC_DRAW);
blue.itemSize = 4;
blue.numItems = 8;
gl.bindBuffer(gl.ARRAY_BUFFER, null);
yellow = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, yellow);
gl.bufferData(gl.ARRAY_BUFFER, yellowColor, gl.STATIC_DRAW);
yellow.itemSize = 4;
yellow.numItems = 8;
gl.bindBuffer(gl.ARRAY_BUFFER, null);
orange = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, orange);
gl.bufferData(gl.ARRAY_BUFFER, orangeColor, gl.STATIC_DRAW);
orange.itemSize = 4;
orange.numItems = 8;
gl.bindBuffer(gl.ARRAY_BUFFER, null);
}
function draw(currentTime) {
gl.clear(gl.COLOR_BUFFER_BIT);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LESS);
setupCamera();
//Body:
modelMatrix.setIdentity();
modelMatrix.scale(3, 5, 2);
drawCube(blue);
//Legs:
modelMatrix.setIdentity();
modelMatrix.translate(-2, -10, 0);
modelMatrix.rotate(-5, 0, 0, 1);
modelMatrix.scale(1, 5, 1);
drawCube(green);
modelMatrix.setIdentity();
modelMatrix.translate(2, -10, 0);
modelMatrix.rotate(5, 0, 0, 1);
modelMatrix.scale(1, 5, 1);
drawCube(green);
//Arms:
modelMatrix.setIdentity();
modelMatrix.translate(5, 0, 0);
modelMatrix.rotate(20,0, 0, 1);
modelMatrix.scale(1, 5, 1);
drawCube(yellow);
modelMatrix.setIdentity();
modelMatrix.translate(-5, 0, 0);
modelMatrix.rotate(-20, 0, 0, 1);
modelMatrix.scale(1, 5, 1);
drawCube(yellow);
//Neck:
modelMatrix.setIdentity();
modelMatrix.translate(0, 5, 0);
modelMatrix.scale(0.5, 0.5, 0.5);
drawCube(blue);
//Head:
modelMatrix.setIdentity();
modelMatrix.translate(0, 7, 0);
modelMatrix.scale(1.5, 1.5, 1.75);
drawCube(red);
//floor:
modelMatrix.setIdentity();
modelMatrix.translate(1, -10,1);
modelMatrix.scale(15, 0.05, 15);
drawCube(orange);
}
function setupCamera() {
viewMatrix.setLookAt(25, 25, 50, 0, 0, 0, 0, 1, 0);
projectionMatrix.setPerspective(50, canvas.width / canvas.height, 1, 1000);
}
function drawCube(colorBuffer = green) {
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertBuffer);
var a_position = gl.getAttribLocation(gl.program, "a_position");
gl.vertexAttribPointer(a_position, cubeVertBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_position);
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
var a_color = gl.getAttribLocation(gl.program, "a_color");
gl.vertexAttribPointer(a_color, colorBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_color);
modelViewMatrix.set(viewMatrix).multiply(modelMatrix);
//Draws the box:
gl.uniformMatrix4fv(u_modelViewMatrix, false, modelViewMatrix.elements);
gl.uniformMatrix4fv(u_projectionMatrix, false, projectionMatrix.elements);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeIndexBuffer);
gl.drawElements(gl.TRIANGLE_STRIP, cubeIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
//Draws black outlines on the edges of the box:
gl.bindBuffer(gl.ARRAY_BUFFER, lineColorBuffer);
gl.vertexAttribPointer(a_color, lineColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_color);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, lineIndexBuffer);
gl.drawElements(gl.LINES, lineIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
}
<html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body onload="main()">
<canvas id="webgl" height="800" width="800">
This browser doesn't support the "canvas"-element
</canvas>
<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
<script src="../lib/cuon-matrix.js"></script>
<script src="js/Kubemann1.js"></script>
</body></html>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment