Skip to content

Commit

Permalink
feat(audio): move audio to @orillusion/media-extension
Browse files Browse the repository at this point in the history
add audio samples
  • Loading branch information
lslzl3000 committed Sep 15, 2023
1 parent e59bd9f commit 166d286
Show file tree
Hide file tree
Showing 8 changed files with 260 additions and 28 deletions.
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ComponentBase } from '../ComponentBase';
import { ComponentBase } from '@orillusion/core';

/**
* Audio Listener
Expand All @@ -14,9 +14,6 @@ export class AudioListener extends ComponentBase {
this.context = new AudioContext();
this.gain = this.context.createGain();
this.gain.connect(this.context.destination);
}
public start() {

}
public onUpdate() {
if (!this.context) {
Expand Down Expand Up @@ -45,7 +42,6 @@ export class AudioListener extends ComponentBase {
listener.setOrientation(_orientation.x, _orientation.y, _orientation.z, up.x, up.y, up.z);
}
}

destroy() {
this.gain.disconnect();
this.context.close();
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
import { Object3D } from '../../core/entities/Object3D';
import { UnLitMaterial } from '../../materials/UnLitMaterial';
import { Color } from '../../math/Color';
import { Vector3 } from '../../math/Vector3';
import { BoxGeometry } from '../../shape/BoxGeometry';
import { MeshRenderer } from '../renderer/MeshRenderer';
import { BoxGeometry, Color, MeshRenderer, Object3D, UnLitMaterial, Vector3 } from '@orillusion/core';
import { AudioListener } from './AudioListener';
import { StaticAudio } from './StaticAudio';
/**
Expand All @@ -20,8 +15,8 @@ export class PositionAudio extends StaticAudio {
constructor() {
super();
}
public setLister(listener: AudioListener): this {
super.setLister(listener);
public setLisenter(listener: AudioListener): this {
super.setLisenter(listener);
this.panner = this.context?.createPanner() as PannerNode;
this.panner.panningModel = 'HRTF';
this.panner.connect(this.gainNode as GainNode);
Expand All @@ -41,7 +36,6 @@ export class PositionAudio extends StaticAudio {
let refLength = this.panner.refDistance;
let maxLength = this.panner.maxDistance;
let box = new BoxGeometry(1, 1, 1);

let m1 = new UnLitMaterial();
m1.baseColor = new Color(1, 0, 0);
let m2 = new UnLitMaterial();
Expand All @@ -50,6 +44,7 @@ export class PositionAudio extends StaticAudio {
m3.baseColor = new Color(0, 1, 0);
let m4 = new UnLitMaterial();
m4.baseColor = new Color(1, 1, 0);

for (let i = 0; i < this._step; i++) {
let group = new Object3D();
let angle = (i * outerAngle) / (this._step - 1);
Expand Down Expand Up @@ -83,10 +78,10 @@ export class PositionAudio extends StaticAudio {
}
public hideHelper() {
this._helper = false;
for (let l of this._lines) {
l.removeAllChild();
l.removeFromParent();
l.destroy();
for(let g of this._lines){
while(g.entityChildren.length > 0)
g.entityChildren[0].destroy()
g.destroy()
}
this._lines.length = 0;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ComponentBase } from '../ComponentBase';
import { ComponentBase } from '@orillusion/core';
import { AudioListener } from './AudioListener';
/**
* Static audio component, volume level does not vary depending on the position of the monitor
Expand All @@ -20,7 +20,7 @@ export class StaticAudio extends ComponentBase {
constructor() {
super();
}
public setLister(listener: AudioListener): this {
public setLisenter(listener: AudioListener): this {
this.listener = listener;
this.context = listener.context as AudioContext;
this.gainNode = this.context.createGain();
Expand Down Expand Up @@ -103,9 +103,6 @@ export class StaticAudio extends ComponentBase {
protected connect() {
this.source?.connect(this.gainNode as GainNode);
}
public onUpdate() {
super.onUpdate();
}
public destroy(force?: boolean) {
this.stop();
this.gainNode?.disconnect();
Expand Down
5 changes: 4 additions & 1 deletion packages/media-extention/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,8 @@ import { ChromaKeyMaterial } from './ChromaKeyMaterial'
import { ImageMaterial } from './ImageMaterial'
import { VideoMaterial } from './VideoMaterial'
import { VideoTexture } from './VideoTexture'
import { AudioListener } from './AudioListener'
import { PositionAudio } from './PositionAudio'
import { StaticAudio } from './StaticAudio'

export {ChromaKeyMaterial, ImageMaterial, VideoMaterial, VideoTexture}
export {ChromaKeyMaterial, ImageMaterial, VideoMaterial, VideoTexture, AudioListener, StaticAudio, PositionAudio}
2 changes: 1 addition & 1 deletion packages/media-extention/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@orillusion/media-extention",
"version": "0.2.3",
"version": "0.3.1",
"author": "Orillusion",
"description": "Orillusion Media Material Extention",
"main": "./dist/media.umd.js",
Expand Down
139 changes: 139 additions & 0 deletions samples/audio/Sample_DynamicAudio.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
import { BoxGeometry, Camera3D, DirectLight, Engine3D, LitMaterial, KelvinUtil, MeshRenderer, Object3D, Scene3D, Vector3, Color, OrbitController, View3D, AtmosphericComponent } from '@orillusion/core';
import { PositionAudio, AudioListener } from '@orillusion/media-extention'
import { GUIHelp } from '@orillusion/debug/GUIHelp';

export class Static_Audio {
lightObj: Object3D;
scene: Scene3D;
camera: Object3D
mats: any[];
audio: PositionAudio
private a = 40
private b = 80
private angle = 0
constructor() {}

async run() {
Engine3D.setting.shadow.autoUpdate = true;
Engine3D.setting.shadow.updateFrameRate = 1;
Engine3D.setting.shadow.type = 'HARD';
Engine3D.setting.shadow.shadowBound = 100;

await Engine3D.init({
renderLoop: this.loop.bind(this)
});
this.scene = new Scene3D();
this.scene.addComponent(AtmosphericComponent);

this.camera = new Object3D()
this.camera.localPosition = new Vector3(0, 20, 50)
let mainCamera = this.camera.addComponent(Camera3D)
this.scene.addChild(this.camera)

mainCamera.perspective(60, Engine3D.aspect, 0.1, 20000.0);
let orbit = this.camera.addComponent(OrbitController)
orbit.target = new Vector3(0, 4, 0)
orbit.minDistance = 10
orbit.maxDistance = 200

let view = new View3D();
view.scene = this.scene;
view.camera = mainCamera;

Engine3D.startRenderView(view);
await this.initScene();
}

async initScene() {
{
let [speaker, man, music] = await Promise.all([
Engine3D.res.loadGltf('gltfs/speaker/scene.gltf'),
Engine3D.res.loadGltf('gltfs/glb/CesiumMan.glb'),
fetch('https://cdn.orillusion.com/audio.ogg').then(res=>res.arrayBuffer())
])
speaker.localScale.set(4,4,4)
speaker.rotationX = -120
speaker.y = 0.5
let group = new Object3D()
group.addChild(speaker)
group.y = 2
this.scene.addChild(group)

man.name = 'man'
man.scaleX = 10;
man.scaleY = 10;
man.scaleZ = 10;
man.rotationX = -90;
man.rotationY = -90
man.localPosition.set(0, 0.5, 30)
this.scene.addChild(man)

let listener = man.addComponent(AudioListener)
let audio = group.addComponent(PositionAudio)
audio.setLisenter(listener)
await audio.loadBuffer(music)
audio.refDistance = 10;
audio.maxDistance = 100;
audio.setDirectionalCone( 180, 230, 0.1 );
audio.showHelper()

GUIHelp.init();
GUIHelp.addButton('play', ()=>{
audio.play()
})
GUIHelp.addButton('pause', ()=>{
audio.pause()
})
GUIHelp.addButton('stop', ()=>{
audio.stop()
})
GUIHelp.add({volume:1}, 'volume', 0, 1, 0.01).onChange( (v:number) =>{
audio.setVolume(v)
})
GUIHelp.addButton('Toggle Helper', ()=>{
audio.toggleHelper()
})
GUIHelp.open()
}
{
let wall = new Object3D()
let mr = wall.addComponent(MeshRenderer)
mr.geometry = new BoxGeometry(40, 30, 1)
let mat = new LitMaterial()
mat.baseColor = new Color(1,0,0)
mr.material = mat
this.scene.addChild(wall)
wall.z = -5
}
{
let floor = new Object3D();
let mr = floor.addComponent(MeshRenderer);
mr.geometry = new BoxGeometry(3000, 1, 3000);
let mat = new LitMaterial();
mr.material = mat;
this.scene.addChild(floor);
}

/******** light *******/
{
this.lightObj = new Object3D();
this.lightObj.rotationX = 35;
this.lightObj.rotationY = 110;
this.lightObj.rotationZ = 0;
let directLight = this.lightObj.addComponent(DirectLight);
directLight.lightColor = KelvinUtil.color_temperature_to_rgb(5355);
directLight.castShadow = true;
directLight.intensity = 30;
this.scene.addChild(this.lightObj);
}
}
loop(){
let man = this.scene.getChildByName('man') as Object3D
if(man){
this.angle += 0.005
man.x = this.a * Math.cos(this.angle)
man.z = this.b * Math.sin(this.angle) + 30
man.rotationY -= 0.005 * 180 / Math.PI
}
}
}
105 changes: 105 additions & 0 deletions samples/audio/Sample_StaticAudio.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
import { BoxGeometry, Camera3D, DirectLight, Engine3D, LitMaterial, KelvinUtil, MeshRenderer, Object3D, Scene3D, Vector3, Color, OrbitController, View3D, AtmosphericComponent } from '@orillusion/core';
import { StaticAudio, AudioListener } from '@orillusion/media-extention'
import { GUIHelp } from '@orillusion/debug/GUIHelp';

