GrimoireGL · moajo · Dec 19, 2017 · Jul 19, 2017 · Aug 3, 2017 · Aug 3, 2017
diff --git a/.gitignore b/.gitignore
@@ -128,3 +128,5 @@ yarn.lock
 docs
 test-lib
 test-lib-es5
+src/metaInfo.ts
+package-lock.json
diff --git a/.gitmodules b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "common"]
+	path = common
+	url = [email protected]:GrimoireGL/common-configurations.git
diff --git a/.jsbeautifyrc b/.jsbeautifyrc
diff --git a/.jshintrc b/.jshintrc
diff --git a/README.md b/README.md
@@ -5,87 +5,151 @@
 [![LICENSE](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/jThreeJS/jThree/blob/develop/LICENSE)
 [![Dependency Status](https://david-dm.org/GrimoireGL/GrimoireJS.svg)](https://david-dm.org/GrimoireGL/GrimoireJS)
 [![devDependency Status](https://david-dm.org/GrimoireGL/GrimoireJS/dev-status.svg)](https://david-dm.org/GrimoireGL/GrimoireJS#info=devDependencies)
+[![Greenkeeper badge](https://badges.greenkeeper.io/GrimoireGL/GrimoireJS.svg)](https://greenkeeper.io/)
 
 ## Overview
 
-[![Greenkeeper badge](https://badges.greenkeeper.io/GrimoireGL/GrimoireJS.svg)](https://greenkeeper.io/)
+**Grimoire.js provide a bridge between Web engineers and CG engineers**
 
-Why virtual DOM needs to be only for actual DOM?
-Logics like drawing formulas for canvas even needs DOM for easier way.
+There were big gap between the development flows used for each.
 
-* **DOM based** ・・・The way that Web engineers can work most effectively.
-* **jQuery like API** ・・・No more complex procedural WebGL logics, just operate attributes with the API.
-* **Web development friendly**・・・Use with the other Web front-end frameworks. Very easy to coop with them.
-* **No more redundant codes**・・・Include only `tag`s you actually need.
+Web engineers have typically used `event driven` javascript programs for daily works. And they mutate DOM APIs to make Web pages dynamic.
 
-## Download
+However, CG engineers has typically used `loop based` programs for daily works. These are mostly build with a programming language with strong type like C++ or C#.  And recently CG engineers more like to use strongly structured engines like Unity.
+
+This is why these 2 engineers have so much different flow for workings. This is why it is hard to learn CG stuff by Web engineers. And CG engineers are also hard to make suitable APIs for Web engineers working with.
+
+**Grimoire.js is a javascript(Typescript) framework to solve this problem with strong architecture**
 
-The file you might want to download is not included this repository since even set of WebGL operations are treated as plugins.  
-Basic set for using Grimoire.js is bundled and published here([unpkg](https://unpkg.com/[email protected]/register/grimoire-preset-basic.min.js)).  
-This file includes `grimoirejs`,`grimoirejs-math` and `grimoirejs-fundamental`.
+## Features
 
-## First Interact
+You can see several feature of Grimoire.js providing in this section.  
 
-**HTML file**
+**We strongly recommend to see our [top page](http://grimoire.gl) to learn these features. Most of written things are same as this README.md. But our samples on the top pages are working!!.**
+
+### HTML like markup
+
+We provides a syntax like XML to compose WebGL canvas. This is kind of HTML for Web engineers.
+You can create 360 degree image viewer on browser only by writing the code below.(See official page to see working example)
 
 ```xml
-<html>
-  <head>
-    <script src="grimoire-preset-basic.js"></script>
-  </head>
-  <body>
-    <script type="text/goml" src="./index.goml">
-  </body>
-</html>
+<goml>
+  <scene>
+    <camera></camera>
+    <mesh geometry="sphere" cull="front" texture="360.jpg">
+      <mesh.components>
+        <Rotate speed="0.1" />
+      </mesh.components>
+    </mesh>
+  </scene>
+</goml>
 ```
 
-**GOML file(Canvas DOM we defined)**
+### DOM operation API
+
+Web engineers typically write javascript to mutate DOM structures or attributes. All that kinds things are same at Grimoire. Web engineers can use query-based operation API to changing attributes, modifying structures of DOM or registering event handlers.
+
+These are codes to co-work WebGL canvas and Web UIs that made with ordinal web development way. (You can see working example on our official top page)
 
 ```xml
 <goml>
   <scene>
-    <camera>
-      <camera.components>
-        <!-- Attaching component to move the camera with mouse-->
-        <MouseCameraControl/>
-      </camera.components>
-    </camera>
-    <mesh geometry="cube" color="red"/>
+    <camera></camera>
+    <mesh texture="logo.png" geometry="cube">
+      <mesh.components>
+        <Rotate speed="0,0.1,0" />
+      </mesh.components>
+    </mesh>
   </scene>
 </goml>
 ```
 
-## Purpose
+```js
+gr(function() {
+  var mesh = gr('#simple .canvas')('mesh')
+  $('#simple .red').on('click', function () {
+    mesh.setAttribute('color', 'red')
+  })
+  $('#simple .blue').on('click', function () {
+    mesh.setAttribute('color', 'blue')
+  })
+  mesh.on('mouseenter', function () {
+    mesh.setAttribute('scale', '2.0')
+    $("#simple .bigger").addClass("bold-label");
+    $("#simple .smaller").removeClass("bold-label");
+  })
+  mesh.on('mouseleave', function () {
+    mesh.setAttribute('scale', '1.0')
+    $("#simple .smaller").addClass("bold-label");
+    $("#simple .bigger").removeClass("bold-label");
+  })
+})
+```
 
-**WebGL is not only for games, but also for web services.**
+### Simple and powerful architecture, Typescript ready
+
+If you really want to make WebGL stuff on your page, it is hard to make only by Web engineers if that contents requires highly customized representation. In this situation, Web engineers and CG engineers need to co-work.
+
+CG engineers can write a component. And these are reusable.
+
+And these are able to be written by Typescript. Safe and effective environment for development.
+
+This is a sample to make objects waving movement. (You can see full comprehensive this sample at our top page)
+
+```ts
+import Component from "grimoirejs/ref/Core/Component";
+import ISceneUpdateArgument from "grimoirejs-fundamental/ref/SceneRenderer/ISceneUpdateArgument";
+import TransformComponent from "grimoirejs-fundamental/ref/Components/TransformComponent";
+import Vector3 from "grimoirejs-math/ref/Vector3";
+import gr from "grimoirejs";
+class Wave extends Component{
+  public static attributes = {
+    amp:{
+      default:1.0,
+      converter:"Number"
+    },
+    speed:{
+      default:1.0,
+      converter:"Number"
+    }
+  };
+
+  public amp:number;
+
+  public speed:number;
+
+  private transform: TransformComponent;
+
+  public $mount():void{
+    this.transform = this.node.getComponent(TransformComponent);
+    this.__bindAttributes(); // bind component attributes to fields
+  }
+  public $update(t:ISceneUpdateArgument):void{
+    this.transfrom.position = new Vector3(this.transform.position.X,Math.sin(this.speed * t.timer.timeInSecound) * this.amp,this.transform.position.Z);
+  }
+}
+gr.registerComponent("Wave",Wave);
+```
 
-After WebGL feature being implemented with modern browsers, many impressive Web3D libraries are appeared. However, most of them are just imported from 3D development culture that was grown in the environments very apart from web development culture.
+## Download
 
-There should be good way of mixing these cultures. Grimoire.js is one of solution of that future.
+Please see official site and [Download page](https://grimoire.gl/guide/1_essentials/01_installation.html).
 
 ## Useful Links
 
 * **Official Site**・・・http://grimoire.gl
 
-## Extensions
-
-You can try these plugins with just downloading them. Or, If you are npm user, you can install them with `npm install` easily.
-
-### Major Plugins
+### API Reference
 
-Plugin is a necessary feature to use Grimoire.js. Most of features are separated as plugin. This repo is core of Grimoire.js not containing any WebGL codes.
+See [here](https://api.grimoire.gl/core).
 
-|Name|Purpose|Dependency|
-|:-:|:-:|:-:|
-|grimoirejs-math| Defining math related class and converters| None|
-|grimoirejs-fundamental| Defining basement system for WebGL and defines basic tags|grimoirejs-math|
-|grimoirejs-gltf|glTF model loader plugin defines the tags to populate glTF model in the scene|grimoirejs-math,grimoirejs-fundamental|
+This document is automatically generated. 
 
-### Major Presets
+<!--DOCUMENT STAMP-->
 
-It is hard work to download all depends plugins and links with script tag. So, there are presets containing multiple plugins.
+Make sure the API reference is only containing core stuff(Mutating goml stuff, operating attributes, methods being available on Component instance and so on).
 
-* grimoirejs-preset-basic・・・containing grimoirejs,grimoirejs-fundamental,grimoirejs-math
+If you want to see WebGL related feature of API, you should see [renderer plugin page](https://api.grimoire.gl/grimoirejs-fundamental).
 
 ## LICENSE
 

diff --git a/circle.yml b/circle.yml
@@ -1,30 +1,24 @@
 machine:
   node:
-    version: 6.9.5
-
-  post:
-    - curl -o- -L https://yarnpkg.com/install.sh | bash
-
-dependencies:
-  cache_directories:
-    - "~/.cache/yarn"
-
-  pre:
-    - yarn --version
-
-  override:
-    - yarn install
-
+    version: 9.3.0
 test:
   post:
     - sh release.sh
-    - aws s3 cp ./coverage/ s3://coverage.grimoire.gl/core/$CIRCLE_BRANCH --recursive --region ap-northeast-1 --acl public-read
+    - >-
+      aws s3 cp ./coverage/ s3://coverage.grimoire.gl/core/$CIRCLE_BRANCH
+      --recursive --region ap-northeast-1 --acl public-read
   override:
     - npm run lint && npm run build && npm run coverage
-
+    - sh -x shell/e2e.sh
+checkout:
+  post:
+    - git submodule init
+    - git submodule update
 deployment:
   deploy:
     branch: master
     commands:
       - npm run doc
-      - aws s3 cp ./docs/ s3://api.grimoire.gl/core --recursive --region ap-northeast-1 --acl public-read
+      - >-
+        aws s3 cp ./docs/ s3://api.grimoire.gl/core --recursive --region
+        ap-northeast-1 --acl public-read
diff --git a/common b/common
diff --git a/doc-timestamp.js b/doc-timestamp.js
@@ -0,0 +1,24 @@
+const fs = require("fs");
+
+fs.readFile("./package.json","utf8",(err,data)=>{
+    if(err){
+        console.error(err);
+        process.exit(1);
+    }else{
+        const version = JSON.parse(data).version;
+        fs.readFile("./README.md","utf8",(err,original)=>{
+            if(err){
+                console.error(err);
+                process.exit(1);
+            }else{
+                const replaced = original.replace("<!--DOCUMENT STAMP-->",`* Update date: \`${new Date()}\`\n* Build version: \`${version}\``);
+                fs.writeFile("./README.md",replaced,(err,data)=>{
+                    if(err){
+                        console.error(err);
+                        process.exit(1);                        
+                    }
+                });
+            }
+        });
+    }
+});