galacean/runtime-toolkit

Some out-of-the-box utility features based on the Galacean engine.

runtime-toolkit's Issues

Auxiliary lines should not cast shadows by default

Describe the bug
Auxiliary lines should not cast shadows by default

Gizmo rotation should not follow camera rotation, otherwise the user will confuse the color

Gizmo support more precise modification like fix rotation degree and snap

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

The bounding box of the auxiliary line is wrong.

The local bounding box is not initialized when the Mesh is initialized, so the auxiliary line cannot be seen when the camera does not contain the origin(0,0,0)

Infinity-grid support continous LOD

Wireframe for Character Controller

Redesign `FrameBufferPicker` with engine shader replace feature

• This API is not good!

• Redesign with engine 1.0 new fature

galacean/runtime#959

Rect Gizmo

Redesign `OrbitControl` API and add custom shortcut keys

When look from +y to -y, the control will automatically flip +x with -x

Control extension and customization

很多用户会基于官方的三个控制器（Control）来扩展更高级的业务定制控制器，希望能开放更多的 hook 供使用；比如希望根据当前旋转的角度来动态控制自转的速度（autoRotateSpeed）：

Control to rotate object

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Gizmo axes color doesn't align with world axis

green should be y axis.
However in playground:

and also in editor:

Refactor WireframeManager to LineDrawer

in Editor, the wireframe drawer should move into different editor components, which will call in onSceneGUI, it will be more easy to control the data modification and customization.

Light Wireframe size should always be the same

Is your feature request related to a problem? Please describe.
regardless of camera distance, the wireframe for light should always be the same on the screen

Add `CameraLineRenderer` for drawing auxiliary lines

Multi Item Selection

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

auxiliary-lines should always be at the top without being obscured

@oasis-engine-toolkit/stats 把 Core 模块也 export 一下

有些时候不需要 stats 面板，只是获取性能数据，只需要 Core。

Refactor Post-Process selected outline

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Create README in monorepo sub-package

Create README in monorepo sub-package which will sync into npm package

Add `ColliderLineRenderer` for drawing auxiliary lines

Auxiliary rendering for colliders.
For example StaticCollider, DynamicCollider

`atob` will throw error in mini program

Describe the bug

OrthoControl Optimize Experience

Describe the bug

1. pan action doesn't follow pointer well
2. zoom speed need to slow when zoom onto a smaller scale

Expected behavior
Optimize algorithm to enhance experience

Refactor Gizmo to support self-define control

now, Gizmo can control size, translation and rotation. Actually, these three is the basic of viewport manipulation. Gizmo can be refactor to control more paremeter like Collider size, waypoint, and event in CSG modelling mode.

Gizmo should consider to split these three, and make the control target can be self-defined.

Spring Bone

Use spherical joint to build high-level spring bone packages

OrbitControl 旋转的最后一帧会出现奇怪的旋转

复现方式：

1. 单指拖动 OrbitControl，再松开单指

Infinite grid

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Navigation gizmo

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

RFC: Navigation Gizmo

概要

拼装场景是编辑器的重要功能，除了在透视视角下进行，三视图必不可少。
对于web编辑器来说，除了使用通常的鼠标+键盘的组合控制场景相机，也应该有门槛更低、直观明了的方式控制场景相机，即直接操作可视化场景坐标轴。

功能

1. 可视化场景轴向
2. 点击轴点，视图变为相应三视图。比如，点击Y，转到顶视图
3. 可视化操控场景相机进行旋转

详细设计

形式

参考blender, xyz三轴，轴端为球状轴点。轴点有XYZ节点标识，文字始终大小方向一致。

交互

悬浮于区域，区域背景为圆形半透明白色。悬浮于轴点，文字变色。
点击轴点，旋转到对应三视图。
拖拽半透明白色区域，旋转场景相机，并变为透视。

使用

import { NavigationGizmo } from "oasis-engine-toolkit"
const navigationGizmo = rootEntity.addComponent(NavigationGizmo)
// 传入场景相机
navigationGizmo.camera = sceneCamera
// 设置图层，默认为Layer01
navigationGizmo.layer = Layer.Layer10
// 设置位置，默认为右上角(0.8, 0, 0.2, 0.2)
navigationGizmo.viewport(0.8, 0, 0.2, 0.2);

依赖

  "dependencies": {
    "oasis-engine",
    "@oasis-engine/physics-lite",
    "@tweenjs/tween.js",
  }

节点树

伪代码

class GizmoScript extends Script {
  constructor() {}
  onUpdate() {
    // 同步 navigationGzimoEntity 和 sceneCameraEntity 的 rotation
  }
}

class SphereScript extends Script {
  constructor() {}
  onPointerEnter() {
    // 出现半透明背景
  }
  onPointerExit() {
    // 消失半透明背景
  }
  onPointerDown() {
    // 变为透视相机
    // 记录初始位置  this.startQuat = ...
    // 获得初始点  this.startPoint = this._getHitPoint()
  }
  onPointerDrag() {
    // 获得转动过程中的点
    this.movePoint = this._getHitPoint();
    // 转过的角度
    const quat = this._getRadian(this.startPoint, this.movePoint);
    // 同步navigationGizmoEntity 的 rotation
  }
  onPointerUp() {
    // 停止转动
  }
  _getHitPoint() {
    // 计算当前点位置
  }
  _getRadian() {
    // 计算空间中两向量夹角
  }
}

