wonder.js

v1.2.0-alpha.26

Published

2 years ago

3d webgl engine

Downloads

297

0High
0Medium
0Low

yang82138

wonder webgl functional-programming high-performance 3d engine reasonml reason bucklescript

Wonder.js

Wonder.js is a Functional, High performance 3D WebGL Engine.

Showcases

Design

Functional Programming
Functional Reactive Programming
Microservice
Job Pipeline
Multi-Thread
Data Oriented Design
Data Driven
ECS

Feature

GameObject And Component
Multi-thread Render
Texture
Direction,Point Light
Model and Scene
Stream Load
IMGUI
Event
Instance

Document

Document

Getting Help

Support Environment

PC

Chrome
Firefox
360 browser(v10.0)
qq browser(v10.4)

Usage

Online Editor

Here show a cube example(more is in examples/ folder):

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>cube</title>
</head>

<body>
    <script src="https://wonder-technology.github.io/wonder-demo.github.io/examples/wd.js"></script>

    <script>
        window.onload = function () {
            return wd.loadConfig(["https://wonder-technology.github.io/wonder-demo.github.io/examples/config/setting.json", "https://wonder-technology.github.io/wonder-demo.github.io/examples/config/"]).forEach(function (state) {
                return initSample(wd.unsafeGetState());
            })

            function _createBox(state) {
                var [state, material] = wd.createLightMaterial(state);

                var state = wd.setLightMaterialDiffuseColor(material, [0.0, 0.5, 0.2], state);
                var state = wd.setLightMaterialSpecularColor(material, [0.3, 0.1, 0.6], state);

                var [state, meshRenderer] = wd.createMeshRenderer(state);

                var [state, gameObject] = wd.createGameObject(state);

                var state = wd.addGameObjectLightMaterialComponent(gameObject, material, state);
                var state = wd.addGameObjectMeshRendererComponent(gameObject, meshRenderer, state);


                var [state, geometry] = wd.createBoxGeometry(state);


                var state = wd.addGameObjectGeometryComponent(gameObject, geometry, state);

                return [state, gameObject];
            };

            function _createCamera(state) {
                var [state, basicCameraView] = wd.createBasicCameraView(state);


                var state =
                    wd.activeBasicCameraView(
                        basicCameraView, state
                    );


                var [state, perspectiveCameraProjection] = wd.createPerspectiveCameraProjection(state);


                var state = wd.setPerspectiveCameraProjectionNear(perspectiveCameraProjection, 0.1, state);
                var state = wd.setPerspectiveCameraProjectionFar(perspectiveCameraProjection, 2000, state);
                var state = wd.setPerspectiveCameraProjectionFovy(perspectiveCameraProjection, 60, state);


                var [state, gameObject] = wd.createGameObject(state);

                var state = wd.addGameObjectBasicCameraViewComponent(gameObject, basicCameraView, state);


                var state = wd.addGameObjectPerspectiveCameraProjectionComponent(gameObject, perspectiveCameraProjection, state);

                var transform = wd.unsafeGetGameObjectTransformComponent(gameObject, state);

                var state = wd.setTransformLocalPosition(transform, [0, 10, 50], state);

                return [state, gameObject];
            };


            function _createDirectionLight(state) {
                var [state, light] = wd.createDirectionLight(state);

                var state = wd.setDirectionLightColor(light, [1.0, 0.0, 0.0], state);


                var [state, gameObject] = wd.createGameObject(state);


                var transform = wd.unsafeGetGameObjectTransformComponent(gameObject, state);

                var state = wd.setTransformLocalEulerAngles(transform, [0, 180, 0], state);


                var state = wd.addGameObjectDirectionLightComponent(gameObject, light, state);

                return [state, gameObject];
            };

            function initSample(state) {
                var [state, box] = _createBox(state);


                var state = wd.setAmbientLightColor([0.2, 0.2, 0.2], state);


                var [state, directionLightGameObject] = _createDirectionLight(state);


                var [state, cameraGameObject] = _createCamera(state);


                wd.startDirector(state);
            }
        };
    </script>
</body>
</html>

How to build

sudo yarn install //execute in project root dir

for Chinese users

npm install -g cyarn --registry=https://registry.npm.taobao.org

npm config set puppeteer_download_host=https://npm.taobao.org/mirrors

cyarn install //execute in project root dir