357172213

Build Type

github

Committed by GitHub

Commit Message

<a href="https://github.com/creativelifeform/three-nebula/commit/<a class=hub.com/creativelifeform/three-nebula/commit/7c936b126817ed4fae481f890dcb649cdf8b1ea8">7c936b126<a href="https://github.com/creativelifeform/three-nebula/commit/7c936b126817ed4fae481f890dcb649cdf8b1ea8">">Merge </a><a class="double-link" href="https://github.com/creativelifeform/three-nebula/commit/<a class="double-link" href="https://github.com/creativelifeform/three-nebula/commit/cded199725ce317c16f31e27d65fc88de067b49c">cded19972</a>">cded19972</a><a href="https://github.com/creativelifeform/three-nebula/commit/7c936b126817ed4fae481f890dcb649cdf8b1ea8"> into b53ff251e">b53ff251e</a>

Pull Request Pull Request #125: Feature/gpu renderer multiple textures

Run Details

481 of 1066 branches covered (45.12%)

Branch coverage included in aggregate %.

117 of 117 new or added lines in 10 files covered. (100.0%)

4489 of 6099 relevant lines covered (73.6%)

59.03 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

3.57

/src/renderer/GPURenderer/TextureAtlas/index.js

import { DATA_TEXTURE_SIZE } from './constants';
import { __DEV__ } from '../../../constants';
import potpack from 'potpack';

/**
 * Dynamic texture atlas for performant support of systems with multiple emitters and textures.
 *
 */
export default class TextureAtlas {
  constructor(renderer, debug) {
    const { three: THREE } = renderer;
    const data = (this.indexData = new Float32Array(DATA_TEXTURE_SIZE * 4));
    const ctx = (this.ctx = document.createElement('canvas').getContext('2d'));
    const { canvas } = ctx;

    this.canvas = canvas;
    this.entries = [];
    this.atlasIndex = new THREE.DataTexture(
      data,
      DATA_TEXTURE_SIZE,
      1,
      THREE.RGBAFormat,
      THREE.FloatType
    );

    canvas.width = canvas.height = DATA_TEXTURE_SIZE;

    if (debug) {
      this.debug(canvas, ctx);
    }

    this.atlasTexture = new THREE.CanvasTexture(canvas);
    this.atlasTexture.flipY = false;

    renderer.material.uniforms.uTexture.value = this.atlasTexture;
    renderer.material.uniforms.atlasIndex.value = this.atlasIndex;
    renderer.material.uniformsNeedUpdate = true;
  }

  /**
   * Logs to the console when in dev mode.
   *
   */
  log(...args) {
    if (!__DEV__) {
      return;
    }

    console.log(...args);
  }

  /**
   * Debugs the texture atlas by rendering it to a canvas in the DOM.
   *
   */
  debug() {
    const { canvas, ctx } = this;
    const halfmax = canvas.width;

    ctx.fillStyle = 'purple';
    ctx.fillRect(0, 0, halfmax, halfmax);
    ctx.fillStyle = 'green';
    ctx.fillRect(0, halfmax, halfmax, halfmax);
    ctx.fillStyle = 'blue';
    ctx.fillRect(halfmax, 0, halfmax, halfmax);
    ctx.fillStyle = 'orange';
    ctx.fillRect(halfmax, halfmax, halfmax, halfmax);
    ctx.fillStyle = 'yellow';
    ctx.font = canvas.width + 'px Verdana';
    ctx.fillText('top row', 100, 500);
    ctx.fillStyle = 'pink';
    ctx.fillText('bottom row', 100, 1500);

    canvas.style.position = 'absolute';
    canvas.style.width = canvas.style.height = '300px';
    canvas.style.left = canvas.style.top = '0px';
    canvas.style.zIndex = 100;

    document.body.appendChild(canvas);
  }

  /**
   * Adds a texture to the texture atlas and flags that the atlas needs to be updated.
   *
   */
  addTexture(texture) {
    this.log('Adding texture to atlas:', texture.uuid);

    texture.textureIndex = this.entries.length;
    this.entries.push({ texture: texture });
    this.needsUpdate = true;
  }

  /**
   * Updates the texture atlas. Will only rebuild the atlas if all images are loaded.
   *
   */
  update() {
    if (!this.needsUpdate) {
      return;
    }

    const { entries, canvas, indexData, ctx, atlasIndex, atlasTexture } = this;

    for (let i = 0; i < entries.length; i++) {
      if (!entries[i].texture.image) {
        return;
      }
    }

    this.needsUpdate = false;

    for (let i = 0; i < entries.length; i++) {
      const e = entries[i];
      const { texture } = e;
      const { width, height } = texture.image;

      e.w = width;
      e.h = height;
    }

    const stats = potpack(entries);

    this.log('Rebuilt atlas:', stats);

    if (canvas.width != stats.w || canvas.height != stats.h) {
      canvas.width = stats.w;
      canvas.height = stats.h;
    }

    for (let i = 0, ii = 0; i < entries.length; i++, ii += 4) {
      const e = this.entries[i];

      indexData[ii + 0] = e.x / canvas.width;
      indexData[ii + 1] = e.y / canvas.height;
      indexData[ii + 2] = (e.x + e.w) / canvas.width;
      indexData[ii + 3] = (e.y + e.h) / canvas.height;

      ctx.drawImage(e.texture.image, e.x, e.y, e.w, e.h);
    }

    atlasIndex.needsUpdate = true;
    atlasTexture.needsUpdate = true;
  }
}

