ccaven / classroom3d Goto Github PK

Some ideas;
Canvas-based, with undo?
Approximate strokes as Bézier curves?
Keep pointer locked, instead movements of mouse correspond to movements of the canvas
Keyboard shortcuts for colors?

Currently, remoteStreams are directly connected to audioContext.destination.

Instead, retry Three.js PositionalAudio along with a fix to #1

• Listen for WASD key events
• Remove OrbitControls, and move PerspectiveCamera into Player component

See: https://stackoverflow.com/questions/41784137/webrtc-doesnt-work-with-audiocontext

Fix: add/remove muted audio elements along with MediaConnection objects

Note: clearly document in case the underlying Chrome bug is fixed / changed

Todo: search for CanvasRenderingContext2D user interface components library for Svelte

For example: svelte-konva

Use $velocity property to guess more accurately where the connected user is - important for high-latency users

Key idea:

1. Manage all WebRTC logic from inside one component (e.g. <Whiteboard/>
2. Standardize the "Press E to interact" hint (possibly in a <InteractionHint/>
3. Can constantly un-locking the pointer be avoided? For example, the Whiteboard could move from side to side underneath your cursor, instead of you moving your mouse / view.
4. Standardize using svelte/motion to interpolate network events (like in OnlinePlayer.svelte)

Mainly for position updates: only send when the current position is different than the last sent position.

Also: make payload items optional (e.g. only send direction change if needed)

Includes: 3D model to represent view vector of the online player

Needed for #12 - in order to have generic interactive elements, the pointer lock / camera position needs to be flexible.

Brainstorm on what kinds of skyboxes would best support the purpose.

For example:

• Simple star field (for space-themed space)
• Cartoon clouds (for sky-themed space)
• Infinite pit / simple gradient?

The HTML component in Threlte is great for the integration. However, how can we sync graphs across users?
Idea: use Desmos API (use dev api key, then apply for a real api key)
May need to change some tsconfig settings because Desmos npm package doesn't have any types!