How to use @pixi/core - 10 common examples

// the total number of bytes in our batch
        // let numVerts = this.size * 4 * this.vertByteSize;

        this.buffers = [];
        for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2)
        {
            this.buffers.push(new BatchBuffer(i * 4 * this.vertByteSize));
        }

        /**
         * Holds the indices of the geometry (quads) to draw
         *
         * @member {Uint16Array}
         */
        this.indices = createIndicesForQuads(this.size);
        this.indexBuffer = new Buffer(this.indices, true, true);

        /**
         * The default shaders that is used if a sprite doesn't have a more specific one.
         * there is a shader for each number of textures that can be rendered.
         * These shaders will also be generated on the fly as required.
         * @member {PIXI.Shader[]}
         */
        this.shader = null;

        this.currentIndex = 0;
        this.groups = [];

        for (let k = 0; k < this.size; k++)
        {
            this.groups[k] = { textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0 };
        }

{
            // step 1: first check max textures the GPU can handle.
            this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), settings.SPRITE_MAX_TEXTURES);

            // step 2: check the maximum number of if statements the shader can have too..
            this.MAX_TEXTURES = checkMaxIfStatementsInShader(this.MAX_TEXTURES, gl);
        }

        // generate generateMultiTextureProgram, may be a better move?
        this.shader = generateMultiTextureShader(gl, this.MAX_TEXTURES);

        // we use the second shader as the first one depending on your browser may omit aTextureId
        // as it is not used by the shader so is optimized out.
        for (let i = 0; i < this.vaoMax; i++)
        {
            const buffer = new Buffer(null, false);

            /* eslint-disable max-len */
            this.vaos[i] = new Geometry()
                .addAttribute('aVertexPosition', buffer, 2, false, gl.FLOAT)
                .addAttribute('aTextureCoord', buffer, 2, true, gl.UNSIGNED_SHORT)
                .addAttribute('aColor', buffer, 4, true, gl.UNSIGNED_BYTE)
                .addAttribute('aTextureId', buffer, 1, true, gl.FLOAT)
                .addIndex(this.indexBuffer);
            /* eslint-enable max-len */

            this.vertexBuffers[i] = buffer;
        }
    }

this.dynamicStride = 0;

        for (let i = 0; i < this.dynamicProperties.length; ++i)
        {
            const property = this.dynamicProperties[i];

            property.offset = dynamicOffset;
            dynamicOffset += property.size;
            this.dynamicStride += property.size;
        }

        const dynBuffer = new ArrayBuffer(this.size * this.dynamicStride * 4 * 4);

        this.dynamicData = new Float32Array(dynBuffer);
        this.dynamicDataUint32 = new Uint32Array(dynBuffer);
        this.dynamicBuffer = new Buffer(this.dynamicData, false, false);

        // static //
        let staticOffset = 0;

        this.staticStride = 0;

        for (let i = 0; i < this.staticProperties.length; ++i)
        {
            const property = this.staticProperties[i];

            property.offset = staticOffset;
            staticOffset += property.size;
            this.staticStride += property.size;
        }

        const statBuffer = new ArrayBuffer(this.size * this.staticStride * 4 * 4);

/* eslint-enable max-len */

            index += 20;
        }

        currentGroup.size = i - currentGroup.start;

        if (!settings.CAN_UPLOAD_SAME_BUFFER)
        {
            // this is still needed for IOS performance..
            // it really does not like uploading to the same buffer in a single frame!
            if (this.vaoMax <= this.vertexCount)
            {
                this.vaoMax++;

                const buffer = new Buffer(null, false);

                /* eslint-disable max-len */
                this.vaos[this.vertexCount] = new Geometry()
                    .addAttribute('aVertexPosition', buffer, 2, false, gl.FLOAT)
                    .addAttribute('aTextureCoord', buffer, 2, true, gl.UNSIGNED_SHORT)
                    .addAttribute('aColor', buffer, 4, true, gl.UNSIGNED_BYTE)
                    .addAttribute('aTextureId', buffer, 1, true, gl.FLOAT)
                    .addIndex(this.indexBuffer);
                /* eslint-enable max-len */

                this.vertexBuffers[this.vertexCount] = buffer;
            }

            this.vertexBuffers[this.vertexCount].update(buffer.vertices, 0);
            this.renderer.geometry.bind(this.vaos[this.vertexCount]);

import {Renderer, BatchRenderer} from '@pixi/core';
import {skipHello} from '@pixi/utils';

if (process.env.NODE_ENV === 'production') {
  skipHello();
}
Renderer.registerPlugin('batch', BatchRenderer);

// Extract only the required stuff to reduce the bundle size
export {Application} from '@pixi/app';
export {Container} from '@pixi/display';
export {Graphics} from '@pixi/graphics';
export {Text, TextStyle} from '@pixi/text';
export {Sprite} from '@pixi/sprite';
export {Texture, Filter, defaultFilterVertex} from '@pixi/core';

import '@pixi/mixin-cache-as-bitmap';
import '@pixi/mixin-get-child-by-name';
import '@pixi/mixin-get-global-position';

// Export deprecations so Rollup can call it
// in the footer after global is defined
// other module must call this manually
import { useDeprecated } from './useDeprecated';

// Install renderer plugins
Renderer.registerPlugin('accessibility', accessibility.AccessibilityManager);
Renderer.registerPlugin('extract', extract.Extract);
Renderer.registerPlugin('interaction', interaction.InteractionManager);
Renderer.registerPlugin('particle', ParticleRenderer);
Renderer.registerPlugin('prepare', prepare.Prepare);
Renderer.registerPlugin('batch', BatchRenderer);
Renderer.registerPlugin('tilingSprite', TilingSpriteRenderer);

Loader.registerPlugin(BitmapFontLoader);
Loader.registerPlugin(SpritesheetLoader);

Application.registerPlugin(TickerPlugin);
Application.registerPlugin(AppLoaderPlugin);

/**
 * String of the current PIXI version.
 *
 * @static
 * @constant
 * @memberof PIXI
 * @name VERSION
 * @type {string}

import { FXAAFilter } from '@pixi/filter-fxaa';
import { NoiseFilter } from '@pixi/filter-noise';
import '@pixi/mixin-cache-as-bitmap';
import '@pixi/mixin-get-child-by-name';
import '@pixi/mixin-get-global-position';

// Export deprecations so Rollup can call it
// in the footer after global is defined
// other module must call this manually
import { useDeprecated } from './useDeprecated';

// Install renderer plugins
Renderer.registerPlugin('accessibility', accessibility.AccessibilityManager);
Renderer.registerPlugin('extract', extract.Extract);
Renderer.registerPlugin('interaction', interaction.InteractionManager);
Renderer.registerPlugin('particle', ParticleRenderer);
Renderer.registerPlugin('prepare', prepare.Prepare);
Renderer.registerPlugin('batch', BatchRenderer);
Renderer.registerPlugin('tilingSprite', TilingSpriteRenderer);

Loader.registerPlugin(BitmapFontLoader);
Loader.registerPlugin(SpritesheetLoader);

Application.registerPlugin(TickerPlugin);
Application.registerPlugin(AppLoaderPlugin);

/**
 * String of the current PIXI version.
 *
 * @static
 * @constant
 * @memberof PIXI

import { NoiseFilter } from '@pixi/filter-noise';
import '@pixi/mixin-cache-as-bitmap';
import '@pixi/mixin-get-child-by-name';
import '@pixi/mixin-get-global-position';

// Export deprecations so Rollup can call it
// in the footer after global is defined
// other module must call this manually
import { useDeprecated } from './useDeprecated';

// Install renderer plugins
Renderer.registerPlugin('accessibility', accessibility.AccessibilityManager);
Renderer.registerPlugin('extract', extract.Extract);
Renderer.registerPlugin('interaction', interaction.InteractionManager);
Renderer.registerPlugin('particle', ParticleRenderer);
Renderer.registerPlugin('prepare', prepare.Prepare);
Renderer.registerPlugin('batch', BatchRenderer);
Renderer.registerPlugin('tilingSprite', TilingSpriteRenderer);

Loader.registerPlugin(BitmapFontLoader);
Loader.registerPlugin(SpritesheetLoader);

Application.registerPlugin(TickerPlugin);
Application.registerPlugin(AppLoaderPlugin);

/**
 * String of the current PIXI version.
 *
 * @static
 * @constant
 * @memberof PIXI
 * @name VERSION

import { DisplacementFilter } from '@pixi/filter-displacement';
import { FXAAFilter } from '@pixi/filter-fxaa';
import { NoiseFilter } from '@pixi/filter-noise';
import '@pixi/mixin-cache-as-bitmap';
import '@pixi/mixin-get-child-by-name';
import '@pixi/mixin-get-global-position';

// Export deprecations so Rollup can call it
// in the footer after global is defined
// other module must call this manually
import { useDeprecated } from './useDeprecated';

// Install renderer plugins
Renderer.registerPlugin('accessibility', accessibility.AccessibilityManager);
Renderer.registerPlugin('extract', extract.Extract);
Renderer.registerPlugin('interaction', interaction.InteractionManager);
Renderer.registerPlugin('particle', ParticleRenderer);
Renderer.registerPlugin('prepare', prepare.Prepare);
Renderer.registerPlugin('batch', BatchRenderer);
Renderer.registerPlugin('tilingSprite', TilingSpriteRenderer);

Loader.registerPlugin(BitmapFontLoader);
Loader.registerPlugin(SpritesheetLoader);

Application.registerPlugin(TickerPlugin);
Application.registerPlugin(AppLoaderPlugin);

/**
 * String of the current PIXI version.
 *
 * @static
 * @constant

import { BlurFilter, BlurFilterPass } from '@pixi/filter-blur';
import { ColorMatrixFilter } from '@pixi/filter-color-matrix';
import { DisplacementFilter } from '@pixi/filter-displacement';
import { FXAAFilter } from '@pixi/filter-fxaa';
import { NoiseFilter } from '@pixi/filter-noise';
import '@pixi/mixin-cache-as-bitmap';
import '@pixi/mixin-get-child-by-name';
import '@pixi/mixin-get-global-position';

// Export deprecations so Rollup can call it
// in the footer after global is defined
// other module must call this manually
import { useDeprecated } from './useDeprecated';

// Install renderer plugins
Renderer.registerPlugin('accessibility', accessibility.AccessibilityManager);
Renderer.registerPlugin('extract', extract.Extract);
Renderer.registerPlugin('interaction', interaction.InteractionManager);
Renderer.registerPlugin('particle', ParticleRenderer);
Renderer.registerPlugin('prepare', prepare.Prepare);
Renderer.registerPlugin('batch', BatchRenderer);
Renderer.registerPlugin('tilingSprite', TilingSpriteRenderer);

Loader.registerPlugin(BitmapFontLoader);
Loader.registerPlugin(SpritesheetLoader);

Application.registerPlugin(TickerPlugin);
Application.registerPlugin(AppLoaderPlugin);

/**
 * String of the current PIXI version.
 *