EffekseerForWebGL

• Official website
• Effekseer main repository
• Changes

Demo

• Demo

Download

• 1.70e

• 1.62e

• 1.53c

How to use

WASM version

<canvas id="canvas" width="640" height="480"></canvas>
<script src="three.min.js"></script>
<script src="effekseer.min.js"></script>

or

asm.js version

<canvas id="canvas" width="640" height="480"></canvas>
<script src="three.min.js"></script>
<script src="effekseer_asmjs.js"></script>

JavaScript

1.7

function main()
{
  // Setup WebGLRenderer
  var canvas = document.getElementById("canvas");

  // There is a bug in the old three.js resetState. It is recommended to use a newer version.
  var renderer = new THREE.WebGLRenderer({ canvas: canvas });
  renderer.setSize(canvas.width, canvas.height);
  var clock = new THREE.Clock();
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(30.0, canvas.width / canvas.height, 1, 1000);
  camera.position.set(20, 20, 20);
  camera.lookAt(new THREE.Vector3(0, 0, 0));

  // Create a context
  context = effekseer.createContext();

  // Initialize by WebGLRenderingContext
  context.init(renderer.getContext());

  // fast rendering by skipping state fetching.
  // If there is a problem with the drawing, please set this flag to false.
  var fastRenderMode = true;

  if (fastRenderMode) {
    context.setRestorationOfStatesFlag(false);
  }

  // Load effect data
  var effect = context.loadEffect("Laser01.efkefc", 1.0, function(){
    // Play the loaded effect
    var handle = context.play(effect);
    // Change a position
    handle.setLocation(0,0,0);
  });

  (function renderLoop() {
    requestAnimationFrame( renderLoop );

    // Effekseer Update
    context.update(clock.getDelta() * 60.0);

    // Three.js Rendering
    renderer.render(scene, camera);

    // Rendering Settings
    context.setProjectionMatrix(camera.projectionMatrix.elements);
    context.setCameraMatrix(camera.matrixWorldInverse.elements);

    // Effekseer Rendering
    context.draw();

    // Effekseer makes states dirtied. So reset three.js states
    if (fastRenderMode) {
      renderer.resetState();
    }
  })();
}

useWASM = true;

if(useWASM) {
  // if you use wasm version
  effekseer.initRuntime('effekseer.wasm', () => {
    main();
  });
} else {
  // if you use asmjs version
  main();
}

For more information

• How to use

• How to build

CI build (emsdk 1.38.11)

This matches the GitHub Actions workflow in .github/workflows/emsdk-1.38.11.yml.

git submodule update --init --depth 1
git clone https://github.com/emscripten-core/emsdk.git -b 3.1.19 --depth 1
./emsdk/emsdk install sdk-fastcomp-tag-1.38.11-64bit
bash scripts/build_emsdk_1_38_11.sh

CI build (emsdk 2.0.19)

This matches the GitHub Actions workflow in .github/workflows/emsdk-2.0.19.yml.

git submodule update --init --depth 1
git clone --depth 1 https://github.com/emscripten-core/emsdk.git
./emsdk/emsdk install sdk-2.0.19-64bit
bash scripts/build_emsdk_2_0_19.sh