PIXIBasicScene.js

'use strict';

import React from 'react';

import { GLView } from 'exponent';


export default class BasicScene extends React.Component {
  static meta = {
    description: 'PIXI Basic Scene',
  };

  render() {
    return (
      <GLView
        style={this.props.style}
        onContextCreate={this._onContextCreate}
      />
    );
  }

  _onContextCreate = (gl) => {
    gl.enableLogging = true;

    window.addEventListener = () => {},
    navigator.userAgent = 'Exponent';
    global.document = {
      createElement: () => ({
        style: {},
        getContext: () => ({
          drawImage: () => {},
          fillRect: () => {},
          getImageData: () => null,
        }),
      }),
      addEventListener: () => {},
    };
    const PIXI = require('pixi.js/src/index');

    const width = gl.drawingBufferWidth;
    const height = gl.drawingBufferWidth;
    const renderer = new PIXI.WebGLRenderer(width, height, {
      view: {
        width, height,
        addEventListener: () => {},
        removeEventListener: () => {},
        getContext: () => gl,
      },
      context: gl,
    });

    const animate = () => {
      requestAnimationFrame(animate);

      gl.clearColor(1, 0, 0, 1);
      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
      gl.flush();
      gl.endFrameEXP();

      gl.enableLogging = false;
    };
    animate();
  }
}