1	import { DATA_TEXTURE_SIZE } from './constants';	1✔
2	import { __DEV__ } from '../../../constants';	1✔
3	import potpack from 'potpack';	1✔
4
5	/**
6	* Dynamic texture atlas for performant support of systems with multiple emitters and textures.
7	*
8	*/
9	export default class TextureAtlas {
10	constructor(renderer, debug) {
11	const { three: THREE } = renderer;	×
12	const data = (this.indexData = new Float32Array(DATA_TEXTURE_SIZE * 4));	×
13	const ctx = (this.ctx = document.createElement('canvas').getContext('2d'));	×
14	const { canvas } = ctx;	×
15
16	this.canvas = canvas;	×
17	this.entries = [];	×
18	this.atlasIndex = new THREE.DataTexture(	×
19	data,
20	DATA_TEXTURE_SIZE,
21	1,
22	THREE.RGBAFormat,
23	THREE.FloatType
24	);
25
26	canvas.width = canvas.height = DATA_TEXTURE_SIZE;	×
27
28	if (debug) {	×
29	this.debug(canvas, ctx);	×
30	}
31
32	this.atlasTexture = new THREE.CanvasTexture(canvas);	×
33	this.atlasTexture.flipY = false;	×
34
35	renderer.material.uniforms.uTexture.value = this.atlasTexture;	×
36	renderer.material.uniforms.atlasIndex.value = this.atlasIndex;	×
37	renderer.material.uniformsNeedUpdate = true;	×
38	}
39
40	/**
41	* Logs to the console when in dev mode.
42	*
43	*/
44	log(...args) {
45	if (!__DEV__) {	×
46	return;	×
47	}
48
49	console.log(...args);	×
50	}
51
52	/**
53	* Debugs the texture atlas by rendering it to a canvas in the DOM.
54	*
55	*/
56	debug() {
57	const { canvas, ctx } = this;	×
58	const halfmax = canvas.width;	×
59
60	ctx.fillStyle = 'purple';	×
61	ctx.fillRect(0, 0, halfmax, halfmax);	×
62	ctx.fillStyle = 'green';	×
63	ctx.fillRect(0, halfmax, halfmax, halfmax);	×
64	ctx.fillStyle = 'blue';	×
65	ctx.fillRect(halfmax, 0, halfmax, halfmax);	×
66	ctx.fillStyle = 'orange';	×
67	ctx.fillRect(halfmax, halfmax, halfmax, halfmax);	×
68	ctx.fillStyle = 'yellow';	×
69	ctx.font = canvas.width + 'px Verdana';	×
70	ctx.fillText('top row', 100, 500);	×
71	ctx.fillStyle = 'pink';	×
72	ctx.fillText('bottom row', 100, 1500);	×
73
74	canvas.style.position = 'absolute';	×
75	canvas.style.width = canvas.style.height = '300px';	×
76	canvas.style.left = canvas.style.top = '0px';	×
77	canvas.style.zIndex = 100;	×
78
79	document.body.appendChild(canvas);	×
80	}
81
82	/**
83	* Adds a texture to the texture atlas and flags that the atlas needs to be updated.
84	*
85	*/
86	addTexture(texture) {
87	this.log('Adding texture to atlas:', texture.uuid);	×
88
89	texture.textureIndex = this.entries.length;	×
90	this.entries.push({ texture: texture });	×
91	this.needsUpdate = true;	×
92	}
93
94	/**
95	* Updates the texture atlas. Will only rebuild the atlas if all images are loaded.
96	*
97	*/
98	update() {
99	if (!this.needsUpdate) {	×
100	return;	×
101	}
102
103	const { entries, canvas, indexData, ctx, atlasIndex, atlasTexture } = this;	×
104
105	for (let i = 0; i < entries.length; i++) {	×
106	if (!entries[i].texture.image) {	×
107	return;	×
108	}
109	}
110
111	this.needsUpdate = false;	×
112
113	for (let i = 0; i < entries.length; i++) {	×
114	const e = entries[i];	×
115	const { texture } = e;	×
116	const { width, height } = texture.image;	×
117
118	e.w = width;	×
119	e.h = height;	×
120	}
121
122	const stats = potpack(entries);	×
123
124	this.log('Rebuilt atlas:', stats);	×
125
126	if (canvas.width != stats.w \|\| canvas.height != stats.h) {	×
127	canvas.width = stats.w;	×
128	canvas.height = stats.h;	×
129	}
130
131	for (let i = 0, ii = 0; i < entries.length; i++, ii += 4) {	×
132	const e = this.entries[i];	×
133
134	indexData[ii + 0] = e.x / canvas.width;	×
135	indexData[ii + 1] = e.y / canvas.height;	×
136	indexData[ii + 2] = (e.x + e.w) / canvas.width;	×
137	indexData[ii + 3] = (e.y + e.h) / canvas.height;	×
138
139	ctx.drawImage(e.texture.image, e.x, e.y, e.w, e.h);	×
140	}
141
142	atlasIndex.needsUpdate = true;	×
143	atlasTexture.needsUpdate = true;	×
144	}
145	}

creativelifeform / three-nebula / 357172213

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous