Adding files

README.md

@@ -1 +1,27 @@
 # rokon-engine
+
+This is a hybrid JavaScript/WebAssembly 3D engine using WebGL2.
+
+Features:
+ - Deferred shading
+ - PBR
+ - Skeletal animations
+ - Point + directional lighting
+ - Instanced rendering
+ - Environment mapping
+ - Cubemaps
+ - Skyboxes
+ - Ray casting (e.g. for mouse picking)
+ - Bounding boxes
+ - Plane realtime reflections + refractions
+ - Billboarding
+ - Shadows
+ - Multiple render target support
+ - Frustum culling
+ - Occlusion culling
+ - Unified tangent/Bitangent calclations
+ - All direction fog
+ - God rays
+ - Blur/Bloom filtering
+ - Supported file formats: .dae, .obj, .md5
+ - Simple to use API's for Batching, FrameBuffers, Filtering, Bounding boxes, Lighting, Textures and Shader programs

package.json

@@ -0,0 +1,45 @@
+{
+  "name": "rokon-engine",
+  "moduleName": "RokonEngine",
+  "version": "0.1.2",
+  "description": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://[email protected]/maierfelix/rokon-engine.git"
+  },
+  "browser": "dist/bundle-browser.js",
+  "keywords": [],
+  "homepage": "http://maierfelix.github.io/rokon-engine/",
+  "author": "Felix Maier <[email protected]>",
+  "contributors": [
+    "Felix Maier <[email protected]> (https://github.com/maierfelix)"
+  ],
+  "bugs": {
+    "url": "https://github.com/maierfelix/rokon-engine/issues"
+  },
+  "engines": {
+    "node": ">= 6.x"
+  },
+  "scripts": {
+    "bundle": "node rollup/rollup.bundle.js",
+    "browser": "rollup -c rollup/rollup.config.iife.js",
+    "live": "node rollup/rollup.live.js",
+    "test": "node tests/index.js"
+  },
+  "devDependencies": {
+    "ws": "^5.0.0",
+    "rollup": "^0.50.1",
+    "rollup-plugin-buble": "^0.16.0",
+    "rollup-plugin-commonjs": "^8.2.6",
+    "rollup-plugin-json": "^2.3.0",
+    "rollup-plugin-node-resolve": "^3.0.0"
+  },
+  "dependencies": {
+    "collada-dae-parser": "^0.14.0",
+    "expand-vertex-data": "^1.1.2",
+    "glmw": "^0.1.3",
+    "object-reflector": "^0.1.2",
+    "webgl-obj-loader": "^1.1.3"
+  }
+}

rollup/rollup.bundle.js

@@ -0,0 +1,37 @@
+const fs = require("fs");
+const pkg = require("../package.json");
+
+const rollup = require("rollup");
+const json = require("rollup-plugin-json");
+const buble = require("rollup-plugin-buble");
+const resolve = require("rollup-plugin-node-resolve");
+const commonjs = require("rollup-plugin-commonjs");
+
+let inputOptions = {
+  input: "src/index.js",
+  external: [],
+  plugins: [
+    json(),
+    buble(),
+    resolve({
+      jsnext: true,
+      browser: true
+    }),
+    commonjs({
+      namedExports: {}
+    })
+  ]
+};
+
+let outputOptions = {
+  file: require("../package.json").browser,
+  format: "iife"
+};
+
+async function build() {
+  const bundle = await rollup.rollup(inputOptions);
+  const { code, map } = await bundle.generate(outputOptions);
+  await bundle.write(outputOptions);
+};
+
+build();

rollup/rollup.config.iife.js

@@ -0,0 +1,23 @@
+import config from "./rollup.config";
+import json from "rollup-plugin-json";
+import resolve from "rollup-plugin-node-resolve";
+import commonjs from "rollup-plugin-commonjs";
+
+config.output = {
+  treeshake: false,
+  indent: false,
+  sourceMap: false,
+  format: "iife",
+  file: require("../package.json").browser
+};
+config.external = [];
+config.plugins = [
+  resolve({
+    browser: true
+  }),
+  commonjs({
+    sourceMap: false
+  })
+];
+
+export default config;

rollup/rollup.config.js

@@ -0,0 +1,10 @@
+import json from "rollup-plugin-json";
+
+export default {
+  input: "src/index.js",
+  name: require("../package.json").moduleName,
+  external: [],
+  plugins: [
+    json()
+  ]
+};

rollup/rollup.live.js

