Skip to content

2D Skeletal Animation WebGL Runtimes for Creature ( PixiJS, PhaserJS, ThreeJS, BabylonJS, Cocos Creator )

License

Notifications You must be signed in to change notification settings

kestrelm/Creature_WebGL

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Creature WebGL Game Engine Runtimes

This repository contains the Creature Runtimes for Javascript and WebAssembly based Game Engine Frameworks.

The following frameworks are supported:

  • PixiJS

  • Phaser ( Both CE and 3 )

  • ThreeJS

  • BabylonJS

  • CocosCreator + Wechat Game Engine

For more information on how to use the runtimes, please head over to this site

The Ice Demon character sample Artwork is by: Katarzyna Zalecka [http://kasia88.deviantart.com], Attribution-ShareAlike 3.0 Unported

Download the samples and more here.

Alt text Live Babylon JS Demo is here.

Live Raptor Mark Demo

Raptor Mark is a demonstration of what the Creature WebGL plugin is capable of.

Alt text

Regular JS Demo

This demo shows 30 fully mesh deforming raptor characters running across the screen. This demo is using the CreaturePack Web format to deliver results that have high performance, great quality and yet compact in delivery size.

UtahRaptor Artwork: Emily Willoughby (http://emilywilloughby.com)

View the Live demo here .

WebAssembly Demo

Unleash the power of high performance Web Assembly with the new CreaturePack WebAssembly runtimes!

Alt text The above demo uses advanced Delta Compression in CreaturePack to deliver high performance + quality animation with extreme compression ratios! This Raptor animation is only 230KB in size!

View the Live CreaturePack BabylonJS WebAssembly demo here

This second demo shows 200 (Not a Typo!!) mesh deforming raptor dinosaurs running across the screen! The demo is using the CreaturePack Web format similar to the JS version to deliver results that have high performance, great quality and yet compact in delivery size. However, with the new Web Assembly backend, the playback is even faster, capable of handling huge numbers of characters running live on your web browser. Even on moderately equipped PCs, this demo runs at a fluid 60 FPS. Make sure your browser has been updated to the latest version to take advantage of this exciting runtime.

View the Live CreaturePack WebAsseambly demo here :)

Read the writeup on the WebAssembly runtime here

Share your animations easily with the CreaturePack WebAssembly Widget

Alt text

The CreaturePack WebAssembly Widget allows you to easily share your exported Creature animations on your own personal webpage! The rendering core uses the powerful BabylonJS 3D WebGL Engine. This allows for beautiful rendering effects, including high quality soft-shadows and real-time 3D lighting. Head over to the WebAssembly folder for more info here.

License

The Creature Runtimes operate under 2 License types depending on whether you own a Licensed copy of Creature or not.

  • People who own a licensed copy of Creature: You use the standard Creature License included with the runtime code. TLDR: You are free to publish/modify/sell your product with the Creature runtimes without needing to state you are using the runtimes/put the copyright notice in your code/app. If you already have been using the Creature runtimes as a licensed owner of Creature, nothing changes :)

  • Everyone else: The runtimes are released under the very permissive Apache License :)

Both Licenses allow for private use and do not require any disclosure of your source code.

FAQ

My character mesh in BabylonJS flickers/disappears

This is a BabylyJS renderer issue and has to do with the bounding box of the character. You can try setting mesh.alwaysSelectAsActiveMesh = true. Or refresh the mesh data and bounding box each frame. Please read the thread here