update homepage

.gitignore

@@ -2,8 +2,7 @@
 .vscode
 node_modules/
 package-lock.json
-website/homepage
-website/playground
+website/homepage-dist
 dist
 demo/9*
 demo/assets

devtools/website.js

@@ -0,0 +1,189 @@
+const path = require('path');
+const fs = require('fs-extra');
+const pug = require('pug');
+const less = require('less');
+const yaml = require('yaml-js');
+const marked = require('marked');
+
+const sourceDir = path.join(__dirname, '../website/homepage-src/');
+const docDir = path.join(__dirname, '../doc/');
+const destDir = path.join(__dirname, '../website/homepage-dist/');
+const destDirCn = path.join(destDir, 'cn/');
+
+new Promise((resolve) => {
+
+    // homepage
+
+    const templates = {
+        index: pug.compile(
+            fs.readFileSync(sourceDir + 'template/index.pug', 'utf-8'),
+            {
+                filename: sourceDir + 'template/index.pug',
+                pretty: true
+            }
+        ),
+        doc: pug.compile(
+            fs.readFileSync(sourceDir + 'template/doc.pug'),
+            {
+                filename: sourceDir + 'template/doc.pug',
+                pretty: true
+            }
+        )
+    }
+
+    const siteInfo = yaml.load(fs.readFileSync(sourceDir + 'site.yaml'));
+    const siteInfoCn = yaml.load(fs.readFileSync(sourceDir + 'site.zh.yaml'));
+
+    fs.outputFileSync(destDir + 'index.html', templates.index({ root: './', langcn: false, ...siteInfo }));
+    fs.outputFileSync(destDirCn + 'index.html', templates.index({ root: './', langcn: true, ...siteInfoCn }));
+
+    const docs = yaml.load(fs.readFileSync(sourceDir + 'doc.yaml')).docs;
+    const docsPatchCn = yaml.load(fs.readFileSync(sourceDir + 'doc.patch.cn.yaml')).docs;
+
+    function deal(root, k, scope) {
+
+        const target = root[k];
+
+        if (typeof target === 'string') {
+
+            const content = fs.readFileSync(`${docDir}/${scope}/${k}.md`, 'utf-8');
+            const contentcn = fs.existsSync(`${docDir}/${scope}/${k}.cn.md`) ?
+                fs.readFileSync(`${docDir}/${scope}/${k}.cn.md`, 'utf-8') : content;
+
+            console.log(docDir, scope, k);
+
+            if (content) {
+
+                let html = templates.doc(
+                    {
+                        index: docs[scope],
+                        indexcn: docsPatchCn[scope],
+                        content: marked(content),
+                        root: '../',
+                        langcn: false,
+                        ...siteInfo
+                    }
+                );
+
+                let htmlcn = templates.doc(
+                    {
+                        index: docs[scope],
+                        indexcn: docsPatchCn[scope],
+                        content: marked(contentcn),
+                        root: '../',
+                        langcn: true,
+                        ...siteInfoCn
+                    }
+                );
+
+                fs.outputFileSync(`${destDir}/${scope}/${k.split(' ').join('-')}.html`, html);
+                fs.outputFileSync(`${destDirCn}/${scope}/${k.split(' ').join('-')}.html`, htmlcn);
+
+            } else {
+                throw new Error('Read source file failed.');
+            }
+        } else {
+
+            for (let tk in target) {
+                deal(target, tk, scope);
+            }
+        }
+    }
+
+    deal(docs, 'api', 'api');
+    deal(docs, 'guide', 'guide');
+
+    resolve();
+
+}).then(() => {
+
+    // style
+
+    return new Promise((resolve) => {
+
+        const lessStr = fs.readFileSync(sourceDir + '/style/index.less', 'utf-8');
+
+        less.render(
+            lessStr,
+            { filename: sourceDir + '/style/index.less' },
+            (err, output) => {
+
+                fs.outputFileSync(destDir + 'index.css', output.css);
+                fs.outputFileSync(destDirCn + 'index.css', output.css);
+
+                resolve();
+            }
+        )
+
+    });
+
+}).then(() => {
+
+    // assets
+
+    return new Promise(resolve => {
+
+        fs.copySync(sourceDir + 'assets', destDir + 'assets', { overwrite: true });
+        fs.copySync(sourceDir + 'assets', destDirCn + 'assets', { overwrite: true });
+
+        resolve();
+
+    })
+
+
+});
+
+
+
+
+
+
+// fs.writeFileSync('./website/homepage/index.html', templates.index(option));
+
+// const doc = yaml.load(fs.readFileSync('./website/homepage-src/doc.yaml')).doc;
+
+// Object.keys(doc).forEach(scope => {
+
+//     function deal(docs, k) {
+//         if (typeof docs === 'string') {
+//             const content = fs.readFileSync(`./doc/${scope}/${k}.md`, 'utf-8');
+
+//             if (content) {
+
+//                 let html = templates.doc(
+//                     {
+//                         index: doc[scope],
+//                         content: marked(content),
+//                         root: '../'
+//                     }
+//                 );
+//                 fs.outputFileSync(`./website/homepage/${scope.split('-').join('/')}/${k}.html`, html);
+//             } else {
+//                 throw new Error('Read source file failed, please run gulp fetch first.');
+//             }
+//         } else {
+//             for (let key in docs) {
+//                 deal(docs[key], key, docs);
+//             }
+//         }
+//     }
+
+//     deal(doc[scope]);
+// });
+
+// return gulp.src('./website/homepage/*/*.html')
+//     .pipe(highlight())
+//     .pipe(gulp.dest('./website/homepage/'));
+
+
+// function lessTask() {
+//     return gulp.src('./website/homepage-src/style/index.less')
+//         .pipe(less())
+//         .pipe(gulp.dest('./website/homepage'));
+// }
+
+
+// function assets() {
+//     return gulp.src('./website/homepage-src/assets/**')
+//         .pipe(gulp.dest('./website/homepage/assets/'));
+// }