class EndScript extends Script {
  constructor() {}
  onPointerEnter() {
    //  文字变色
  }
  onPointerExit() {
    //  文字颜色恢复
  }
  onPointerClick() {
    //  转到相应的视图
  }
  _cameraTween() {
    // 相机转动缓动动画
  }
}

Joystick control

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

WireFrame color Config

Add `LightLineRenderer` for drawing auxiliary lines

Tumbnail feat

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Rewrite FrameBufferPicker

Add new API to replace material's shader and rewrite FrameBufferPicker

Add arrow wireframe for PlaneColliderShaoe

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Infinity grid不显示。

Infinity grid不显示。
复制官方示例，同样不显示grid。

这是我运行的

这是官方的示例效果

这是我的代码

<template>
	<canvas id="canvas" style="width:500px;height:500px"></canvas>
</template>
<script setup>
import { Camera, WebGLEngine, Vector3 } from "oasis-engine";
import { OrbitControl, GridControl } from "oasis-engine-toolkit";
import {onMounted} from 'vue'
onMounted(() => {
	const engine = new WebGLEngine("canvas");
	engine.canvas.resizeByClientSize();
	engine.sceneManager.activeScene.ambientLight.diffuseSolidColor.set(1,1,1,1);

	const rootEntity = engine.sceneManager.activeScene.createRootEntity();

	const cameraEntity = rootEntity.createChild("camera");
	const camera = cameraEntity.addComponent(Camera);
	cameraEntity.transform.setPosition(6, 6, 6);
	cameraEntity.transform.lookAt(new Vector3());
	cameraEntity.addComponent(OrbitControl);
        
        //无效
	const grid = rootEntity.addComponent(GridControl);
	grid.camera = camera;

	engine.resourceManager
		.load(
			"https://gw.alipayobjects.com/os/OasisHub/267000040/9994/%25E5%25BD%2592%25E6%25A1%25A3.gltf"
		)
		.then((gltf) => {
			rootEntity.addChild(gltf.defaultSceneRoot);
		});

	engine.run();
});
</script>

Gizmo support modify translation, rotation and scale in the same time

Just a Test

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

A better way of free rotate.

当前依据 x 和 y 的移动分量实现，可以考虑换个参考轴使表现更自然。

Snapshot for Differerent Assets

Add a snapshot function to generate HTMLImageElement for preview

function snapshot(asset: Asset, engine: Engine): Promise<HTMLImageElement>;

For Asset, there are serveral types need support:

• Material
• Texture
• Entity
• Sprite

add tolerance protection in infinity grid when camera is aligned on axis

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Outline main selected Entity and children use different color

OribitControll add focus and rotation base camera position

[Stats] render the stats data without DOM

Is your feature request related to a problem? Please describe.
Stats toolkit can't work in miniprogram because it renders data with DOM API.

Describe the solution you'd like
Maybe we can solve the problem if we use engine's build-in API such as TextRenderer feature.

Redesign `GizmoRenderer` for translate、rotate、scale.

Not Found - GET http://registry.npm.alibaba-inc.com/oasis-engine-tookit - [not_found] document not found

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. nvm use 16.10.0
2. yarn create @umijs/umi-app
3. yarn
4. npm i oasis-engine-tookit --save

Screenshots

Desktop (please complete the following information):

• OS: macOS Apple M1
• Browser [e.g. chrome, safari] chrome
• Version [e.g. 22]: 11.6

OrbitControl 点击触发旋转

在react strict模式下使用useEffect的方式初始化引擎及场景，导致orbitControl在pad模式下单点点击便造成rotate

OrbitControl鼠标左键移动没反应

官网的例子原封不动的复制粘贴过来。鼠标左键按住拖拽都没反应。同事苹果电脑没问题。是不兼容window吗？
import { OrbitControl } from "@oasis-engine/controls";
import { Camera, GLTFResource, WebGLEngine } from "oasis-engine";

const engine = new WebGLEngine("canvas");
engine.canvas.resizeByClientSize();

const rootEntity = engine.sceneManager.activeScene.createRootEntity();

const cameraEntity = rootEntity.createChild("camera");
cameraEntity.addComponent(Camera);
cameraEntity.transform.setPosition(3, 3, 3);
cameraEntity.addComponent(OrbitControl);

engine.sceneManager.activeScene.ambientLight.diffuseSolidColor.setValue(1, 1, 1, 1);

engine.resourceManager
.load("https://gw.alipayobjects.com/os/OasisHub/267000040/9994/%25E5%25BD%2592%25E6%25A1%25A3.gltf")
.then((gltf) => {
rootEntity.addChild(gltf.defaultSceneRoot);
});

engine.run();

Add `IconRenderer` for drawing auxiliary icon.

Auxiliary icon for invisible object.
For example DirectionalLight, PointLight.