[AwayJS] 平面 (2)

AwayJSを使って、平面を作るよ。 :boy:

awayjs_plane2

Mesh を使ってみるよ。 :bouzu:
PrimitivePlanePrefab と TriangleMethodMaterial を使ってみたよ。
そして、DirectionalLight と SoftShadowMethod を使ってみたり。 :bear:

そして、Skybox と ImageCubeTexture も! :beer:
AssetLibrary で、外部画像を読み込んでみたよ。 :sun:
さらに、EffectEnvMapMethod を使ってみたり。 :bear:

あと、PrimitiveCubePrefab と PointLight も使ってみたよ。 :cake:

もちろん、Mergeクラスも使ってるよ! :sun:

Main.ts
/// <reference path="libs/awayjs-core/build/awayjs-core.d.ts" />
/// <reference path="libs/awayjs-stagegl/build/awayjs-stagegl.d.ts" />
/// <reference path="libs/awayjs-renderergl/build/awayjs-renderergl.d.ts" />
/// <reference path="libs/awayjs-display/build/awayjs-display.d.ts" />
/// <reference path="libs/awayjs-methodmaterials/build/awayjs-methodmaterials.d.ts" />


import ContextGLProfile = require("awayjs-stagegl/lib/base/ContextGLProfile");
import DefaultRenderer = require("awayjs-renderergl/lib/DefaultRenderer");
import View = require("awayjs-display/lib/containers/View");
import Scene = require("awayjs-display/lib/containers/Scene");
import Camera = require("awayjs-display/lib/entities/Camera");
import DirectionalLight = require("awayjs-display/lib/entities/DirectionalLight");
import PointLight = require("awayjs-display/lib/entities/PointLight");
import StaticLightPicker = require("awayjs-display/lib/materials/lightpickers/StaticLightPicker");
import Vector3D = require("awayjs-core/lib/geom/Vector3D");
import RequestAnimationFrame = require("awayjs-core/lib/utils/RequestAnimationFrame");
import Mesh = require("awayjs-display/lib/entities/Mesh");
import PrimitivePlanePrefab = require("awayjs-display/lib/prefabs/PrimitivePlanePrefab");
import PrimitiveCubePrefab = require("awayjs-display/lib/prefabs/PrimitiveCubePrefab");
import TriangleMethodMaterial = require("awayjs-methodmaterials/lib/TriangleMethodMaterial");
import EffectEnvMapMethod = require("awayjs-methodmaterials/lib/methods/EffectEnvMapMethod");
//import ShadowSoftMethod        = require("awayjs-methodmaterials/lib/methods/ShadowSoftMethod");
import ShadowHardMethod = require("awayjs-methodmaterials/lib/methods/ShadowHardMethod");
import Skybox = require("awayjs-display/lib/entities/Skybox");
import SkyboxMaterial = require("awayjs-renderergl/lib/materials/SkyboxMaterial");
import ImageCubeTexture = require("awayjs-core/lib/textures/ImageCubeTexture");
import AssetLibrary = require("awayjs-core/lib/library/AssetLibrary");
import LoaderEvent = require("awayjs-core/lib/events/LoaderEvent");
import URLRequest = require("awayjs-core/lib/net/URLRequest");
import Merge = require("awayjs-renderergl/lib/tools/commands/Merge");
import Geometry = require("awayjs-display/lib/base/Geometry");

class Main {

  private renderer:DefaultRenderer;
  private view:View;
  private scene:Scene;
  private camera:Camera;
  private timer:RequestAnimationFrame;
  private light:DirectionalLight;
  private plight:PointLight;
  private plane:Mesh;
  private material:TriangleMethodMaterial;
  private max:number = 50;
  private radius:number = 500;
  private angle:number = - 90;
  private degree:number = 0;
  private depression:number = 30;
  private radian:number = Math.PI/180;
  private center:Vector3D = new Vector3D();
  private map:ImageCubeTexture;
  private mapPath:string = "assets/environment/basic.cube";

  constructor() {
    this.renderer = new DefaultRenderer(false, ContextGLProfile.BASELINE);
    this.renderer.antiAlias = 4;
    this.view = new View(this.renderer);
    this.scene = this.view.scene;
    this.camera = this.view.camera;
    this.light = new DirectionalLight();
    this.scene.addChild(this.light);
    this.plight = new PointLight();
    this.setup();
    //this.initialize();
    window.onresize = (evt:UIEvent) => this.resize(evt);
    this.resize();
    this.timer = new RequestAnimationFrame(this.render, this);
    this.timer.start();
    AssetLibrary.addEventListener(LoaderEvent.RESOURCE_COMPLETE, (evt:LoaderEvent) => this.loaded(evt));
    AssetLibrary.load(new URLRequest(this.mapPath));
  }

