add scene view

src/TestScript.ts

@@ -29,13 +29,13 @@ export class TestScript extends Tea.Script {
 
 		var keyboard = this.app.keyboard;
 		//console.log(keyboard.isDown(Keyboard.Keys.ArrowLeft));
-		if (keyboard.isDown(Tea.Keyboard.Codes.Space)) {
+		if (keyboard.isDown(Tea.Keyboard.Code.Space)) {
 			console.log("down");
 		}
-		if (keyboard.isUp(Tea.Keyboard.Codes.Space)) {
+		if (keyboard.isUp(Tea.Keyboard.Code.Space)) {
 			console.log("up");
 		}
-		if (keyboard.isHeld(Tea.Keyboard.Codes.Space)) {
+		if (keyboard.isHeld(Tea.Keyboard.Code.Space)) {
 			console.log("held");
 		}
 

src/tea/App.ts

@@ -55,20 +55,29 @@ export class App {
 		return "0.1.0";
 	}
 
+	get isSceneView(): boolean {
+		return this._renderer.isSceneView;
+	}
+	set isSceneView(value: boolean) {
+		this._renderer.isSceneView = value;
+	}
+
 	get width(): number {
 		return this.canvas.width;
 	}
 	set width(value: number) {
-		this.canvas.width = value * this._pixelRatio;
-		this.onResize();
+		var canvas = this.canvas;
+		canvas.width = value * this._pixelRatio;
+		canvas.style.width = value + "px";
 	}
 
 	get height(): number {
 		return this.canvas.height;
 	}
 	set height(value: number) {
-		this.canvas.height = value * this._pixelRatio;
-		this.onResize();
+		var canvas = this.canvas;
+		canvas.height = value * this._pixelRatio;
+		canvas.style.height = value + "px";
 	}
 
 	get drawingBufferWidth(): number {
@@ -276,16 +285,22 @@ export class App {
 		return renderer;
 	}
 
-	createLineRenderer(): Tea.LineRenderer {
-		var renderer = new Tea.LineRenderer(this);
+	createLineRenderer(): Tea.Object3D {
+		var object3d = new Tea.Object3D(this);
+		var renderer = object3d.addComponent(Tea.LineRenderer);
 		var shader = new Tea.Shader(this);
 		shader.attach(
 			Tea.ShaderSources.lineVS,
 			Tea.ShaderSources.lineFS
 		);
+		shader.settings.enableBlend = true;
+		shader.settings.blend.srcRGB = Tea.ShaderBlendFunc.SrcAlpha;
+		shader.settings.blend.dstRGB = Tea.ShaderBlendFunc.OneMinusSrcAlpha;
+		shader.settings.blend.srcAlpha = Tea.ShaderBlendFunc.One;
+		shader.settings.blend.dstAlpha = Tea.ShaderBlendFunc.One;
 		renderer.material = Tea.Material.getDefault(this);
 		renderer.material.shader = shader;
-		return renderer;
+		return object3d;
 	}
 
 	createTexture(image: HTMLImageElement): Tea.Texture {
@@ -424,13 +439,6 @@ export class App {
 		return context;
 	}
 
-	protected onResize() {
-		//var gl = this.gl;
-		//gl.viewport(100 / 2, 0, this.width, this.height);
-		//gl.scissor(100, 0, this.width, this.height);
-	}
-
-
 	protected onContextCreationError = (event: WebGLContextEvent) => {
 		console.error("webglcontextcreationerror", event);
 	}
@@ -454,6 +462,11 @@ class AppRenderer extends Tea.EventDispatcher {
 	time: Tea.Time;
 	stats: Tea.Stats;
 	runInBackground: boolean;
+	protected _fps: number;
+	protected _interval: number;
+	protected _isSceneView: boolean;
+	protected _lastTime: number;
+	protected _update: FrameRequestCallback;
 	protected _handle: number;
 
 	constructor(app: App) {
@@ -465,6 +478,11 @@ class AppRenderer extends Tea.EventDispatcher {
 		this.mouse = new Tea.Mouse(app, this.app.canvas);
 		this.time = new Tea.Time();
 		this.runInBackground = false;
+		this._fps = 60.0;
+		this._interval = 1000.0 / this._fps;
+		this._isSceneView = false;
+		this._lastTime = 0.0;
+		this._update = this.update;
 		this._handle = 0;
 		this.createStats();
 
@@ -484,7 +502,8 @@ class AppRenderer extends Tea.EventDispatcher {
 				return;
 			}
 			if (this.isStarted && this.isPaused) {
-				this._handle = requestAnimationFrame(this.update);
+				this._lastTime = performance.now();
+				this._handle = requestAnimationFrame(this._update);
 			}
 			this.isPaused = false;
 			this.emit("resume");
@@ -511,6 +530,29 @@ class AppRenderer extends Tea.EventDispatcher {
 		}
 	}
 
+	get fps(): number {
+		return this._fps;
+	}
+	set fps(value: number) {
+		this._fps = value;
+		this._interval = 1000.0 / value;
+	}
+
+	get isSceneView(): boolean {
+		return this._isSceneView;
+	}
+	set isSceneView(value: boolean) {
+		if (this._isSceneView === value) {
+			return;
+		}
+		this._isSceneView = value;
+		if (value) {
+			this._update = this.updateScene;
+		} else {
+			this._update = this.update;
+		}
+	}
+
 	dispatchResizeEvent(): void {
 		this.emit("resize");
 		this.once("update", () => {
@@ -526,7 +568,8 @@ class AppRenderer extends Tea.EventDispatcher {
 		this.time.start();
 		if (this.isPaused === false) {
 			this.stats.updateSize();
-			this._handle = requestAnimationFrame(this.update);
+			this._lastTime = performance.now();
+			this._handle = requestAnimationFrame(this._update);
 		}
 	}
 
@@ -542,6 +585,11 @@ class AppRenderer extends Tea.EventDispatcher {
 	}
 
 	protected update = (time: number): void => {
+		if (time < this._lastTime + this._interval) {
+			this._handle = requestAnimationFrame(this._update);
+			return;
+		}
+		this._lastTime += this._interval;
 		//Tea.Vector3.newCount = 0;
 		//Tea.Quaternion.newCount = 0;
 		//Tea.Matrix4x4.newCount = 0;
@@ -553,12 +601,29 @@ class AppRenderer extends Tea.EventDispatcher {
 		}
 		this.stats.update();
 		this.emit("update");
-		this._handle = requestAnimationFrame(this.update);
+		this._handle = requestAnimationFrame(this._update);
 		//console.log("Tea.Vector3.newCount", Tea.Vector3.newCount);
 		//console.log("Tea.Quaternion.newCount", Tea.Quaternion.newCount);
 		//console.log("Tea.Matrix4x4.newCount", Tea.Matrix4x4.newCount);
 	}
 
+	protected updateScene = (time: number): void => {
+		if (time < this._lastTime + this._interval) {
+			this._handle = requestAnimationFrame(this._update);
+			return;
+		}
+		this._lastTime += this._interval;
+		this.time.update();
+		if (this.currentScene != null) {
+			this.currentScene.updateScene();
+			this.keyboard.update();
+			this.mouse.update();
+		}
+		this.stats.update();
+		this.emit("update");
+		this._handle = requestAnimationFrame(this._update);
+	}
+
 	protected createStats(): void {
 		var stats = new Tea.Stats(this.app);
 		document.body.appendChild(stats.canvas);

src/tea/Keyboard.ts

@@ -94,7 +94,7 @@ export class Keyboard {
 }
 
 export module Keyboard {
-	export class Codes {
+	export class Code {
 		static readonly Backspace: string = "Backspace";
 		static readonly Delete: string = "Delete";
 		static readonly Tab: string = "Tab";

src/tea/Mouse.ts

@@ -157,7 +157,6 @@ export class Mouse {
 	}
 }
 
-
 export module Mouse {
 	export class Button {
 		static readonly Left: number = 0;

src/tea/components/LineRenderer.ts

@@ -122,6 +122,6 @@ export class LineRenderer extends Renderer {
 			return;
 		}
 		var gl = this.gl;
-		gl.drawArrays(gl.LINE_STRIP, 0, count);
+		gl.drawArrays(gl.LINES, 0, count);
 	}
 }

src/tea/editor/Editor.ts

@@ -101,22 +101,28 @@ Vue.component("TextMesh", TextMesh);
 							<HierarchyView ref="hierarchy"></HierarchyView>
 							<HResizeBar ref="hierarchyResize"></HResizeBar>
 						</Panel>
-						<Panel ref="main" class="MainPanel">
-							<VLayout
-								:style="{
-									height: '100%'
-								}">
-								<Panel class="Toolbar">
-									<SelectAspect
-										ref="aspect"
-										@update="onUpdateAspect">
-									</SelectAspect>
+						<Tabs ref="mainTabs" class="Top">
+							<TabItem name="Player" class="MainPanel">
+								<VLayout
+									:style="{
+										height: '100%'
+									}">
+									<Panel class="Toolbar">
+										<SelectAspect
+											ref="aspect"
+											@update="onUpdateAspect">
+										</SelectAspect>
+									</Panel>
+									<Panel ref="playerPanel" class="PlayerPanel">
+										<canvas ref="canvas" id="canvas"></canvas>
+									</Panel>
+								</VLayout>
+							</TabItem>
+							<TabItem name="Scene">
+								<Panel ref="scenePanel" class="ScenePanel">
 								</Panel>
-								<Panel class="CanvasPanel">
-									<canvas ref="canvas" id="canvas"></canvas>
-								</Panel>
-							</VLayout>
-						</Panel>
+							</TabItem>
+						</Tabs>
 					</HLayout>
 					<Tabs class="Bottom">
 						<TabItem name="Project">

src/tea/editor/EditorBehavior.ts

@@ -8,6 +8,7 @@ import { UICommands } from "./commands/UICommands";
 import { HierarchyViewCommand } from "./commands/HierarchyViewCommand";
 import { ObjectInspectorCommand } from "./commands/ObjectInspectorCommand";
 import { EditorCommand } from "./commands/EditorCommand";
+import { Tabs } from "./containers/Tabs";
 
 export class EditorBehavior {
 	editor: Editor;
@@ -22,6 +23,7 @@ export class EditorBehavior {
 		this.initEvents();
 		this.initMainMenu();
 		this.initUICommands();
+		this.initTabs();
 		this.initScreenView();
 		this.initHierarchyView();
 		this.initInspectorView();
@@ -68,6 +70,26 @@ export class EditorBehavior {
 		this.objectInspectorCommand.hierarchyViewCommand = this.hierarchyViewCommand;
 	}
 
+	initTabs(): void {
+		var mainTabs = this.editor.$refs.mainTabs as Tabs;
+		var playerPanel = this.editor.$refs.playerPanel as Vue;
+		var scenePanel = this.editor.$refs.scenePanel as Vue;
+		var canvas = this.editor.$refs.canvas as HTMLElement;
+		mainTabs.$on("select", (item) => {
+			switch (item.name) {
+				case "Player":
+					playerPanel.$el.appendChild(canvas);
+					this.scene.app.isSceneView = false;
+					break;
+				case "Scene":
+					scenePanel.$el.appendChild(canvas);
+					this.scene.app.isSceneView = true;
+					break;
+			}
+			this.updateScreenSize();
+		});
+	}
+
 	initScreenView(): void {
 		var hierarchyResize = this.editor.$refs.hierarchyResize as Vue;
 		var inspectorResize = this.editor.$refs.inspectorResize as Vue;

src/tea/editor/containers/Tabs.ts

@@ -208,5 +208,9 @@ export class Tabs extends Vue {
 			return;
 		}
 		this.select(index);
+		var item = this.getItem(index);
+		if (item != null) {
+			this.$emit("select", item);
+		}
 	}
 }

src/tea/editor/css/Editor.scss

@@ -50,6 +50,10 @@ $parent: "#editor";
 		overflow-x: hidden;
 		overflow-y: auto;
 	}
+
+	div.Tabs.Top {
+		flex: 1;
+	}
 	div.MainPanel {
 		height: 100%;
 		overflow: hidden;
@@ -59,7 +63,24 @@ $parent: "#editor";
 			overflow: hidden;
 		}
 	}
-	div.CanvasPanel {
+	div.ScenePanel {
+		display: flex;
+		flex: 1;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+		overflow: scroll;
+
+		canvas {
+			max-width: 100%;
+			max-height: 100%;
+			object-fit: contain;
+		}
+	}
+	div.ScenePanel::-webkit-scrollbar {
+		display: none;
+	}
+	div.PlayerPanel {
 		display: flex;
 		flex: 1;
 		justify-content: center;
@@ -72,7 +93,7 @@ $parent: "#editor";
 			object-fit: contain;
 		}
 	}
-	div.CanvasPanel::-webkit-scrollbar {
+	div.PlayerPanel::-webkit-scrollbar {
 		display: none;
 	}