doc/guide/First Steps.cn.md

@@ -0,0 +1,106 @@
+# 万事开头难
+
+G3D 是一款基于 WebGL 实现的 JavaScript 3D 渲染引擎。G3D 不依赖 DOM API，仅依赖一个 canvas (或类 canvas) 对象。因此，G3D 即可以运行在浏览器环境，也可以借助 [GCanvas](https://alibaba.github.io/GCanvas/) 运行在一些 hybrid 环境如 ReactNative 或 Weex 中。
+
+## Playground
+
+The quickest way to try G3D is through the [Playground](https://alibaba.github.io/G3D/playground/). Simply create a 3D scene, create a camera, create lights and meshes as you will. You may create your own scene, or edit an existing one (in Storage -> Sample Examples menu).
+
+In this series of guide, playground will appear as parts of the page. Just as the following:
+
+<iframe class="playground" src="https://alibaba.github.io/G3D/playground/?embed"></iframe>
+
+You can edit the code, and the scene rendered on the up-left corner will react quickly. If your code leads to error, the error message will be printed on the left-bottom block.
+
+The playground code must be a function named `run`, which returns the `render` function. The `run` function will be called once and the `render` function will be called frequently (about 16ms once).
+
+```javascript
+function run(G3D, canvas){
+
+    // initialize code
+
+    return function () {
+
+        // animation code
+
+        scene.render();
+    }
+}
+```
+
+## Usage
+
+G3D library is published on [NPM](https://www.npmjs.com/package/g3d). You need to install G3D first.
+
+```dash
+npm install g3d
+```
+
+And involve G3D in your own building progress(using Webpack, eg).
+
+```javascript
+import G3D from 'g3d';
+```
+
+If you want to load G3D through a `&lt;script&gt;` tag (thought we don't recommed you to do so), you can find a UMD file at `dist/g3d.min.js` inside package. You need to put it on your server and load it using a `&lt;script&gt;` tag.
+
+```html
+<script src="g3d.min.jd"></script>
+
+<script>
+    console.log(window.G3D);
+</script>
+```
+
+## Basics
+
+To create and render a 3D scene, you need to follow the progress:
+
+1. Create an [engine](../docs/Engine), specify the canvas (a `CanvasHTMLElement` in web environment or a canvas-like object in hybrid environment).
+2. Create a [scene](../docs/Scene), specify the engine you just created.
+3. Create a [camera](../docs/Camera). In most situations, we need to create a [perspective camera](../docs/PerspectiveCamera), and here we create a [arc rotate camera](../docs/ArcRotateCamera) which extends from perspective camera.
+4. Create some [lights](../docs/light). There're several types of light, here wo create a [directional light](../docs/DirectionalLight) and a [hemisphere light](../docs/HemisphereLight).
+5. Create some [meshes](../docs/mesh). Here, we use [MeshBuilder](../docs/MeshBuilder) and create a cube mesh, and specify some [Material](../docs/StandardMaterial) options.
+6. Tell scene to render.
+
+```javascript
+function run(G3D, canvas){
+
+    // create 3d engine
+    const engine = new G3D.Engine(canvas);
+
+    // create a scene
+    const scene = new G3D.Scene(engine);
+
+    // create camera
+    const camera = new G3D.RotatePerspectiveCamera(scene);
+    camera.alpha = 45;
+    camera.beta = 30;
+    camera.radius = 12;
+    camera.fov = 60;
+
+    // create 3 lights
+    const light1 = new G3D.DirectionalLight(scene);
+    light1.direction.x = -1;
+    light1.direction.y = 0;
+    light1.direction.z = 1;
+
+    const light2 = new G3D.HemisphereLight(scene);
+
+    // create mesh
+    const mesh = G3D.MeshBuilder.createCube(scene, 6);
+
+    Object.assign(mesh.materials.default.diffuseColor, {r: 200, g: 100, b: 100});
+    Object.assign(mesh.materials.default.specularColor, {r: 200, g: 100, b: 100});
+    mesh.materials.default.glossiness = 10;
+
+    return function () {
+        mesh.rotation.y +=1;
+        scene.render();
+    }
+}
+```
+
+Try to change some values and see what happened.
+
+[Next Chapter](./Positions and Rotations).

package.json

@@ -8,16 +8,22 @@
     "url": "https://github.com/alibaba/G3D"
   },
   "devDependencies": {
+    "dalaran": "^0.1.18",
     "expect": "^23.6.0",
+    "fs-extra": "^7.0.0",
     "glob": "^7.1.3",
     "handlebars": "^4.0.12",
+    "less": "^3.8.1",
+    "marked": "^0.5.1",
+    "pug": "^2.0.3",
     "raw-loader": "^0.5.1",
-    "dalaran": "^0.1.18"
+    "yaml-js": "^0.2.3"
   },
   "scripts": {
     "new": "node ./devtools/index.js new",
     "dev": "node ./devtools/index.js dev",
     "test": "node ./devtools/index.js test",
+    "website": "node ./devtools/website.js",
     "prepublishOnly": "node ./devtools/index.js build",
     "format": "node ./devtools/format-demo.js"
   },

website/homepage-src/doc.patch.cn.yaml

@@ -0,0 +1,10 @@
+docs:
+  guide:
+    First Steps: 万事开头难
+    Positions and Rotations: 平移和旋转
+    Create Mesh: 创建网格体
+    Raw Material: 原始材质
+    Standard Material: 冯氏面材质
+    Lights: 光照
+    Load Models: 加载模型
+    Text Geometry: 文字几何体