Skip to content

Commit

Permalink
First commit, rotating cube over plane
Browse files Browse the repository at this point in the history
  • Loading branch information
@hugbed
hugbed committed Feb 12, 2020
0 parents commit 067652a
Show file tree
Hide file tree
Showing 10 changed files with 650 additions and 0 deletions.
2 changes: 2 additions & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
dist/*
rollup.config.js
27 changes: 27 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 2017,
"sourceType": "module"
},
"globals":{
"axios": false,
"dat": false,
"Stats": false
},
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"rules": {
"indent": 1,
"semi": 1,
"no-extra-semi": 1,
"new-cap": ["warn", { "newIsCapExceptionPattern": "^gl" }],
"no-console": [
"off"
]
}
}
6 changes: 6 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
node_modules
npm-debug.log
.vscode/launch.json
.vscode/tasks.json
package-lock.json
dist
15 changes: 15 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WebGL Demo</title>
<link rel="stylesheet" href="webgl.css" type="text/css">
<script type="text/javascript" src="https://spectorcdn.babylonjs.com/spector.bundle.js"></script>
</head>

<body>
<canvas id="glcanvas" width="640" height="480"></canvas>
</body>

<script src="dist/bundle.js"></script>
</html>
25 changes: 25 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{
"name": "webglsamples",
"version": "1.0.0",
"description": "To do, enter some description",
"main": "main.js",
"dependencies": {
"gl-matrix": "^3.1.0"
},
"devDependencies": {
"eslint": "^5.10.0",
"rollup": "^0.67.4",
"rollup-plugin-commonjs": "^9.3.4",
"rollup-plugin-glslify": "^1.1.0",
"rollup-plugin-node-resolve": "^3.4.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "concurrently \"rollup -c -w\" \"serve --listen 8000 .\"",
"lint": "eslint src/**/*.js src/*.js",
"lint:fix": "eslint --fix src/**/*.js src/*.js"
},
"author": "",
"license": "ISC",
"repository": "todoenterrepository"
}
18 changes: 18 additions & 0 deletions rollup.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import commonjs from 'rollup-plugin-commonjs';
import glslify from 'rollup-plugin-glslify';
import resolve from 'rollup-plugin-node-resolve';

export default {
input: 'src/main.js',
output: [
{
file: 'dist/bundle.js',
format: 'cjs'
}
],
plugins: [
glslify(),
resolve(),
commonjs()
]
};
197 changes: 197 additions & 0 deletions src/cube.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
import { mat4 } from 'gl-matrix';

class Cube
{
constructor(gl) {
this.gl = gl;
this.createPositionBuffer();
this.createIndexBuffer();
this.createNormalBuffer();
this.rotation = 0.0;
}

update(deltaTime) {
this.modelMatrix = mat4.create();

mat4.rotate(this.modelMatrix, // destination matrix
this.modelMatrix, // matrix to rotate
this.rotation, // amount to rotate in radians
[0, 0, 1]); // axis to rotate around (Z)
mat4.rotate(this.modelMatrix, // destination matrix
this.modelMatrix, // matrix to rotate
this.rotation * .7,// amount to rotate in radians
[0, 1, 0]); // axis to rotate around (X)

this.rotation += deltaTime;
}

draw(programInfo) {
this.gl.uniformMatrix4fv(
programInfo.uniformLocations.modelMatrix,
false,
this.modelMatrix);

// Tell WebGL how to pull out the positions from the position
// buffer into the vertexPosition attribute
{
const numComponents = 3;
const type = this.gl.FLOAT;
const normalize = false;
const stride = 0;
const offset = 0;
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
this.gl.vertexAttribPointer(
programInfo.attribLocations.vertexPosition,
numComponents,
type,
normalize,
stride,
offset);
this.gl.enableVertexAttribArray(
programInfo.attribLocations.vertexPosition);
}

// Tell WebGL how to pull out the normals from
// the normal buffer into the vertexNormal attribute.
{
const numComponents = 3;
const type = this.gl.FLOAT;
const normalize = false;
const stride = 0;
const offset = 0;
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.normalBuffer);
this.gl.vertexAttribPointer(
programInfo.attribLocations.vertexNormal,
numComponents,
type,
normalize,
stride,
offset);
this.gl.enableVertexAttribArray(
programInfo.attribLocations.vertexNormal);
}

// Tell WebGL which indices to use to index the vertices
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);

{
const vertexCount = 36;
const type = this.gl.UNSIGNED_SHORT;
const offset = 0;
this.gl.drawElements(this.gl.TRIANGLES, vertexCount, type, offset);
}
}

createPositionBuffer() {
this.positionBuffer = this.gl.createBuffer();

this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);

const positions = [
// Front face
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
1.0, 1.0, 1.0,
-1.0, 1.0, 1.0,

// Back face
-1.0, -1.0, -1.0,
-1.0, 1.0, -1.0,
1.0, 1.0, -1.0,
1.0, -1.0, -1.0,

// Top face
-1.0, 1.0, -1.0,
-1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
1.0, 1.0, -1.0,

// Bottom face
-1.0, -1.0, -1.0,
1.0, -1.0, -1.0,
1.0, -1.0, 1.0,
-1.0, -1.0, 1.0,

// Right face
1.0, -1.0, -1.0,
1.0, 1.0, -1.0,
1.0, 1.0, 1.0,
1.0, -1.0, 1.0,

// Left face
-1.0, -1.0, -1.0,
-1.0, -1.0, 1.0,
-1.0, 1.0, 1.0,
-1.0, 1.0, -1.0,
];

this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(positions), this.gl.STATIC_DRAW);
}

createIndexBuffer() {
this.indexBuffer = this.gl.createBuffer();

this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);

const indices = [
0, 1, 2, 0, 2, 3, // front
4, 5, 6, 4, 6, 7, // back
8, 9, 10, 8, 10, 11, // top
12, 13, 14, 12, 14, 15, // bottom
16, 17, 18, 16, 18, 19, // right
20, 21, 22, 20, 22, 23, // left
];

this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER,
new Uint16Array(indices), this.gl.STATIC_DRAW);
}

createNormalBuffer() {
this.normalBuffer = this.gl.createBuffer();

this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.normalBuffer);

const vertexNormals = [
// Front
0.0, 0.0, 1.0,
0.0, 0.0, 1.0,
0.0, 0.0, 1.0,
0.0, 0.0, 1.0,

// Back
0.0, 0.0, -1.0,
0.0, 0.0, -1.0,
0.0, 0.0, -1.0,
0.0, 0.0, -1.0,

// Top
0.0, 1.0, 0.0,
0.0, 1.0, 0.0,
0.0, 1.0, 0.0,
0.0, 1.0, 0.0,

// Bottom
0.0, -1.0, 0.0,
0.0, -1.0, 0.0,
0.0, -1.0, 0.0,
0.0, -1.0, 0.0,

// Right
1.0, 0.0, 0.0,
1.0, 0.0, 0.0,
1.0, 0.0, 0.0,
1.0, 0.0, 0.0,

// Left
-1.0, 0.0, 0.0,
-1.0, 0.0, 0.0,
-1.0, 0.0, 0.0,
-1.0, 0.0, 0.0
];

this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(vertexNormals),
this.gl.STATIC_DRAW);
}
}

export { Cube };
Loading

0 comments on commit 067652a

Please sign in to comment.