cervus - npm Package Compare versions

Comparing version 0.0.26 to 0.0.28

_example/1/game.js

@@ -10,2 +10,11 @@ /* global Cervus */
 
+const textured_phong_material = new Cervus.materials.PhongMaterial({
+  requires: [
+    Cervus.components.Render,
+    Cervus.components.Transform
+  ],
+  texture: '../textures/4.png',
+  normal_map: '../textures/uv4.png'
+});
+
 const wireframe_material = new Cervus.materials.WireframeMaterial({
@@ -27,3 +36,3 @@ requires: [
   width: window.innerWidth,
-  height: window.innerHeight
+  height: window.innerHeight,
   // fps: 1
@@ -38,4 +47,4 @@ });
 
-// game.camera.get_component(Cervus.components.Move).keyboard_controlled = true;
-// game.camera.get_component(Cervus.components.Move).mouse_controlled = true;
+game.camera.get_component(Cervus.components.Move).keyboard_controlled = true;
+game.camera.get_component(Cervus.components.Move).mouse_controlled = true;
 
@@ -52,9 +61,9 @@
 const [cube8_transform, cube8_render] = cube8.get_components(Cervus.components.Transform, Cervus.components.Render);
-cube8_transform.position = [0, 0, -5];
+cube8_transform.position = [2, 0, -5];
 cube8_render.color = "#cff";
-cube8_render.material = phong_material;
-cube8.add_component(new Cervus.components.Move({
-  keyboard_controlled: true,
-  mouse_controlled: true
-}));
+cube8_render.material = textured_phong_material;
+// cube8.add_component(new Cervus.components.Move({
+//   keyboard_controlled: true,
+//   mouse_controlled: true
+// }));
 game.add(cube8);
@@ -73,3 +82,3 @@
 sphere_render.color = '#ff0000';
-sphere_render.material = phong_material;
+sphere_render.material = textured_phong_material;
 sphere_transform.position = [3, 0, -10];
@@ -88,5 +97,43 @@ sphere_transform.scale = [ 0.5, 0.5, 0.5 ];
 
+// const zone = 100;
+// const colors = [
+//   'ff00ff',
+//   'ff0000',
+//   '00ff00',
+//   '0000ff',
+//   'ffff00',
+//   '00ffff'
+// ];
+//
+// for (let i = 0; i < 100; i++) {
+//   const light = new Cervus.core.Entity({
+//     components: [
+//       new Cervus.components.Transform({
+//         position: [zone/2-(Math.random()*zone), -0.5, zone/2 - (Math.random()*zone)],
+//         scale: [0.2, 0.2, 0.2]
+//       }),
+//       new Cervus.components.Light({
+//         intensity: 0.001,
+//         color: colors[~~(Math.random()*colors.length)]
+//       }),
+//       new Cervus.components.Render({
+//         color: '#ff00ff',
+//         material: wireframe_material,
+//         indices: sphere_render.indices,
+//         vertices: sphere_render.vertices
+//       })
+//     ]
+//   });
+//   console.log(light.get_component(Cervus.components.Transform).position);
+//   game.add(light);
+// }
+
+const light = game.light;
+const light_transform = light.get_component(Cervus.components.Transform);
+// const light_light = light.get_component(Cervus.components.Light);
+
 let dir = 1;
 game.on('tick', () => {
   cube_transform.rotate_ud(16/1000);
+  cube8_transform.rotate_rl(16/1000);
   sphere_transform.rotate_ud(16/1000);
@@ -101,3 +148,3 @@ sphere_transform.rotate_rl(16/1000);
 
-  game.light_position = game.camera.get_component(Cervus.components.Transform).position;
+  // light_transform.position = game.camera.get_component(Cervus.components.Transform).position;
 
@@ -104,0 +151,0 @@ sphere_transform.position = [

_example/2/game.js

@@ -6,7 +6,14 @@ /* global Cervus */
   height: window.innerHeight,
-  light_position: [-1, 2, 5],
-  light_intensity: 0.9
   // fps: 1
 });
 
+const texture_material = new Cervus.materials.PhongMaterial({
+  requires: [
+    Cervus.components.Render,
+    Cervus.components.Transform
+  ],
+  // texture: '../textures/4.png',
+  normal_map: '../textures/normal2.jpg'
+});
+
 const material = new Cervus.materials.PhongMaterial({
@@ -19,2 +26,9 @@ requires: [
 
+const wireframe = new Cervus.materials.WireframeMaterial({
+  requires: [
+    Cervus.components.Render,
+    Cervus.components.Transform
+  ]
+});
+
 // By default all entities face the user.
@@ -48,10 +62,46 @@ // Rotate the camera to see the scene.
 cube_render.color = "#bada55";
-cube_render.material = material;
+cube_render.material = texture_material;
 group.add(cube);
 game.add(group);
 
-game.on('tick', () => {
-  game.camera.get_component(Cervus.components.Transform).look_at(cube_transform.position);
+const light = Array.from(game.entities_by_component.get(Cervus.components.Light))[0];
+const light_transform = light.get_component(Cervus.components.Transform);
+const light_light = light.get_component(Cervus.components.Light);
+light_light.color = "#ff00ff";
+light_light.intensity = 0.1;
+light_transform.position = [0, 1, 0];
+light_transform.scale = [0.2, 0.2, 0.2];
+light.add_component(
+  new Cervus.components.Render({
+    color: '#ff00ff',
+    material: wireframe,
+    indices: cube_render.indices,
+    vertices: cube_render.vertices
+  })
+);
+
+const light_2 = new Cervus.core.Entity({
+  components: [
+    new Cervus.components.Transform(),
+    new Cervus.components.Light({
+      color: '#00ff00',
+      intensity: 0.1
+    })
+  ]
 });
+game.add(light_2);
 
+const light_2_transform = light_2.get_component(Cervus.components.Transform);
+const light_2_light = light_2.get_component(Cervus.components.Light);
+light_2_transform.position = [3, 0.5, 0];
+light_2_transform.scale = [0.2, 0.2, 0.2];
+light_2.add_component(
+  new Cervus.components.Render({
+    color: '#ff00ff',
+    material: wireframe,
+    indices: cube_render.indices,
+    vertices: cube_render.vertices
+  })
+);
+
 const tween = new Cervus.tweens.VecTween({
@@ -68,3 +118,3 @@ object: cube_transform,
   tween.start().then(() => console.log('done!', new Date() - time));
-}, 1000);
+}, 10000);
 
@@ -96,17 +146,30 @@ const color_tween = new Cervus.tweens.ColorTween({
   });
-}, 1000);
+}, 10000);
 
-// const light_tween= new Cervus.tweens.ValueTween({
-//   object: game,
-//   property: 'light_intensity',
-//   to: 0.1,
-//   time: 600,
-//   game: game
-// });
-//
-// setTimeout(()=> {
-//   let time = new Date();
-//   light_tween.start().then(() => {
-//     console.log('color done!', new Date() - time)
-//   });
-// }, 1000);
+
+let dir = 1;
+game.on('tick', () => {
+  game.camera.get_component(Cervus.components.Transform).look_at(cube_transform.position);
+
+  if (light_transform.position[0] > 3) {
+    // light_light.color = '#ff00ff';
+    // light_2_light.color = '#00ff00';
+    dir = -1;
+  } else if (light_transform.position[0] < -3) {
+    dir = 1;
+    // light_light.color = '#00ff00';
+    // light_2_light.color = '#ff00ff';
+  }
+
+  light_transform.position = [
+    light_transform.position[0] + 0.06 * dir,
+    2,
+    light_transform.position[2] + 0.06 * dir
+  ];
+
+  light_2_transform.position = [
+    light_2_transform.position[0] - 0.04 * dir,
+    2.5,
+    light_2_transform.position[2] - 0.04 * dir
+  ];
+});

_example/4/game.js

 /* global Cervus */
-const material = new Cervus.materials.WireframeMaterial({
+const material = new Cervus.materials.PhongMaterial({
   requires: [
@@ -18,2 +18,4 @@ Cervus.components.Render,
 
+const physics_world = new Cervus.physics.World();
+
 // By default all entities face the user.
@@ -24,3 +26,2 @@ // Rotate the camera to see the scene.
 camera_transform.rotate_rl(Math.PI);
-// game.camera.keyboard_controlled = true;
 
@@ -33,21 +34,31 @@ const plane = new Cervus.shapes.Plane();
 plane_render.color = "#eeeeee";
+plane.add_component(new Cervus.components.RigidBody({
+  world: physics_world,
+  shape: 'box',
+  mass: Infinity
+}));
 game.add(plane);
 
-const cube = new Cervus.shapes.Box();
-const cube_transform = cube.get_component(Cervus.components.Transform);
-const cube_render = cube.get_component(Cervus.components.Render);
-cube_render.material = material;
-cube_render.color = "#00ff00";
-cube_transform.position = [0, 1, -10];
+for (let i = 0; i < 100; i++) {
+  const cube = new Cervus.shapes.Box();
+  const cube_transform = cube.get_component(Cervus.components.Transform);
 
-const group = new Cervus.core.Entity({
-  components: [
-    new Cervus.components.Transform()
-  ]
+  const cube_render = cube.get_component(Cervus.components.Render);
+  cube_render.material = material;
+  cube_render.color = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
+  cube_transform.position = [
+    0,
+    1 * i,
+    -10
+  ];
+  cube.add_component(new Cervus.components.RigidBody({
+    world: physics_world,
+    shape: 'box',
+    mass: 5
+  }));
+  game.add(cube);
+}
+
+game.on('tick', () => {
+  physics_world.step(1/game.fps);
 });
-game.add(group);
-group.add(cube);
-//
-// game.on('tick', () => {
-//   group.get_component(Cervus.components.Transform).rotate_rl(16/1000);
-// });

_example/animation/game.js

@@ -11,3 +11,3 @@ /* global Cervus */
 
-const material = new Cervus.materials.BasicMaterial({
+const material = new Cervus.materials.PhongMaterial({
   requires: [
@@ -14,0 +14,0 @@ Cervus.components.Render,

components/index.js

@@ -5,1 +5,3 @@ export * from './transform';
 export * from './morph';
+export * from './light';
+export * from './rigid_body';

components/render.js

@@ -10,4 +10,5 @@ import { Component } from '../core';
   normals: [],
+  uvs: [],
   color: 'fff',
-  color_opacity: 1
+  opacity: 1
 }
@@ -25,3 +26,3 @@
     this._color = hex || 'fff';
-    this.color_vec = [...hex_to_rgb(this._color), this.color_opacity];
+    this.color_vec = [...hex_to_rgb(this._color), this.opacity];
   }
@@ -38,3 +39,4 @@
       qty: this.indices.length,
-      normals: create_float_buffer(this.normals)
+      normals: create_float_buffer(this.normals),
+      uvs: create_float_buffer(this.uvs)
     }
@@ -41,0 +43,0 @@ }

core/game.js

 import { hex_to_rgb } from '../utils';
-import { vec3, mat4, to_radian } from '../math';
+import { mat4, to_radian } from '../math';
 import { gl, canvas } from './context';
 import { Entity } from './entity';
-import { Transform, Move } from '../components';
+import { Transform, Move, Light } from '../components';
 
@@ -17,5 +17,3 @@ const default_options = {
   far: 85,
-  clear_color: '#FFFFFF',
-  light_position: vec3.zero.slice(),
-  light_intensity: 0.6
+  clear_color: '#FFFFFF'
 };
@@ -44,2 +42,11 @@
 
+    this.light = new Entity({
+      components: [
+        new Transform(),
+        new Light()
+      ]
+    });
+    this.add(this.light);
+
+
     this.projMatrix = mat4.create();
@@ -105,2 +112,3 @@ this.viewMatrix = mat4.create();
     this.mouse_delta = {x: 0, y: 0};
+    this.entities_by_component = new WeakMap();
   }
@@ -202,10 +210,32 @@
 
+  add_to_components_sets(entity) {
+    entity.components.forEach((component => {
+      if (!this.entities_by_component.has(component.constructor)) {
+        this.entities_by_component.set(component.constructor, new Set());
+      }
+
+      this.entities_by_component.get(component.constructor).add(entity);
+    }));
+  }
+
+  remove_from_components_sets(entity) {
+    entity.components.forEach((component => {
+      this.entities_by_component.get(component.constructor).delete(entity);
+    }));
+  }
+
+  get_entities_by_component(component) {
+    return Array.from(this.entities_by_component.get(component));
+  }
+
   add(entity) {
     entity.game = this;
     this.entities.add(entity);
+    this.add_to_components_sets(entity);
   }
 
   remove(entity) {
+    this.remove_from_components_sets(entity);
     this.entities.delete(entity);
   }
 }

core/index.js

@@ -5,4 +5,5 @@ export * from './game';
 export * from './model-loader';
+export * from './image-loader';
 export * from './component';
 export * from './tween';
 export * from './material';

core/material.js

 import { create_program_object, create_shader_object, gl } from './context';
 import { Transform, Render } from '../components';
+import { image_loader } from './';
 
@@ -15,5 +16,9 @@ import { vertex } from '../shaders';
     );
+
+    this._textures = {};
+
+    this.texture = options.texture || false;
+    this.normal_map = options.normal_map || false;
   }
 
-
   add_feature(feature) {
@@ -23,2 +28,10 @@ this.features.add(feature);
 
+  has_feature(feature) {
+    return this.features.has(feature);
+  }
+
+  remove_feature(feature) {
+    this.features.delete(feature);
+  }
+
   setup_program() {
@@ -38,3 +51,6 @@ this.program = create_program_object(
       console.log(this.program.error); return;
+    } else {
+      this.get_locations();
     }
+
   }
@@ -56,2 +72,50 @@
 
+  set texture(url) {
+    this.build_texture(url, this._texture_url, 'TEXTURE', 'gl_texture');
+  }
+
+  get texture() {
+    return this._texture_url;
+  }
+
+  set normal_map(url) {
+    this.build_texture(url, this._normal_map_url, 'NORMAL_MAP', 'gl_normal_map');
+  }
+
+  get normal_map() {
+    return this._normal_map_url;
+  }
+
+  build_texture(new_url, url_location, feature, gl_texture_key) {
+    if (new_url !== url_location && new_url) {
+
+      url_location = new_url;
+
+      if (!this._textures[gl_texture_key]) {
+        this._textures[gl_texture_key] = gl.createTexture();
+      }
+
+      image_loader(new_url)
+      .then(image => {
+
+        gl.bindTexture(gl.TEXTURE_2D, this._textures[gl_texture_key]);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,gl.UNSIGNED_BYTE, image);
+        gl.generateMipmap(gl.TEXTURE_2D);
+
+        if (!this.has_feature(feature)) {
+          this.add_feature(feature);
+          this.setup_program();
+        }
+      })
+      .catch(console.error);
+
+    } else if (!new_url) {
+
+      url_location = new_url;
+      this.remove_feature(feature);
+      this.setup_program();
+
+    }
+  }
+
   render(entity) {
@@ -58,0 +122,0 @@ let ent = entity;

index.js

@@ -7,2 +7,3 @@ import * as _core from './core';
 import * as _tweens from './tweens';
+import * as _physics from './physics';
 
@@ -15,3 +16,4 @@ export {
   _shapes as shapes,
-  _tweens as tweens
+  _tweens as tweens,
+  _physics as physics
 };

materials/basic.js

@@ -11,5 +11,8 @@ import { gl } from '../core/context';
     this.setup_program();
+  }
+
+  get_locations() {
     this.get_uniforms_and_attrs(
-      ['p', 'v', 'w', 'c', 'frame_delta', 'do_morph'],
-      ['P_current', 'P_next']
+      ['p', 'v', 'w', 'c', 'frame_delta'],
+      ['P_current', 'P_next', 'a_t']
     );
@@ -22,3 +25,3 @@ }
 
-    if (morph) {
+    if (render.material.has_feature('MORPH')) {
 
@@ -35,10 +38,16 @@ buffers = render.buffers[morph.current_frame];
       gl.enableVertexAttribArray(this.attribs.P_next);
-
-      gl.uniform1f(this.uniforms.do_morph, 1);
       gl.uniform1f(this.uniforms.frame_delta, morph.frame_delta);
 
-    } else {
+    }
 
-      gl.uniform1f(this.uniforms.do_morph, 0);
+    if (render.material.has_feature('TEXTURE')) {
 
+      gl.uniform1i(this.uniforms.u_t, 0);
+      gl.activeTexture(gl.TEXTURE0);
+      gl.bindTexture(gl.TEXTURE_2D, render.material._textures.gl_texture);
+      
+      gl.bindBuffer(gl.ARRAY_BUFFER, buffers.uvs);
+      gl.enableVertexAttribArray(this.attribs.a_t);
+      gl.vertexAttribPointer(this.attribs.a_t, 2, gl.FLOAT, true, 0, 0);
+
     }
@@ -45,0 +54,0 @@

materials/phong.js

 import { gl } from '../core/context';
 import { Material } from '../core';
 
-import { Render, Morph } from '../components';
+import { Render, Morph, Light, Transform } from '../components';
 
@@ -12,5 +12,8 @@ export class PhongMaterial extends Material {
     this.setup_program();
+  }
+
+  get_locations() {
     this.get_uniforms_and_attrs(
-      ['p', 'v', 'w', 'lp', 'li', 'c', 'do_morph', 'frame_delta'],
-      ['P_current', 'P_next', 'N_current', 'N_next']
+      ['p', 'v', 'w', 'lp', 'li', 'lc', 'al', 'c', 'u_t', 'n_m', 'frame_delta'],
+      ['P_current', 'P_next', 'N_current', 'N_next', 'a_t']
     );
@@ -23,4 +26,3 @@ }
 
-    if (morph) {
-
+    if (render.material.has_feature('MORPH')) {
       buffers = render.buffers[morph.current_frame];
@@ -37,11 +39,30 @@
 
-      gl.uniform1f(this.uniforms.do_morph, 1);
       gl.uniform1f(this.uniforms.frame_delta, morph.frame_delta);
+    }
 
-    } else {
+    if (render.material.has_feature('TEXTURE')) {
 
-      gl.uniform1f(this.uniforms.do_morph, 0);
+      gl.uniform1i(this.uniforms.u_t, 0);
+      gl.activeTexture(gl.TEXTURE0);
+      gl.bindTexture(gl.TEXTURE_2D, render.material._textures.gl_texture);
 
+      gl.bindBuffer(gl.ARRAY_BUFFER, buffers.uvs);
+      gl.enableVertexAttribArray(this.attribs.a_t);
+      gl.vertexAttribPointer(this.attribs.a_t, 2, gl.FLOAT, true, 0, 0);
+
     }
 
+    if (render.material.has_feature('NORMAL_MAP')) {
+
+      gl.uniform1i(this.uniforms.n_m, 1);
+      gl.activeTexture(gl.TEXTURE1);
+      gl.bindTexture(gl.TEXTURE_2D, render.material._textures.gl_normal_map);
+
+      if (!render.material.has_feature('TEXTURE')) {
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.uvs);
+        gl.enableVertexAttribArray(this.attribs.a_t);
+        gl.vertexAttribPointer(this.attribs.a_t, 2, gl.FLOAT, true, 0, 0);
+      }
+    }
+
     // current frame
@@ -68,5 +89,25 @@ gl.bindBuffer(gl.ARRAY_BUFFER, buffers.vertices);
 
-    gl.uniform3fv(this.uniforms.lp, game.light_position);
-    gl.uniform2fv(this.uniforms.li, [game.light_intensity, 1 - game.light_intensity]);
+    const lights = game.get_entities_by_component(Light);
+    const lights_count = lights.length;
+    let light_position = new Float32Array(lights_count * 3);
+    let light_intensity = new Float32Array(lights_count * 2);
+    let light_color = new Float32Array(lights_count * 3);
+
+    for (let i = 0; i < lights_count; i++) {
+      light_position.set(lights[i].get_component(Transform).position, i * 3);
+      light_intensity.set([
+        lights[i].get_component(Light).intensity,
+        1 - lights[i].get_component(Light).intensity
+      ], i * 2);
+      light_color.set(lights[i].get_component(Light).color_vec, i * 3);
+    }
+
+    gl.uniform1i(this.uniforms.al, lights_count);
+
+    gl.uniform3fv(this.uniforms.lp, light_position);
+    gl.uniform2fv(this.uniforms.li, light_intensity);
+    gl.uniform3fv(this.uniforms.lc, light_color);
+
+
   }
 }

math/index.js

@@ -14,1 +14,5 @@ import * as _vec3 from './vec3';
 }
+
+export function to_degrees(a) {
+  return a * 180 / Math.PI;
+}

package.json

 {
   "name": "cervus",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "author": "Michał Budzyński <[e-mail]>",
@@ -8,3 +8,3 @@ "repository": "[e-mail]:michalbe/cervus.git",
   "scripts": {
-    "prod": "./node_modules/.bin/rollup -c rollup-prod.js && printf \"Size gzipped: %s\n\" $(gzip dist/cervus.min.js --stdout | wc -c | awk '{print $1/1000\"K\"}')",
+    "prod": "./node_modules/.bin/rollup -c rollup-prod.js && printf \"Size gzipped: %s\n\" $(gzip dist/cervus.min.js --stdout | wc -c | awk '{print $1/1024\"K\"}')",
     "dev": "./node_modules/.bin/rollup -c rollup-dev.js -w"
@@ -20,2 +20,4 @@ },
     "rollup-plugin-babel-minify": "^3.1.2",
+    "rollup-plugin-commonjs": "^8.2.4",
+    "rollup-plugin-json": "^2.3.0",
     "rollup-plugin-livereload": "^0.4.0",
@@ -26,4 +28,5 @@ "rollup-plugin-node-resolve": "^3.0.0",
   "dependencies": {
-    "gl-matrix": "^2.4.0"
+    "gl-matrix": "^2.4.0",
+    "goblinphysics": "^0.9.2"
   }
 }

rollup-dev.js

 import resolve from 'rollup-plugin-node-resolve';
 import serve from 'rollup-plugin-serve'
 import livereload from 'rollup-plugin-livereload'
+import commonjs from 'rollup-plugin-commonjs';
 
@@ -15,3 +16,2 @@ export default {
     serve({
-      // open: true,
       contentBase: ['_example', 'dist']
@@ -21,4 +21,8 @@ }),
       watch: ['dist', '_example']
+    }),
+    commonjs({
+      include: 'node_modules/**',
+      sourceMap: false
     })
   ],
 };

