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
Getting Help
Support Environment
PC
-
Chrome
-
Firefox
-
360 browser(v10.0)
-
qq browser(v10.4)
Usage
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
License
MIT Licence
Donate
You are welcome to donate for Wonder.js project! Thanks very much!
Donors
日期 | 头像 | 金额(元) |
---|---|---|
2020.02.13 | 999 | |
2020.03.04 | 2000 | |
2020.04.29 | 1000 | |
2020.04.29 | 999 |