-
-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #708 from vcync/next
Release
- Loading branch information
Showing
10 changed files
with
404 additions
and
88 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| import store from "../worker/store"; | ||
| import * as THREE from "three/build/three.module.js"; | ||
|
|
||
| const threeCanvas = new OffscreenCanvas(300, 300); | ||
| const threeContext = threeCanvas.getContext("webgl2", { | ||
| antialias: true, | ||
| desynchronized: true, | ||
| powerPreference: "high-performance", | ||
| premultipliedAlpha: false | ||
| }); | ||
|
|
||
| store.dispatch("outputs/addAuxillaryOutput", { | ||
| name: "three-buffer", | ||
| context: threeContext, | ||
| group: "buffer" | ||
| }); | ||
|
|
||
| const renderer = new THREE.WebGLRenderer({ | ||
| alpha: true, | ||
| antialias: true, | ||
| canvas: threeCanvas | ||
| }); | ||
| renderer.setPixelRatio(1); | ||
|
|
||
| const inputTextureCanvas = new OffscreenCanvas(300, 300); | ||
| const inputTextureContext = inputTextureCanvas.getContext("2d"); | ||
| store.dispatch("outputs/addAuxillaryOutput", { | ||
| name: "three-inputTexture-buffer", | ||
| context: inputTextureContext, | ||
| group: "buffer" | ||
| }); | ||
|
|
||
| const inputTexture = new THREE.CanvasTexture(inputTextureCanvas); | ||
|
|
||
| /** | ||
| * Called each frame to update the Module | ||
| * @param {Object} Module A three Module | ||
| * @param {HTMLCanvas} canvas The Canvas to draw to | ||
| * @param {WebGL2RenderingContext} context The Context of the Canvas | ||
| * @param {HTMLVideoElement} video The video stream requested by modV | ||
| * @param {Array<MeydaFeatures>} features Requested Meyda features | ||
| * @param {Meyda} meyda The Meyda instance | ||
| * (for Windowing functions etc.) | ||
| * | ||
| * @param {DOMHighResTimeStamp} delta Timestamp returned by requestAnimationFrame | ||
| * @param {Number} bpm The detected or tapped BPM | ||
| * @param {Boolean} kick Indicates if BeatDetektor detected a kick in | ||
| * the audio stream | ||
| */ | ||
| function render({ | ||
| module, | ||
| canvas, | ||
| context, | ||
| video, | ||
| features, | ||
| meyda, | ||
| delta, | ||
| bpm, | ||
| kick, | ||
| props, | ||
| data, | ||
| fftCanvas, | ||
| pipeline | ||
| }) { | ||
| inputTextureContext.drawImage(canvas, 0, 0, canvas.width, canvas.height); | ||
| inputTexture.image = inputTextureCanvas.transferToImageBitmap(); | ||
| inputTexture.needsUpdate = true; | ||
|
|
||
| const { scene, camera } = module.draw({ | ||
| THREE, | ||
| inputTexture, | ||
| canvas, | ||
| video, | ||
| features, | ||
| meyda, | ||
| delta, | ||
| bpm, | ||
| kick, | ||
| props, | ||
| data, | ||
| fftCanvas | ||
| }); | ||
|
|
||
| renderer.render(scene, camera); | ||
|
|
||
| // clear context if we're in pipeline mode | ||
| if (pipeline) { | ||
| context.clearRect(0, 0, canvas.width, canvas.height); | ||
| } | ||
|
|
||
| // Copy three Canvas to Main Canvas | ||
| context.drawImage(threeCanvas, 0, 0, canvas.width, canvas.height); | ||
| } | ||
|
|
||
| function setupModule(module) { | ||
| const moduleData = module.setupThree({ | ||
| THREE, | ||
| inputTexture, | ||
| data: module.data || {}, | ||
| width: renderer.domElement.width, | ||
| height: renderer.domElement.height | ||
| }); | ||
|
|
||
| module.data = moduleData; | ||
|
|
||
| return module; | ||
| } | ||
|
|
||
| function resize({ width, height }) { | ||
| inputTextureCanvas.width = width; | ||
| inputTextureCanvas.height = height; | ||
| renderer.setSize(width, height, false); | ||
| } | ||
|
|
||
| export default { render, resize, setupModule }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| export default { | ||
| meta: { | ||
| name: "Cube", | ||
| author: "2xAA", | ||
| type: "three" | ||
| }, | ||
|
|
||
| props: { | ||
| rotation: { | ||
| type: "vec3", | ||
| default: [0, 0, 0], | ||
| min: 0, | ||
| max: 1 | ||
| }, | ||
|
|
||
| scale: { | ||
| type: "vec3", | ||
| default: [1, 1, 1], | ||
| min: 0, | ||
| max: 1 | ||
| }, | ||
|
|
||
| position: { | ||
| type: "vec3", | ||
| default: [0, 0, 0], | ||
| min: 0, | ||
| max: 1 | ||
| }, | ||
|
|
||
| color: { | ||
| type: "color", | ||
| default: { | ||
| r: 1, | ||
| g: 1, | ||
| b: 1, | ||
| a: 1 | ||
| } | ||
| }, | ||
|
|
||
| useMap: { | ||
| type: "bool", | ||
| default: false | ||
| } | ||
| }, | ||
|
|
||
| data: { | ||
| camera: null, | ||
| scene: null, | ||
| cubeMesh: null | ||
| }, | ||
|
|
||
| setupThree({ THREE, data, width, height, inputTexture }) { | ||
| const camera = new THREE.PerspectiveCamera(40, width / height, 1, 1000); | ||
| camera.position.z = 5; | ||
|
|
||
| const scene = new THREE.Scene(); | ||
| scene.background = null; | ||
|
|
||
| const light = new THREE.AmbientLight(0xffffff); | ||
| scene.add(light); | ||
|
|
||
| const pointLight = new THREE.PointLight(0xffffff, 1, 100); | ||
| pointLight.position.set(50, 50, 50); | ||
| scene.add(pointLight); | ||
|
|
||
| const geometry = new THREE.BoxGeometry(1, 1, 1); | ||
| const material = new THREE.MeshStandardMaterial({ | ||
| color: "#ffffff", | ||
| roughness: 0.351, | ||
| map: inputTexture | ||
| }); | ||
| const cubeMesh = new THREE.Mesh(geometry, material); | ||
|
|
||
| scene.add(cubeMesh); | ||
|
|
||
| return { ...data, camera, scene, cubeMesh }; | ||
| }, | ||
|
|
||
| resize({ canvas: { width, height }, data }) { | ||
| data.camera.aspect = width / height; | ||
| data.camera.updateProjectionMatrix(); | ||
|
|
||
| return { ...data }; | ||
| }, | ||
|
|
||
| draw({ | ||
| THREE, | ||
| data, | ||
| data: { scene, camera }, | ||
| props: { | ||
| scale, | ||
| position, | ||
| rotation, | ||
| color: { r, g, b }, | ||
| useMap | ||
| }, | ||
| inputTexture | ||
| }) { | ||
| data.cubeMesh.position.x = position[0]; | ||
| data.cubeMesh.position.y = position[1]; | ||
| data.cubeMesh.position.z = position[2]; | ||
|
|
||
| data.cubeMesh.scale.x = scale[0]; | ||
| data.cubeMesh.scale.y = scale[1]; | ||
| data.cubeMesh.scale.z = scale[2]; | ||
|
|
||
| data.cubeMesh.rotation.x = rotation[0] * 360 * THREE.Math.DEG2RAD; | ||
| data.cubeMesh.rotation.y = rotation[1] * 360 * THREE.Math.DEG2RAD; | ||
| data.cubeMesh.rotation.z = rotation[2] * 360 * THREE.Math.DEG2RAD; | ||
|
|
||
| if (useMap && !data.cubeMesh.material.map) { | ||
| data.cubeMesh.material.map = inputTexture; | ||
| data.cubeMesh.material.needsUpdate = true; | ||
| } else if (!useMap && data.cubeMesh.material.map) { | ||
| data.cubeMesh.material.map = undefined; | ||
| data.cubeMesh.material.needsUpdate = true; | ||
| } | ||
|
|
||
| data.cubeMesh.material.color.r = r; | ||
| data.cubeMesh.material.color.g = g; | ||
| data.cubeMesh.material.color.b = b; | ||
|
|
||
| return { scene, camera }; | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.