rollup-prod.js

 import resolve from 'rollup-plugin-node-resolve';
 import minify from 'rollup-plugin-babel-minify';
+import commonjs from 'rollup-plugin-commonjs';
 
@@ -13,4 +14,8 @@ export default {
     resolve(),
+    commonjs({
+      include: 'node_modules/**',
+      sourceMap: false
+    }),
     minify({ comments: false }),
   ],
 };

shaders/fragment.js

@@ -0,1 +1,15 @@
+//
+// Variables used by fragment shader
+//
+// vec4 c; // color
+// vec3 fp; // vertex position
+// vec3[MAX_LIGHTS] lp; // light position
+// vec2[MAX_LIGHTS] li; // light intensity
+// vec3[MAX_LIGHTS] lc; // light color
+// int al; // active lights
+// vec3 fn; // vertex normals
+// vec2 v_t; // texture coordinates
+// sampler2D u_t; //texture
+// sampler2D n_m; // normal map
+
 export function fragment(defines) {
@@ -10,13 +24,29 @@ return `#version 300 es
 
-    uniform vec4 c; // color
+    uniform vec4 c;
 
-    in vec3 fp; // vertex position
+    in vec3 fp;
 
     #ifdef LIGHTS
-      uniform vec3 lp; // light position
-      uniform vec2 li; // light intensity
+      #define MAX_LIGHTS 100
 
-      in vec3 fn; // vertex normals
-   #endif
+      uniform vec3[MAX_LIGHTS] lp;
+      uniform vec2[MAX_LIGHTS] li;
+      uniform vec3[MAX_LIGHTS] lc;
+      uniform int al;
 
+      in vec3 fn;
+    #endif
+
+    #if defined(TEXTURE) || defined(NORMAL_MAP)
+      in vec2 v_t;
+    #endif
+
+    #ifdef TEXTURE
+      uniform sampler2D u_t;
+    #endif
+
+    #ifdef NORMAL_MAP
+      uniform sampler2D n_m;
+    #endif
+
     out vec4 frag_color;
@@ -27,7 +57,37 @@
       #ifdef LIGHTS
-        frag_color = vec4(c.rgb * li.x + li.y * max(dot(fn, normalize(lp - fp)), 0.0), c.a);
-      #endif
+        #ifdef TEXTURE
+          vec4 p_c = texture(u_t, v_t);
+        #else
+          vec4 p_c = c;
+        #endif
 
-      #ifndef LIGHTS
-        frag_color = c;
+        #ifdef NORMAL_MAP
+          vec3 Q1 = dFdx(fp);
+          vec3 Q2 = dFdy(fp);
+
+          vec2 st1 = dFdx(v_t);
+          vec2 st2 = dFdy(v_t);
+
+          vec3 tangent = normalize(Q1 * st2.t - Q2 * st1.t);
+          vec3 bitangent = normalize(-Q1 * st2.s + Q2 * st1.s);
+
+          mat3 TBN = mat3(tangent, bitangent, fn);
+
+          vec3 n = normalize(texture(n_m, v_t).rgb * 2.0 - 1.0) * TBN;
+        #else
+          vec3 n = fn;
+        #endif
+
+        vec4 light = vec4(0.0, 0.0, 0.0, 1.0);
+        for (int i = 0; i < al; i++) {
+          light += vec4(p_c.rgb * li[i].x + li[i].y * max(dot(n, normalize(lp[i] - fp)) * lc[i], 0.0), p_c.a);
+        }
+
+        frag_color = light;
+      #else
+        #ifdef TEXTURE
+          frag_color = texture(u_t, v_t);
+        #else
+          frag_color = c;
+        #endif
       #endif
@@ -34,0 +94,0 @@ }

shaders/vertex.js

@@ -0,1 +1,15 @@
+// Variables used by Vertex shader
+//
+// mat4 p; //projection
+// mat4 v; //view
+// mat4 w; // world
+// vec3 P_current; // current frame vertex position
+// float frame_delta;
+// vec3 P_next; // next frame vertex position
+// vec3 N_next; // next frame normal
+// vec3 N_current; // current frame normal
+// vec3 fn; // output normal
+// vec2 a_t; // texture coordinates
+// vec2 v_t; // texture coordinates output
+
 export function vertex(defines) {
@@ -10,21 +24,26 @@ return `#version 300 es
 
-    uniform mat4 p; //projection
-    uniform mat4 v; //view
-    uniform mat4 w; // world
+    uniform mat4 p;
+    uniform mat4 v;
+    uniform mat4 w;
 
-    in vec3 P_current; // current vertex position
+    in vec3 P_current;
 
     #ifdef MORPH
       uniform float frame_delta;
-      in vec3 P_next; // next vertex position
-      in vec3 N_next; // next normal
+      in vec3 P_next;
+      in vec3 N_next;
     #endif
 
     #ifdef LIGHTS
-      in vec3 N_current; // next normal
-      out vec3 fn; // output normal
+      in vec3 N_current;
+      out vec3 fn;
     #endif
 
-    out vec3 fp; // output vertex position
+    #if defined(TEXTURE) || defined(NORMAL_MAP)
+      in vec2 a_t;
+      out vec2 v_t;
+    #endif
 
+    out vec3 fp;
+
     void main()
@@ -40,5 +59,3 @@ {
         #endif
-      #endif
-
-      #ifndef MORPH
+      #else
         fp = (w * vec4(P_current, 1.0)).xyz;
@@ -52,4 +69,8 @@
       gl_Position = p * v * vec4(fp, 1.0);
+
+      #if defined(TEXTURE) || defined(NORMAL_MAP)
+        v_t = a_t;
+      #endif
     }
   `;
 }

shapes/box.js

@@ -75,2 +75,35 @@ import { Entity } from '../core';
 
+const uvs = [
+  0, 0,
+  1, 0,
+  0, 1,
+  1, 1,
+
+  0, 0,
+  1, 0,
+  0, 1,
+  1, 1,
+
+  0, 0,
+  1, 0,
+  0, 1,
+  1, 1,
+
+  0, 0,
+  1, 0,
+  0, 1,
+  1, 1,
+
+  0, 0,
+  1, 0,
+  0, 1,
+  1, 1,
+
+  0, 0,
+  1, 0,
+  0, 1,
+  1, 1,
+
+];
+
 export class Box extends Entity {
@@ -84,3 +117,4 @@ constructor(options = {}) {
         normals,
-        material: options.material
+        material: options.material,
+        uvs
       })
@@ -87,0 +121,0 @@ ];

shapes/plane.js

@@ -25,2 +25,9 @@ import { Entity } from '../core';
 
+const uvs = [
+  0, 0,
+  1, 0,
+  0, 1,
+  1, 1
+];
+
 export class Plane extends Entity {
@@ -34,2 +41,3 @@ constructor(options = {}) {
         normals,
+        uvs,
         material: options.material
@@ -36,0 +44,0 @@ })

shapes/sphere.js

@@ -60,2 +60,64 @@ import { Entity } from '../core';
 
+const uvs = [
+  0.5881, 0.5,
+  0.75, 0.6762,
+  0.5, 0.8237,
+  0.75, 0.6762,
+  1, 0.8237,
+  0.5, 0.8237,
+  0, 0.8237,
+  0.25, 0.6762,
+  0.5, 0.8237,
+  0.25, 0.6762,
+  0.4118, 0.5,
+  0.5, 0.8237,
+  0.4118, 0.5,
+  0.5881, 0.5,
+  0.5, 0.8237,
+  0.75, 0.6762,
+  0.9118, 0.5,
+  1, 0.8237,
+  0.5881, 0.5,
+  0.75, 0.3237,
+  0.75, 0.6762,
+  0.4118, 0.5,
+  0.5, 0.1762,
+  0.5881, 0.5,
+  0.25, 0.6762,
+  0.25, 0.3237,
+  0.4118, 0.5,
+  0, 0.8237,
+  0.0881, 0.5,
+  0.25, 0.6762,
+  0.9118, 0.5,
+  0.75, 0.3237,
+  1, 0.1762,
+  0.75, 0.3237,
+  0.5, 0.1762,
+  1, 0.1762,
+  0.5, 0.1762,
+  0.25, 0.3237,
+  0, 0.1762,
+  0.25, 0.3237,
+  0.0881, 0.5,
+  0, 0.1762,
+  1.0881, 0.5,
+  0.9118, 0.5,
+  1, 0.1762,
+  0.9118, 0.5,
+  0.75, 0.6762,
+  0.75, 0.3237,
+  0.75, 0.3237,
+  0.5881, 0.5,
+  0.5, 0.1762,
+  0.5, 0.1762,
+  0.4118, 0.5,
+  0.25, 0.3237,
+  0.25, 0.3237,
+  0.25, 0.6762,
+  0.0881, 0.5,
+  1.0881, 0.5,
+  1, 0.8237,
+  0.9118, 0.5
+];
 export class Sphere extends Entity {
@@ -69,2 +131,3 @@ constructor(options = {}) {
         normals,
+        uvs,
         material: options.material
@@ -71,0 +134,0 @@ })

No alert changes

Improved metrics

Total package byte prevSize

3649750

increased by2150.92%

Number of package files

71

increased by26.79%

Lines of code

13162

increased by4.35%

Worsened metrics

Dependency count

2

increased by100%

Dev dependency count

12

increased by20%

Dependency changes

• + Addedgoblinphysics@^0.9.2

• + Addedgoblinphysics@0.9.2(transitive)