@@ -0,0 +1,80 @@
+const fs = require("fs");
+const { exec } = require("child_process");
+const WebSocket = require("ws");
+
+let sockets = [];
+
+const PORT = 9696;
+const SOCKET_OPEN = WebSocket.OPEN;
+
+const PACKET_RELOAD = new Uint8Array([ 1 ]);
+
+function addSocket(socket) {
+  sockets.push(socket);
+};
+
+function removeSocket(socket) {
+  for (let ii = 0; ii < sockets.length; ++ii) {
+    if (sockets[ii] === socket) {
+      sockets.splice(ii, 1);
+      break;
+    }
+  };
+};
+
+function broadcast(packet) {
+  sockets.map(socket => {
+    if (socket.readyState === SOCKET_OPEN) socket.send(packet);
+  });
+};
+
+function bundle() {
+  return new Promise(resolve => {
+    exec("npm run browser", (err, stdout, stderr) => {
+      if (err) console.log(err);
+      else resolve();
+    });
+  });
+};
+
+function onFileChange(e, doBundling) {
+  if (!timeout) {
+    let now = Date.now();
+    timeout = 1;
+    setTimeout(() => {
+      timeout = 0;
+      console.log("Building...");
+    }, 50);
+    if (doBundling) {
+      bundle().then(() => {
+        broadcast(PACKET_RELOAD);
+        let then = Date.now();
+        console.log(`Built in ${then - now}ms!`);
+      });
+    } else {
+      broadcast(PACKET_RELOAD);
+      let then = Date.now();
+      console.log(`Built in ${then - now}ms!`);
+    }
+  }
+};
+
+const ws = new WebSocket.Server({
+  port: PORT
+});
+
+let timeout = 0;
+fs.watch("./src/", { recursive: true }, (e) => onFileChange(e, true));
+fs.watch("./static/", { recursive: true }, (e) => onFileChange(e, false));
+fs.watch("./shaders/", { recursive: true }, (e) => onFileChange(e, false));
+
+console.log(`Listening on ${PORT}`);
+
+ws.on("connection", socket => {
+  addSocket(socket);
+  socket.on("message", e => { });
+  socket.on("error", e => {
+    removeSocket(socket);
+    socket.close();
+  });
+});

shaders/FXAA.frag

@@ -0,0 +1,77 @@
+#version 300 es
+
+precision mediump float;
+
+#define FXAA_REDUCE_MIN (1.0/ 128.0)
+#define FXAA_REDUCE_MUL (1.0 / 8.0)
+#define FXAA_SPAN_MAX 8.0
+
+in vec2 vRgbNW;
+in vec2 vRgbNE;
+in vec2 vRgbSW;
+in vec2 vRgbSE;
+in vec2 vRgbM;
+in vec2 vTextureCoord;
+
+uniform vec2 uResolution;
+uniform sampler2D uSampler;
+
+out vec4 fragColor;
+
+// picked from mattdesl/glsl-fxaa
+
+const vec3 luma = vec3(0.299, 0.587, 0.114);
+
+vec4 fxaa(
+  sampler2D tex, vec2 fragCoord, vec2 resolution,
+  vec2 vRgbNW, vec2 vRgbNE, 
+  vec2 vRgbSW, vec2 vRgbSE, 
+  vec2 vRgbM
+) {
+    vec4 color;
+    mediump vec2 inverseVP = vec2(1.0 / resolution.x, 1.0 / resolution.y);
+    vec3 rgbNW = texture(tex, vRgbNW).xyz;
+    vec3 rgbNE = texture(tex, vRgbNE).xyz;
+    vec3 rgbSW = texture(tex, vRgbSW).xyz;
+    vec3 rgbSE = texture(tex, vRgbSE).xyz;
+    vec4 texColor = texture(tex, vRgbM);
+    vec3 rgbM  = texColor.xyz;
+    float lumaNW = dot(rgbNW, luma);
+    float lumaNE = dot(rgbNE, luma);
+    float lumaSW = dot(rgbSW, luma);
+    float lumaSE = dot(rgbSE, luma);
+    float lumaM  = dot(rgbM,  luma);
+    float lumaMin = min(lumaM, min(min(lumaNW, lumaNE), min(lumaSW, lumaSE)));
+    float lumaMax = max(lumaM, max(max(lumaNW, lumaNE), max(lumaSW, lumaSE)));
+
+    mediump vec2 dir;
+    dir.x = -((lumaNW + lumaNE) - (lumaSW + lumaSE));
+    dir.y =  ((lumaNW + lumaSW) - (lumaNE + lumaSE));
+
+    float dirReduce = max((lumaNW + lumaNE + lumaSW + lumaSE) *
+                          (0.25 * FXAA_REDUCE_MUL), FXAA_REDUCE_MIN);
+
+    float rcpDirMin = 1.0 / (min(abs(dir.x), abs(dir.y)) + dirReduce);
+    dir = min(vec2(FXAA_SPAN_MAX, FXAA_SPAN_MAX),
+              max(vec2(-FXAA_SPAN_MAX, -FXAA_SPAN_MAX),
+              dir * rcpDirMin)) * inverseVP;
+
+    vec3 rgbA = 0.5 * (
+        texture(tex, fragCoord * inverseVP + dir * (1.0 / 3.0 - 0.5)).xyz +
+        texture(tex, fragCoord * inverseVP + dir * (2.0 / 3.0 - 0.5)).xyz);
+    vec3 rgbB = rgbA * 0.5 + 0.25 * (
+        texture(tex, fragCoord * inverseVP + dir * -0.5).xyz +
+        texture(tex, fragCoord * inverseVP + dir * 0.5).xyz);
+
+    float lumaB = dot(rgbB, luma);
+    if ((lumaB < lumaMin) || (lumaB > lumaMax))
+        color = vec4(rgbA, texColor.a);
+    else
+        color = vec4(rgbB, texColor.a);
+    return color;
+}
+
+void main() {
+  vec2 fragCoord = vTextureCoord * uResolution;
+  fragColor = fxaa(uSampler, fragCoord, uResolution, vRgbNW, vRgbNE, vRgbSW, vRgbSE, vRgbM);
+}