  private setup():void {
    this.view.backgroundColor = 0x000000;
    this.camera.x = 0;
    this.camera.y = 0;
    this.camera.z = - this.radius;
    this.light.x = - 200;
    this.light.direction = new Vector3D(0, -1, 0);
    this.light.ambient = 0.1;
    this.light.diffuse = 0.9;
    this.light.specular = 0.9;
    this.plight.x = 0;
    this.plight.y = 0;
    this.plight.z = 0;
    this.plight.ambient = 0.1;
    this.plight.diffuse = 0.9;
    this.plight.specular = 0.1;
  }
  private loaded(evt:LoaderEvent):void {
    switch (evt.url) {
      case this.mapPath :
        this.map = <ImageCubeTexture> evt.assets[0];
        break;
    }
    if (this.map) {
      this.initialize();
    }
  }
  private initialize():void {
    var sky:Skybox = new Skybox(new SkyboxMaterial(this.map));
    this.scene.addChild(sky);

    this.material = new TriangleMethodMaterial();
    var lightPicker:StaticLightPicker = new StaticLightPicker([this.light]);
    this.material.lightPicker = lightPicker;
    this.material.addEffectMethod(new EffectEnvMapMethod(this.map, 0.9));
    this.material.shadowMethod = new ShadowHardMethod(this.light);
    this.plane = <Mesh> new PrimitivePlanePrefab(400, 400, 1, 1, true, true).getNewObject();
    this.plane.material = this.material;
    this.plane.y = - 160;
    this.scene.addChild(this.plane);

    var cmaterial:TriangleMethodMaterial = new TriangleMethodMaterial();
    var clightPicker:StaticLightPicker = new StaticLightPicker([this.plight]);
    cmaterial.lightPicker = clightPicker;
    var merge:Merge = new Merge();
    var container:Mesh = new Mesh(new Geometry());
    container.material = cmaterial;
    this.scene.addChild(container);
    var cube:Mesh;
    for (var n:number = 0; n < this.max; n++) {
      cube = <Mesh> new PrimitiveCubePrefab(20, 20, 20, 1, 1, 1, false).getNewObject();
      //cube.material = material;
      cube.x = (Math.random() - 0.5)*200;
      cube.y = (Math.random() - 0.5)*200;
      cube.z = (Math.random() - 0.5)*200;
      cube.rotationX = Math.random()*360;
      cube.rotationY = Math.random()*360;
      cube.rotationZ = Math.random()*360;
      //this.scene.addChild(cube);
      merge.apply(container, cube);
    }
  }
  private render(dt:number):void {
    this.angle += 0.5;
    this.degree += 1;
    var dip:number = this.depression*Math.sin(this.degree*this.radian);
    this.camera.x = this.radius*Math.cos(this.angle*this.radian)*Math.cos(dip*this.radian);
    this.camera.y = this.radius*Math.sin(dip*this.radian);
    this.camera.z = this.radius*Math.sin(this.angle*this.radian)*Math.cos(dip*this.radian);
    this.camera.lookAt(this.center);
    this.view.render();
  }
  private resize(evt:UIEvent = null):void {
    this.view.width = window.innerWidth;
    this.view.height = window.innerHeight;
  }
}

window.onload = function() {
  new Main();
}

build.txt
src/Main.ts
-target ES5
-module commonjs
-outDir bin

build.txt 上で、[Command + B] して、ビルド。

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<title>[AwayJS] 平面 (2)</title>
<script type="text/javascript" src="js/awayjs-core.min.js">/script>
<script type="text/javascript" src="js/awayjs-stagegl.min.js">/script>
<script type="text/javascript" src="js/awayjs-renderergl.min.js">/script>
<script type="text/javascript" src="js/awayjs-display.min.js">/script>
<script type="text/javascript" src="js/awayjs-methodmaterials.min.js">/script>
<script type="text/javascript" src="Main.js">/script>
<style type="text/css">
  html { overflow:hidden; }
  body { margin:0; padding:0; }
</style>
</head>
<body style="background-color:#000000;">
</body>
</html>

basic.cube
{
  "data":[
    {
      "id":"posX",
      "image":"basic/right.jpg"
    },
    {
      "id":"negX",
      "image":"basic/left.jpg"
    },
    {
      "id":"posY",
      "image":"basic/top.jpg"
    },
    {
      "id":"negY",
      "image":"basic/bottom.jpg"
    },
    {
      "id":"posZ",
      "image":"basic/front.jpg"
    },
    {
      "id":"negZ",
      "image":"basic/back.jpg"
    }
  ]
}

:caution: AwayJSでの注意点
SkyBoxクラスではなく、Skyboxクラス。
影をつけるには、DirectionalLight を Scene に addChild()する必要がある。


:banana: [TypeScript] AwayJSを始めよう! 参照。


[修正] (14/12/04 Thu 21:45)
ShadowSoftMethod から ShadowHardMethod に変更。
[修正] (14/12/27 Sat 19:40)
HTML記述を変更。