From a3ef4887cc73c563272e87212b471bc9db509785 Mon Sep 17 00:00:00 2001 From: Mugen87 Date: Wed, 1 Jul 2020 12:53:09 +0200 Subject: [PATCH 1/4] Editor: Add view helper. --- editor/js/Viewport.Camera.js | 2 +- editor/js/Viewport.ViewHelper.js | 114 +++++++++++++++++++++++++++++++ editor/js/Viewport.js | 7 ++ editor/sw.js | 1 + 4 files changed, 123 insertions(+), 1 deletion(-) create mode 100644 editor/js/Viewport.ViewHelper.js diff --git a/editor/js/Viewport.Camera.js b/editor/js/Viewport.Camera.js index f6e35493ea675d..69171c3fcf6802 100644 --- a/editor/js/Viewport.Camera.js +++ b/editor/js/Viewport.Camera.js @@ -13,7 +13,7 @@ function ViewportCamera( editor ) { var cameraSelect = new UISelect(); cameraSelect.setPosition( 'absolute' ); cameraSelect.setRight( '10px' ); - cameraSelect.setTop( '10px' ); + cameraSelect.setBottom( '10px' ); cameraSelect.onChange( function () { editor.setViewportCamera( this.getValue() ); diff --git a/editor/js/Viewport.ViewHelper.js b/editor/js/Viewport.ViewHelper.js new file mode 100644 index 00000000000000..a2e0e0b03d3701 --- /dev/null +++ b/editor/js/Viewport.ViewHelper.js @@ -0,0 +1,114 @@ +/** + * @author Mugen87 / https://github.com/Mugen87 + */ + +import * as THREE from '../../build/three.module.js'; + +function ViewHelper() { + + THREE.Object3D.call( this ); + + var camera = new THREE.OrthographicCamera( - 2, 2, 2, - 2, 0, 4 ); + camera.position.set( 0, 0, 2 ); + + var axesHelper = new THREE.AxesHelper(); + this.add( axesHelper ); + + var geometry = new THREE.SphereBufferGeometry( 0.2 ); + + var posXAxisHelper = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0xff0000, transparent: true } ) ); + var posYAxisHelper = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x00ff00, transparent: true } ) ); + var posZAxisHelper = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x0000ff, transparent: true } ) ); + var negXAxisHelper = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0xff0000, transparent: true } ) ); + var negYAxisHelper = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x00ff00, transparent: true } ) ); + var negZAxisHelper = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x0000ff, transparent: true } ) ); + + posXAxisHelper.position.x = 1; + posYAxisHelper.position.y = 1; + posZAxisHelper.position.z = 1; + negXAxisHelper.position.x = - 1; + negXAxisHelper.scale.setScalar( 0.8 ); + negYAxisHelper.position.y = - 1; + negYAxisHelper.scale.setScalar( 0.8 ); + negZAxisHelper.position.z = - 1; + negZAxisHelper.scale.setScalar( 0.8 ); + + axesHelper.add( posXAxisHelper ); + axesHelper.add( posYAxisHelper ); + axesHelper.add( posZAxisHelper ); + axesHelper.add( negXAxisHelper ); + axesHelper.add( negYAxisHelper ); + axesHelper.add( negZAxisHelper ); + + var point = new THREE.Vector3(); + var dim = 128; + + this.render = function ( renderer, editorCamera, container ) { + + this.quaternion.copy( editorCamera.quaternion ).inverse(); + this.updateMatrixWorld(); + + point.set( 0, 0, 1 ); + point.applyQuaternion( editorCamera.quaternion ); + + if ( point.x >= 0 ) { + + posXAxisHelper.material.opacity = 1; + negXAxisHelper.material.opacity = 0.5; + + } else { + + posXAxisHelper.material.opacity = 0.5; + negXAxisHelper.material.opacity = 1; + + } + + if ( point.y >= 0 ) { + + posYAxisHelper.material.opacity = 1; + negYAxisHelper.material.opacity = 0.5; + + } else { + + posYAxisHelper.material.opacity = 0.5; + negYAxisHelper.material.opacity = 1; + + } + + if ( point.z >= 0 ) { + + posZAxisHelper.material.opacity = 1; + negZAxisHelper.material.opacity = 0.5; + + } else { + + posZAxisHelper.material.opacity = 0.5; + negZAxisHelper.material.opacity = 1; + + } + + // + + var x = container.dom.offsetWidth - dim; + var y = container.dom.offsetHeight - dim; + + renderer.clearDepth(); + renderer.setScissorTest( true ); + renderer.setScissor( x, y, dim, dim ); + renderer.setViewport( x, y, dim, dim ); + renderer.render( this, camera ); + renderer.setScissorTest( false ); + + }; + +} + +ViewHelper.prototype = Object.assign( Object.create( THREE.Object3D.prototype ), { + + constructor: ViewHelper, + + isViewHelper: true + +} ); + +export { ViewHelper }; diff --git a/editor/js/Viewport.js b/editor/js/Viewport.js index a5de6e7f0e8cc4..9f0731f064eedd 100644 --- a/editor/js/Viewport.js +++ b/editor/js/Viewport.js @@ -12,6 +12,7 @@ import { EditorControls } from './EditorControls.js'; import { ViewportCamera } from './Viewport.Camera.js'; import { ViewportInfo } from './Viewport.Info.js'; +import { ViewHelper } from './Viewport.ViewHelper.js'; import { SetPositionCommand } from './commands/SetPositionCommand.js'; import { SetRotationCommand } from './commands/SetRotationCommand.js'; @@ -58,6 +59,10 @@ function Viewport( editor ) { // + var viewHelper = new ViewHelper(); + + // + var box = new THREE.Box3(); var selectionBox = new THREE.BoxHelper(); @@ -714,6 +719,7 @@ function Viewport( editor ) { // don't render under the grid. scene.add( grid ); + renderer.setViewport( 0, 0, container.dom.offsetWidth, container.dom.offsetHeight ); renderer.render( scene, camera ); scene.remove( grid ); @@ -721,6 +727,7 @@ function Viewport( editor ) { renderer.autoClear = false; renderer.render( sceneHelpers, camera ); + viewHelper.render( renderer, camera, container ); renderer.autoClear = true; } diff --git a/editor/sw.js b/editor/sw.js index 88aa544730a8c2..b2813e18d44ac2 100644 --- a/editor/sw.js +++ b/editor/sw.js @@ -159,6 +159,7 @@ const assets = [ './js/Viewport.js', './js/Viewport.Camera.js', './js/Viewport.Info.js', + './js/Viewport.ViewHelper.js', './js/Command.js', './js/commands/AddObjectCommand.js', From 325b933887607ff1a6c46b5e7df17a4b7e824920 Mon Sep 17 00:00:00 2001 From: Mugen87 Date: Wed, 1 Jul 2020 15:18:47 +0200 Subject: [PATCH 2/4] ViewHelper: Move to sprites. --- editor/js/Viewport.ViewHelper.js | 40 +++++++++++++++++++++++++------- 1 file changed, 32 insertions(+), 8 deletions(-) diff --git a/editor/js/Viewport.ViewHelper.js b/editor/js/Viewport.ViewHelper.js index a2e0e0b03d3701..8f9c50c362b2f0 100644 --- a/editor/js/Viewport.ViewHelper.js +++ b/editor/js/Viewport.ViewHelper.js @@ -14,14 +14,12 @@ function ViewHelper() { var axesHelper = new THREE.AxesHelper(); this.add( axesHelper ); - var geometry = new THREE.SphereBufferGeometry( 0.2 ); - - var posXAxisHelper = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0xff0000, transparent: true } ) ); - var posYAxisHelper = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x00ff00, transparent: true } ) ); - var posZAxisHelper = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x0000ff, transparent: true } ) ); - var negXAxisHelper = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0xff0000, transparent: true } ) ); - var negYAxisHelper = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x00ff00, transparent: true } ) ); - var negZAxisHelper = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x0000ff, transparent: true } ) ); + var posXAxisHelper = new THREE.Sprite( new THREE.SpriteMaterial( { map: generateTexture( '#ff0000', 'X' ) } ) ); + var posYAxisHelper = new THREE.Sprite( new THREE.SpriteMaterial( { map: generateTexture( '#00ff00', 'Y' ) } ) ); + var posZAxisHelper = new THREE.Sprite( new THREE.SpriteMaterial( { map: generateTexture( '#0000ff', 'Z' ) } ) ); + var negXAxisHelper = new THREE.Sprite( new THREE.SpriteMaterial( { map: generateTexture( '#ff0000' ) } ) ); + var negYAxisHelper = new THREE.Sprite( new THREE.SpriteMaterial( { map: generateTexture( '#00ff00' ) } ) ); + var negZAxisHelper = new THREE.Sprite( new THREE.SpriteMaterial( { map: generateTexture( '#0000ff' ) } ) ); posXAxisHelper.position.x = 1; posYAxisHelper.position.y = 1; @@ -101,6 +99,32 @@ function ViewHelper() { }; + function generateTexture( color, text = null ) { + + var canvas = document.createElement( 'canvas' ); + canvas.width = 128; + canvas.height = 128; + + var context = canvas.getContext( '2d' ); + context.beginPath(); + context.arc( 64, 64, 32, 0, 2 * Math.PI ); + context.closePath(); + context.fillStyle = color; + context.fill(); + + if ( text !== null ) { + + context.font = '48px Arial'; + context.textAlign = 'center'; + context.fillStyle = '#000000'; + context.fillText( text, 64, 84 ); + + } + + return new THREE.CanvasTexture( canvas ); + + } + } ViewHelper.prototype = Object.assign( Object.create( THREE.Object3D.prototype ), { From e48cb5ed503a1794d4aca81eb2aae688ed3d0385 Mon Sep 17 00:00:00 2001 From: Mugen87 Date: Wed, 1 Jul 2020 15:32:48 +0200 Subject: [PATCH 3/4] ViewHelper: Disable tone mapping. --- editor/js/Viewport.ViewHelper.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/editor/js/Viewport.ViewHelper.js b/editor/js/Viewport.ViewHelper.js index 8f9c50c362b2f0..9af33723b6ddaa 100644 --- a/editor/js/Viewport.ViewHelper.js +++ b/editor/js/Viewport.ViewHelper.js @@ -14,12 +14,12 @@ function ViewHelper() { var axesHelper = new THREE.AxesHelper(); this.add( axesHelper ); - var posXAxisHelper = new THREE.Sprite( new THREE.SpriteMaterial( { map: generateTexture( '#ff0000', 'X' ) } ) ); - var posYAxisHelper = new THREE.Sprite( new THREE.SpriteMaterial( { map: generateTexture( '#00ff00', 'Y' ) } ) ); - var posZAxisHelper = new THREE.Sprite( new THREE.SpriteMaterial( { map: generateTexture( '#0000ff', 'Z' ) } ) ); - var negXAxisHelper = new THREE.Sprite( new THREE.SpriteMaterial( { map: generateTexture( '#ff0000' ) } ) ); - var negYAxisHelper = new THREE.Sprite( new THREE.SpriteMaterial( { map: generateTexture( '#00ff00' ) } ) ); - var negZAxisHelper = new THREE.Sprite( new THREE.SpriteMaterial( { map: generateTexture( '#0000ff' ) } ) ); + var posXAxisHelper = new THREE.Sprite( new THREE.SpriteMaterial( { map: generateTexture( '#ff0000', 'X' ), toneMapped: false } ) ); + var posYAxisHelper = new THREE.Sprite( new THREE.SpriteMaterial( { map: generateTexture( '#00ff00', 'Y' ), toneMapped: false } ) ); + var posZAxisHelper = new THREE.Sprite( new THREE.SpriteMaterial( { map: generateTexture( '#0000ff', 'Z' ), toneMapped: false } ) ); + var negXAxisHelper = new THREE.Sprite( new THREE.SpriteMaterial( { map: generateTexture( '#ff0000' ), toneMapped: false } ) ); + var negYAxisHelper = new THREE.Sprite( new THREE.SpriteMaterial( { map: generateTexture( '#00ff00' ), toneMapped: false } ) ); + var negZAxisHelper = new THREE.Sprite( new THREE.SpriteMaterial( { map: generateTexture( '#0000ff' ), toneMapped: false } ) ); posXAxisHelper.position.x = 1; posYAxisHelper.position.y = 1; From dd6cd1f37c15d33785121a6448708fa2848d7f7b Mon Sep 17 00:00:00 2001 From: Mugen87 Date: Wed, 1 Jul 2020 15:36:03 +0200 Subject: [PATCH 4/4] ViewHelper: Optimize resolution of canvas texture. --- editor/js/Viewport.ViewHelper.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/editor/js/Viewport.ViewHelper.js b/editor/js/Viewport.ViewHelper.js index 9af33723b6ddaa..06aa99ab6688f2 100644 --- a/editor/js/Viewport.ViewHelper.js +++ b/editor/js/Viewport.ViewHelper.js @@ -102,22 +102,22 @@ function ViewHelper() { function generateTexture( color, text = null ) { var canvas = document.createElement( 'canvas' ); - canvas.width = 128; - canvas.height = 128; + canvas.width = 64; + canvas.height = 64; var context = canvas.getContext( '2d' ); context.beginPath(); - context.arc( 64, 64, 32, 0, 2 * Math.PI ); + context.arc( 32, 32, 16, 0, 2 * Math.PI ); context.closePath(); context.fillStyle = color; context.fill(); if ( text !== null ) { - context.font = '48px Arial'; + context.font = '24px Arial'; context.textAlign = 'center'; context.fillStyle = '#000000'; - context.fillText( text, 64, 84 ); + context.fillText( text, 32, 41 ); }