lcultx / wonder.js

3D Html5 Game Engine

Wonder.js

Wonder.js is a 3D Javascript Game Engine. It is currently in alpha, any contributions are very welcome.

Goal

To build a elegant, beautiful 3D game engine with full functions.

Document

• wiki
• Roadmap

Please learn samples in examples/samples/ to get more info.

Design

• Component

  use components to assemble game object.

• Functional Reactive Programming

  use Wonder-FRP library to handle async operation in frp way.

• Code Contract

  use contract to improve code quality and help debug.

• Event Driven

  use event system to bind dom/custom event or to implement observer design pattern in frp way.

• Composable Shader

  use shader libs to assemble glsl code.

Contributing

Join us, We can create the amazing 3D world together!

Feature

• Event System
  • EventTriggerDetector
• UI
  • Ttf Font, Bitmap Font
  • ProgressBar
  • Image
  • Button
• Picking
  • RayCast Picking
• Collider
  • BoxCollider,SphereCollider,AABBShape,SphereShape
• Physics
  • RigidBody,Collision,Constraint,Compound
• Animation
  • Morph
• Camera
  • Perspective,Orthographic Camera
  • Arcball Control
  • Fly Control
• Light
  • Direction,Point Light
  • Diffuse Map
  • Specular Map
  • Normal Map
  • Mirror
  • Reflection,Refraction,Fresnel
• Script
  • User Script
  • Event Script
• Shader
  • Custom Shader
• Shadow
  • Direction,Point Light ShadowMap
• Skybox
• Texture
  • Canvas Texture
  • Video Texture
  • Compressed Texture(DDS)
  • Cubemap Texture
• Converter
  • OBJ Converter
  • MD2 Converter

Usage

Include library in your html:

<script src="dist/wd.min.js"></script>

Here shows a spinning cube sample:

<script>
    window.onload = function () {
        //set full screen and init engine
        wd.Main.setConfig({
            screenSize: wd.ScreenSize.FULL
        }).init();

        initSample();

        function initSample() {
            var director = wd.Director.getInstance();

            director.scene.addChild(createBox());
            director.scene.addChild(createCamera());

            director.start();
        }

        function createBox() {
            var material = wd.BasicMaterial.create();
            material.color = wd.Color.create("rgb(1.0,0.0,1.0)");

            var geometry = wd.BoxGeometry.create();
            geometry.material = material;
            geometry.width = 5;
            geometry.height = 5;
            geometry.depth = 5;

            var gameObject = wd.GameObject.create();
            gameObject.addComponent(geometry);
            gameObject.addComponent(wd.MeshRenderer.create());

            var action = wd.RepeatForever.create(wd.CallFunc.create(function () {
                gameObject.transform.rotate(0, 1, 0);
            }));

            gameObject.addComponent(action);

            return gameObject;
        }

        function createCamera() {
            var camera = wd.GameObject.create(),
                view = wd.Director.getInstance().view,
                cameraComponent = wd.PerspectiveCamera.create();

            cameraComponent.fovy = 60;
            cameraComponent.aspect = view.width / view.height;
            cameraComponent.near = 0.1;
            cameraComponent.far = 100;

            var controller = wd.BasicCameraController.create(cameraComponent);
            camera.addComponent(controller);

            camera.transform.translate(wd.Vector3.create(0, 0, 30));

            return camera;
        }
    };
</script>

How to build

• bower

  You can install engine under bower:

bower install wonder

• setup engine

  If you want to pull request(that’s very appreciate), you can setup engine firstly under these commands:

//run these commands in project dir
npm install
git submodule init
git submodule update --remote
gulp build

How to test

• unit test

  Wonder.js has complete unit test, you can clone this project and run karma under gulp task:

//you should first setup engine

//then run test gulp task in project dir
gulp test

• debug

  You can first include wd.innerLib.js file, then include wd.debug.js file in your html, then you can debug in engine ts file:

<script src="dist/wd.innerLib.js"></script>
<script src="dist/wd.debug.js"></script>

License

MIT Licence