shaders/FXAA.vert

@@ -0,0 +1,38 @@
+#version 300 es
+
+precision mediump float;
+
+in vec2 aPosition;
+
+out vec2 vRgbNW;
+out vec2 vRgbNE;
+out vec2 vRgbSW;
+out vec2 vRgbSE;
+out vec2 vRgbM;
+out vec2 vTextureCoord;
+
+uniform vec2 uResolution;
+uniform mat4 uViewMatrix;
+uniform mat4 uProjectionMatrix;
+
+void texcoords(
+  vec2 fragCoord, vec2 resolution,
+  out vec2 v_rgbNW, out vec2 v_rgbNE,
+  out vec2 v_rgbSW, out vec2 v_rgbSE,
+  out vec2 v_rgbM
+) {
+  vec2 inverseVP = 1.0 / resolution.xy;
+  v_rgbNW = (fragCoord + vec2(-1.0, -1.0)) * inverseVP;
+  v_rgbNE = (fragCoord + vec2(1.0, -1.0)) * inverseVP;
+  v_rgbSW = (fragCoord + vec2(-1.0, 1.0)) * inverseVP;
+  v_rgbSE = (fragCoord + vec2(1.0, 1.0)) * inverseVP;
+  v_rgbM = vec2(fragCoord * inverseVP);
+}
+
+void main(void) {
+  vec2 textureCoord = aPosition * 0.5 + 0.5;
+  vec2 fragCoord = textureCoord * uResolution;
+  texcoords(fragCoord, uResolution, vRgbNW, vRgbNE, vRgbSW, vRgbSE, vRgbM);
+  gl_Position = vec4(aPosition, 0.0, 1.0);
+  vTextureCoord = textureCoord; 
+}

shaders/animated-object.frag

@@ -0,0 +1,33 @@
+#version 300 es
+
+precision mediump float;
+
+in vec3 vLighting;
+in vec4 vPosition;
+in vec4 vClipPlane;
+in vec2 vTextureCoord;
+in vec4 vWorldSpacePosition;
+
+out vec4 fragColor;
+
+uniform float uTime;
+uniform float uAlpha;
+uniform sampler2D uSampler;
+
+float fogLevel = 2.25;
+vec4 fogColor = vec4(180, 224, 255, 255) / 255.0;
+
+void main(void) {
+  // clipping plane
+  if (dot(vWorldSpacePosition, vClipPlane) < 0.0) discard;
+  // texture color
+  vec4 texelColor = texture(uSampler, vTextureCoord);
+  vec4 color = vec4(texelColor.rgb * vLighting, texelColor.a);
+  // apply fog
+  float fogFactor = clamp(smoothstep(0.0, fogLevel, max(0.0, 1.0 - (vWorldSpacePosition.y / fogLevel))), 0.0, 1.0);
+  vec4 final = mix(fogColor, color, fogFactor);
+  final.a = uAlpha;
+  //final.r += -(cos(uTime * 0.0025)) * 0.2;
+  //final.g += (sin(uTime * 0.0025)) * 0.2;
+  fragColor = final;
+}