https://github.com/effekseer/effekseerforwebgl

https://github.com/effekseer/effekseerforwebgl

Last synced: 9 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/effekseer/effekseerforwebgl
• Owner: effekseer
• License: mit
• Created: 2017-05-19T23:56:42.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-03-06T10:51:47.000Z (8 months ago)
• Last Synced: 2024-10-08T09:53:48.354Z (about 1 month ago)
• Language: Python
• Size: 16.3 MB
• Stars: 115
• Watchers: 10
• Forks: 16
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGES
  • License: LICENSE

Awesome Lists containing this project

README

        
# EffekseerForWebGL

- [Official website](http://effekseer.github.io)

- [Effekseer main repository](https://github.com/effekseer/Effekseer)

- [Changes](CHANGES)

# Demo

- [Demo](https://effekseer.github.io/EffekseerForWebGL/Sample/index.html)

# Download

- [1.70e](https://github.com/effekseer/EffekseerForWebGL/releases/download/170e/EffekseerForWebGL170e.zip)

- [1.62e](https://github.com/effekseer/EffekseerForWebGL/releases/download/162e/EffekseerForWebGL162e.zip)

- [1.53c](https://github.com/effekseer/EffekseerForWebGL/releases/download/153c/EffekseerForWebGL153c.zip)

# How to use

WASM version

```html

```

or

asm.js version

```html

```

## JavaScript

### 1.7

```js

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](docs/HowToUse.md)

- [How to build](docs/HowToBuild.md)