Merge pull request #11 from Longi94/develop

0.1.3

README.md

@@ -1,8 +1,21 @@
-# rl-loadout-lib ![https://www.npmjs.com/package/rl-loadout-lib](https://img.shields.io/npm/v/rl-loadout-lib)
-
-| master | develop |
-| --- | --- |
-| [![CircleCI](https://circleci.com/gh/Longi94/rl-loadout-lib/tree/master.svg?style=svg)](https://circleci.com/gh/Longi94/rl-loadout-lib/tree/master) | [![CircleCI](https://circleci.com/gh/Longi94/rl-loadout-lib/tree/develop.svg?style=svg)](https://circleci.com/gh/Longi94/rl-loadout-lib/tree/develop) |
+# rl-loadout-lib
+
+[![CircleCI][circleci]][circleci-url]
+[![NPM package][npm]][npm-url]
+[![Build Size][build-size]][build-size-url]
+[![Language Grade][lgtm]][lgtm-url]
+[![Discord][discord]][discord-url]
+
+[circleci]: https://circleci.com/gh/Longi94/rl-loadout-lib/tree/master.svg?style=svg
+[circleci-url]: https://circleci.com/gh/Longi94/rl-loadout-lib/tree/master
+[npm]: https://img.shields.io/npm/v/rl-loadout-lib
+[npm-url]: https://www.npmjs.com/package/rl-loadout-lib
+[build-size]: https://badgen.net/bundlephobia/minzip/rl-loadout-lib
+[build-size-url]: https://bundlephobia.com/result?p=rl-loadout-lib
+[lgtm]: https://img.shields.io/lgtm/grade/javascript/github/Longi94/rl-loadout-lib.svg?label=code%20quality
+[lgtm-url]: https://lgtm.com/projects/g/Longi94/rl-loadout-lib/
+[discord]: https://img.shields.io/discord/609050910731010048.svg?colorB=7581dc&logo=discord&logoColor=white
+[discord-url]: https://discord.gg/c8cArY9
 
 Load Rocket League assets into three.js. This library is closely tied with [Rocket Loadout](https://github.com/Longi94/rl-loadout) as the code was originally part of it. It uses GLTF models and TGA textures created and stored for the website.
 
@@ -17,9 +30,15 @@ Models are DRACO compressed, you must provide the [decoder](https://github.com/m
 ```typescript
 import { Scene } from 'three';
 import { RocketAssetManager, RocketConfig, PaintConfig } from 'rl-loadout-lib';
-
-const config = new RocketConfig();
-config.dracoDecoderPath = '/draco/';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+
+// You must provide the GLTFLoader to avoid issues with multiple instances of three.js and webgl context
+const gltfLoader = new GLTFLoader();
+const dracoLoader = new DRACOLoader();
+dracoLoader.setDecoderPath('/draco/');
+gltfLoader.setDRACOLoader(dracoLoader);
+const config = new RocketConfig(gltfLoader);
 
 const manager = new RocketAssetManager(config);
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-loadout-lib",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Load Rocket League assets into three.js",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/3d/body/berry-model.ts

@@ -4,8 +4,7 @@ import { Decal } from '../../model/decal';
 import { BodyTexture } from './body-texture';
 import { Body } from '../../model/body';
 import { PaintConfig } from '../../model/paint-config';
-import { PromiseLoader } from '../../utils/loader';
-import { TgaRgbaLoader } from '../../utils/tga-rgba-loader';
+import { ImageTextureLoader, PromiseLoader } from '../../utils/loader';
 import { Layer, LayeredTexture } from '../layered-texture';
 import { getAssetUrl } from '../../utils/network';
 import { getChannel, getMaskPixels, ImageChannel, invertChannel } from '../../utils/image';
@@ -14,10 +13,10 @@ import { RocketConfig } from '../../model/rocket-config';
 
 class BerryBodySkin implements BodyTexture {
 
-  private readonly loader = new PromiseLoader(new TgaRgbaLoader());
+  private readonly loader: PromiseLoader;
 
-  private readonly baseUrl;
-  private readonly blankSkinUrl;
+  private readonly baseUrl: string;
+  private readonly blankSkinUrl: string;
 
   private primary: Color;
 
@@ -27,6 +26,7 @@ class BerryBodySkin implements BodyTexture {
   private primaryPixels: Set<number>;
 
   constructor(body: Body, paints: PaintConfig, rocketConfig: RocketConfig) {
+    this.loader = new PromiseLoader(new ImageTextureLoader(rocketConfig.textureFormat, rocketConfig.loadingManager));
     this.baseUrl = getAssetUrl(body.base_skin, rocketConfig);
     this.blankSkinUrl = getAssetUrl(body.blank_skin, rocketConfig);
     this.primary = paints.primary;

src/3d/body/body-model.ts

@@ -1,8 +1,7 @@
 import { Bone, Color, Mesh, MeshStandardMaterial, Object3D, Scene, Vector3 } from 'three';
 import { AbstractObject } from '../object';
 import { Body } from '../../model/body';
-import { PromiseLoader } from '../../utils/loader';
-import { TgaRgbaLoader } from '../../utils/tga-rgba-loader';
+import { ImageTextureLoader, PromiseLoader } from '../../utils/loader';
 import { getAssetUrl } from '../../utils/network';
 import { disposeIfExists } from '../../utils/util';
 import { Paintable } from '../paintable';
@@ -24,7 +23,7 @@ export class BodyModel extends AbstractObject implements Paintable {
 
   private readonly body: Body;
 
-  textureLoader = new PromiseLoader(new TgaRgbaLoader());
+  textureLoader: PromiseLoader;
 
   skeleton: Bone;
   bodyMaterial: MeshStandardMaterial;
@@ -46,6 +45,7 @@ export class BodyModel extends AbstractObject implements Paintable {
 
   constructor(body: Body, decal: Decal, paints: PaintConfig, rocketConfig: RocketConfig) {
     super(getAssetUrl(body.model, rocketConfig), rocketConfig.gltfLoader);
+    this.textureLoader = new PromiseLoader(new ImageTextureLoader(rocketConfig.textureFormat, rocketConfig.loadingManager));
 
     this.body = body;
 
@@ -55,7 +55,8 @@ export class BodyModel extends AbstractObject implements Paintable {
       this.chassisSkin = new ChassisSkin(
         getAssetUrl(body.chassis_base, rocketConfig),
         getAssetUrl(body.chassis_n, rocketConfig),
-        paints
+        paints,
+        rocketConfig
       );
     }
   }

src/3d/body/dark-car-model.ts

@@ -3,8 +3,7 @@ import { Color, Texture } from 'three';
 import { Decal } from '../../model/decal';
 import { BodyTexture } from './body-texture';
 import { Layer, LayeredTexture } from '../layered-texture';
-import { PromiseLoader } from '../../utils/loader';
-import { TgaRgbaLoader } from '../../utils/tga-rgba-loader';
+import { ImageTextureLoader, PromiseLoader } from '../../utils/loader';
 import { PaintConfig } from '../../model/paint-config';
 import { Body } from '../../model/body';
 import { getAssetUrl } from '../../utils/network';
@@ -14,10 +13,10 @@ import { RocketConfig } from '../../model/rocket-config';
 
 class DarkCarBodySkin implements BodyTexture {
 
-  private readonly loader = new PromiseLoader(new TgaRgbaLoader());
+  private readonly loader: PromiseLoader;
 
-  private readonly baseUrl;
-  private readonly blankSkinUrl;
+  private readonly baseUrl: string;
+  private readonly blankSkinUrl: string;
 
   private primary: Color;
 
@@ -27,6 +26,7 @@ class DarkCarBodySkin implements BodyTexture {
   private primaryPixels: Set<number>;
 
   constructor(body: Body, paints: PaintConfig, rocketConfig: RocketConfig) {
+    this.loader = new PromiseLoader(new ImageTextureLoader(rocketConfig.textureFormat, rocketConfig.loadingManager));
     this.baseUrl = getAssetUrl(body.base_skin, rocketConfig);
     this.blankSkinUrl = getAssetUrl(body.blank_skin, rocketConfig);
     this.primary = paints.primary;

src/3d/body/eggplant-model.ts

@@ -4,19 +4,18 @@ import { Decal } from '../../model/decal';
 import { BodyTexture } from './body-texture';
 import { Body } from '../../model/body';
 import { PaintConfig } from '../../model/paint-config';
-import { PromiseLoader } from '../../utils/loader';
-import { TgaRgbaLoader } from '../../utils/tga-rgba-loader';
+import { ImageTextureLoader, PromiseLoader } from '../../utils/loader';
 import { Layer, LayeredTexture } from '../layered-texture';
 import { getAssetUrl } from '../../utils/network';
 import { getChannel, getMaskPixels, ImageChannel, invertChannel } from '../../utils/image';
 import { RocketConfig } from '../../model/rocket-config';
 
 class EggplantBodySkin implements BodyTexture {
 
-  private readonly loader = new PromiseLoader(new TgaRgbaLoader());
+  private readonly loader: PromiseLoader;
 
-  private readonly baseUrl;
-  private readonly blankSkinUrl;
+  private readonly baseUrl: string;
+  private readonly blankSkinUrl: string;
 
   private primary: Color;
 
@@ -26,6 +25,7 @@ class EggplantBodySkin implements BodyTexture {
   private primaryPixels: Set<number>;
 
   constructor(body: Body, paints: PaintConfig, rocketConfig: RocketConfig) {
+    this.loader = new PromiseLoader(new ImageTextureLoader(rocketConfig.textureFormat, rocketConfig.loadingManager));
     this.baseUrl = getAssetUrl(body.base_skin, rocketConfig);
     this.blankSkinUrl = getAssetUrl(body.blank_skin, rocketConfig);
     this.primary = paints.primary;

src/3d/body/feline-model.ts

@@ -4,19 +4,18 @@ import { BodyTexture } from './body-texture';
 import { Color, Texture } from 'three';
 import { Body } from '../../model/body';
 import { PaintConfig } from '../../model/paint-config';
-import { PromiseLoader } from '../../utils/loader';
-import { TgaRgbaLoader } from '../../utils/tga-rgba-loader';
+import { ImageTextureLoader, PromiseLoader } from '../../utils/loader';
 import { Layer, LayeredTexture } from '../layered-texture';
 import { getAssetUrl } from '../../utils/network';
 import { getChannel, getMaskPixels, ImageChannel, invertChannel } from '../../utils/image';
 import { RocketConfig } from '../../model/rocket-config';
 
 class FelineBodySkin implements BodyTexture {
 
-  private readonly loader = new PromiseLoader(new TgaRgbaLoader());
+  private readonly loader: PromiseLoader;
 
-  private readonly baseUrl;
-  private readonly blankSkinUrl;
+  private readonly baseUrl: string;
+  private readonly blankSkinUrl: string;
 
   private primary: Color;
 
@@ -26,6 +25,7 @@ class FelineBodySkin implements BodyTexture {
   private primaryPixels: Set<number>;
 
   constructor(body: Body, paints: PaintConfig, rocketConfig: RocketConfig) {
+    this.loader = new PromiseLoader(new ImageTextureLoader(rocketConfig.textureFormat, rocketConfig.loadingManager));
     this.baseUrl = getAssetUrl(body.base_skin, rocketConfig);
     this.blankSkinUrl = getAssetUrl(body.blank_skin, rocketConfig);
     this.primary = paints.primary;

src/3d/body/grey-car-model.ts

@@ -4,8 +4,7 @@ import { Decal } from '../../model/decal';
 import { BodyTexture } from './body-texture';
 import { Body } from '../../model/body';
 import { PaintConfig } from '../../model/paint-config';
-import { PromiseLoader } from '../../utils/loader';
-import { TgaRgbaLoader } from '../../utils/tga-rgba-loader';
+import { ImageTextureLoader, PromiseLoader } from '../../utils/loader';
 import { Layer, LayeredTexture } from '../layered-texture';
 import { getAssetUrl } from '../../utils/network';
 import { getChannel, ImageChannel } from '../../utils/image';
@@ -14,10 +13,10 @@ import { RocketConfig } from '../../model/rocket-config';
 
 class GreyCarSkin implements BodyTexture {
 
-  private readonly loader = new PromiseLoader(new TgaRgbaLoader());
+  private readonly loader: PromiseLoader;
 
-  private readonly baseUrl;
-  private readonly blankSkinUrl;
+  private readonly baseUrl: string;
+  private readonly blankSkinUrl: string;
 
   private primary: Color;
 
@@ -27,6 +26,7 @@ class GreyCarSkin implements BodyTexture {
   private primaryPixels: Set<number>;
 
   constructor(body: Body, paints: PaintConfig, rocketConfig: RocketConfig) {
+    this.loader = new PromiseLoader(new ImageTextureLoader(rocketConfig.textureFormat, rocketConfig.loadingManager));
     this.baseUrl = getAssetUrl(body.base_skin, rocketConfig);
     this.blankSkinUrl = getAssetUrl(body.blank_skin, rocketConfig);
     this.primary = paints.primary;

src/3d/chassis-skin.ts

@@ -1,13 +1,13 @@
-import { PromiseLoader } from '../utils/loader';
-import { TgaRgbaLoader } from '../utils/tga-rgba-loader';
+import { ImageTextureLoader, PromiseLoader } from '../utils/loader';
 import { Color } from 'three';
 import { Layer, LayeredTexture } from './layered-texture';
 import { PaintConfig } from '../model/paint-config';
 import { getChannel, getMaskPixels, ImageChannel, opaque } from '../utils/image';
+import { RocketConfig } from '../model/rocket-config';
 
 export class ChassisSkin {
 
-  private tgaLoader = new PromiseLoader(new TgaRgbaLoader());
+  private tgaLoader: PromiseLoader;
   private paint: Color;
   private paintLayer: Layer;
   private paintPixels: Set<number>;
@@ -17,7 +17,8 @@ export class ChassisSkin {
   private accentLayer: Layer;
   private accentPixels: Set<number>;
 
-  constructor(private baseUrl: string, private rgbaMapUrl: string, paints: PaintConfig) {
+  constructor(private baseUrl: string, private rgbaMapUrl: string, paints: PaintConfig, rocketConfig: RocketConfig) {
+    this.tgaLoader = new PromiseLoader(new ImageTextureLoader(rocketConfig.textureFormat, rocketConfig.loadingManager));
     this.paint = paints.body;
     this.accent = paints.accent;
   }

src/3d/static-skin.ts

@@ -2,8 +2,7 @@ import { Color, Texture } from 'three';
 import { Decal } from '../model/decal';
 import { getAssetUrl } from '../utils/network';
 import { BodyTexture } from './body/body-texture';
-import { PromiseLoader } from '../utils/loader';
-import { TgaRgbaLoader } from '../utils/tga-rgba-loader';
+import { ImageTextureLoader, PromiseLoader } from '../utils/loader';
 import { Layer, LayeredTexture } from './layered-texture';
 import { Body } from '../model/body';
 import { applyMaskToChannel, getChannel, getMaskPixels, ImageChannel, invertChannel, opaque } from '../utils/image';
@@ -14,7 +13,7 @@ import { RocketConfig } from '../model/rocket-config';
 
 export class StaticSkin implements BodyTexture {
 
-  private readonly loader: PromiseLoader = new PromiseLoader(new TgaRgbaLoader());
+  private readonly loader: PromiseLoader;
 
   private readonly baseUrl: string;
   private readonly rgbaMapUrl: string;
@@ -44,6 +43,7 @@ export class StaticSkin implements BodyTexture {
   private decalPaintPixels: Set<number>;
 
   constructor(body: Body, decal: Decal, paints: PaintConfig, rocketConfig: RocketConfig) {
+    this.loader = new PromiseLoader(new ImageTextureLoader(rocketConfig.textureFormat, rocketConfig.loadingManager));
     this.baseUrl = getAssetUrl(decal.base_texture, rocketConfig);
     this.rgbaMapUrl = getAssetUrl(decal.rgba_map, rocketConfig);
     this.bodyBaseSkinUrl = getAssetUrl(body.base_skin, rocketConfig);

src/3d/topper-model.ts

@@ -5,21 +5,21 @@ import { getAssetUrl } from '../utils/network';
 import { disposeIfExists } from '../utils/util';
 import { Paintable } from './paintable';
 import { PaintConfig } from '../model/paint-config';
-import { PromiseLoader } from '../utils/loader';
-import { TgaRgbaLoader } from '../utils/tga-rgba-loader';
+import { ImageTextureLoader, PromiseLoader } from '../utils/loader';
 import { Layer, LayeredTexture } from './layered-texture';
 import { getChannel, getMaskPixels, ImageChannel } from '../utils/image';
 import { RocketConfig } from '../model/rocket-config';
 
 class TopperSkin {
 
-  private readonly loader: PromiseLoader = new PromiseLoader(new TgaRgbaLoader());
+  private readonly loader: PromiseLoader;
 
   texture: LayeredTexture;
   private paintLayer: Layer;
   private paintPixels: Set<number>;
 
-  constructor(private readonly baseUrl, private readonly rgbaMapUrl, private paint: Color) {
+  constructor(private readonly baseUrl, private readonly rgbaMapUrl, private paint: Color, rocketConfig: RocketConfig) {
+    this.loader = new PromiseLoader(new ImageTextureLoader(rocketConfig.textureFormat, rocketConfig.loadingManager));
   }
 
   async load() {
@@ -65,7 +65,8 @@ export class TopperModel extends AbstractObject implements Paintable {
       this.skin = new TopperSkin(
         getAssetUrl(topper.base_texture, rocketConfig),
         getAssetUrl(topper.rgba_map, rocketConfig),
-        paints.topper
+        paints.topper,
+        rocketConfig
       );
     }
   }

src/3d/wheels-model.ts

@@ -7,21 +7,21 @@ import { disposeIfExists } from '../utils/util';
 import { Paintable } from './paintable';
 import { PaintConfig } from '../model/paint-config';
 import { Layer, LayeredTexture } from './layered-texture';
-import { PromiseLoader } from '../utils/loader';
-import { TgaRgbaLoader } from '../utils/tga-rgba-loader';
+import { ImageTextureLoader, PromiseLoader } from '../utils/loader';
 import { getChannel, getMaskPixels, ImageChannel, invertChannel } from '../utils/image';
 import { BASE_WHEEL_MESH_RADIUS, BASE_WHEEL_MESH_WIDTH } from './constants';
 import { RocketConfig } from '../model/rocket-config';
 
 class RimSkin {
 
-  private readonly loader: PromiseLoader = new PromiseLoader(new TgaRgbaLoader());
+  private readonly loader: PromiseLoader;
 
   texture: LayeredTexture;
   private paintLayer: Layer;
   private paintPixels: Set<number>;
 
-  constructor(private readonly baseUrl, private readonly rgbaMapUrl, private paint: Color) {
+  constructor(private readonly baseUrl, private readonly rgbaMapUrl, private paint: Color, rocketConfig: RocketConfig) {
+    this.loader = new PromiseLoader(new ImageTextureLoader(rocketConfig.textureFormat, rocketConfig.loadingManager));
   }
 
   async load() {
@@ -73,7 +73,8 @@ export class WheelsModel extends AbstractObject implements Paintable {
       this.rimSkin = new RimSkin(
         getAssetUrl(wheel.rim_base, rocketConfig),
         getAssetUrl(wheel.rim_rgb_map, rocketConfig),
-        paints.wheel
+        paints.wheel,
+        rocketConfig
       );
     }
   }