export class Static_Audio {
lightObj: Object3D;
scene: Scene3D;
camera: Object3D
mats: any[];
audio: StaticAudio
constructor() {}

async run() {
Engine3D.setting.shadow.autoUpdate = true;
Engine3D.setting.shadow.updateFrameRate = 1;
Engine3D.setting.shadow.type = 'HARD';
Engine3D.setting.shadow.shadowBound = 100;

await Engine3D.init();
this.scene = new Scene3D();
this.scene.addComponent(AtmosphericComponent);

this.camera = new Object3D()
this.camera.localPosition = new Vector3(0, 20, 50)
let mainCamera = this.camera.addComponent(Camera3D)
this.scene.addChild(this.camera)

mainCamera.perspective(60, Engine3D.aspect, 0.1, 20000.0);
let orbit = this.camera.addComponent(OrbitController)
orbit.target = new Vector3(0, 4, 0)
orbit.minDistance = 10
orbit.maxDistance = 200

let view = new View3D();
view.scene = this.scene;
view.camera = mainCamera;

Engine3D.startRenderView(view);
await this.initScene();
}

async initScene() {
{
let group = new Object3D()
let speaker = await Engine3D.res.loadGltf('gltfs/speaker/scene.gltf')
speaker.localScale.set(4,4,4)
speaker.rotationX = -120
//speaker.y = 1.5
group.addChild(speaker)
group.y = 2
this.scene.addChild(group)

let listener = this.camera.addComponent(AudioListener)
let audio = group.addComponent(StaticAudio)
audio.setLisenter(listener)

await audio.load('https://cdn.orillusion.com/audio.ogg')
GUIHelp.init();
GUIHelp.addButton('play', ()=>{
audio.play()
})
GUIHelp.addButton('pause', ()=>{
audio.pause()
})
GUIHelp.addButton('stop', ()=>{
audio.stop()
})
GUIHelp.add({volume:1}, 'volume', 0, 1, 0.01).onChange( (v:number) =>{
audio.setVolume(v)
})
GUIHelp.open()
}
{
let wall = new Object3D()
let mr = wall.addComponent(MeshRenderer)
mr.geometry = new BoxGeometry(40, 30, 1)
let mat = new LitMaterial()
mat.baseColor = new Color(1,0,0)
mr.material = mat
this.scene.addChild(wall)
wall.z = -5
}
{
let floor = new Object3D();
let mr = floor.addComponent(MeshRenderer);
mr.geometry = new BoxGeometry(3000, 1, 3000);
let mat = new LitMaterial();
mr.material = mat;
this.scene.addChild(floor);
}

/******** light *******/
{
this.lightObj = new Object3D();
this.lightObj.rotationX = 35;
this.lightObj.rotationY = 110;
this.lightObj.rotationZ = 0;
let directLight = this.lightObj.addComponent(DirectLight);
directLight.lightColor = KelvinUtil.color_temperature_to_rgb(5355);
directLight.castShadow = true;
directLight.intensity = 30;
this.scene.addChild(this.lightObj);
}
}
}
3 changes: 0 additions & 3 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -121,9 +121,6 @@ export * from "./components/anim/skeletonAnim/buffer/SkeletonBlendComputeArgs"
export * from "./components/anim/skeletonAnim/buffer/SkeletonTransformComputeArgs"
export * from "./components/anim/skeletonAnim/shader/compute_skeleton_blend"
export * from "./components/anim/skeletonAnim/shader/compute_skeleton_transform"
export * from "./components/audio/AudioListener"
export * from "./components/audio/PositionAudio"
export * from "./components/audio/StaticAudio"
export * from "./components/controller/CameraControllerBase"
export * from "./components/controller/FirstPersonCameraController"
export * from "./components/controller/FlyCameraController"
Expand Down

0 comments on commit 166d286

Please sign in to comment.