Sending the position and orientation to the client to handle the processing hadn’t occurred to me before, and it makes a lot of sense. Thank you very much for your help, this has been a very enjoyable conversation.
As an example, here are two images from my recent games that I’m currently working on converting to online:
I am working on Multiplayer version for Sketchbook v0.4 it has finished about 80%. I completed syncing for both cannon-es body(position, orientation) and three.js model(position, orientation, animations), but while entering and exiting the vehicle few times its getting out of sync.
Check Source files at tkkaushik369/socketControl
can you make another map which is a stadium and above it there is a fighter jet?
can you also make a plane race
You should add a ragdoll mode!
To Sketchbook, I mean.
I can’t wait to see new updates! if I knew if I could rate this, it would be 10/10.
Honestly we should add Xbox/PlayStation controller use
Multiplayer and to buy it on steam for VR
There is a feature followmode in CameraController but its not ready yet once its done we can add controller input code and map it to controlls then we can use it. But for me it will take a while to work on it, I am currently working on migrating physics library cannon-es to rapier3d to improve performance. Problem is that I am struggling to make it work with electron forge(webpack-typescript boilerplate) and I could only manage the alternative rapier3d-compat version. I have modded the original webpack plugin to add target as node. If anybody want to work on it use this repo SocketControl
mines been doing this since last 10 ChromeOS updates
here is a solution
const path = require(‘path’);
module.exports = {
target: ‘electron-main’, // Target Electron’s main process
entry: ‘./src/main.ts’,
output: {
path: path.resolve(__dirname, ‘dist’),
filename: ‘main.js’,
},
resolve: {
fallback: {
“fs”: false, // If fs is required by any of the dependencies
“path”: require.resolve(“path-browserify”),
// Add more fallbacks as necessary
},
},
module: {
rules: [
{
test: /.ts$/,
use: ‘ts-loader’,
exclude: /node_modules/,
},
{
test: /.node$/,
use: ‘node-loader’, // Handle .node files (native bindings)
},
],
},
node: {
__dirname: false, // Ensure correct resolution of file paths in Node
__filename: false,
},
externals: [
// Electron native modules can be excluded from the bundle
‘electron’,
‘rapier3d’,
],
};
and for multiplayer For a simple multiplayer setup in your project, you can follow this high-level approach:
Socket.io connection to the server.socket.emit).socket.on to listen for updates from each player and socket.emit to send updated player positions to all clients.rapier3d), you can send forces/positions from the server to clients and let each client update its physics world based on the server’s state.
js
const express = require('express');
const http = require('http');
const socketIo = require('[socket.io](http://socket.io)');
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
let players = {};
io.on('connection', (socket) => {
console.log('a user connected:', socket.id);
// Create player on server
players[socket.id] = { x: 0, y: 0, z: 0 };
// Broadcast player positions to all clients
socket.on('playerMove', (position) => {
players[socket.id] = position;
io.emit('updatePlayers', players);
});
// Clean up on disconnect
socket.on('disconnect', () => {
console.log('user disconnected:', socket.id);
delete players[socket.id];
io.emit('updatePlayers', players);
});
});
server.listen(3000, () => {
console.log('Server running on [http://localhost:3000](http://localhost:3000)');
});
js
import * as THREE from 'three';
import io from 'socket.io-client';
// Connect to the server
const socket = io('[http://localhost:3000](http://localhost:3000)');
// Create basic scene
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Create player object (for simplicity, just a cube)
const playerGeometry = new THREE.BoxGeometry();
const playerMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const player = new THREE.Mesh(playerGeometry, playerMaterial);
scene.add(player);
// Handle player movement
let playerPosition = { x: 0, y: 0, z: 0 };
document.addEventListener('keydown', (event) => {
if (event.key === 'ArrowUp') playerPosition.z -= 0.1;
if (event.key === 'ArrowDown') playerPosition.z += 0.1;
if (event.key === 'ArrowLeft') playerPosition.x -= 0.1;
if (event.key === 'ArrowRight') playerPosition.x += 0.1;
// Send the updated position to the server
socket.emit('playerMove', playerPosition);
});
// Listen for updates from the server
socket.on('updatePlayers', (players) => {
// For simplicity, just update the position of the local player
player.position.set(playerPosition.x, playerPosition.y, playerPosition.z);
// (Optionally, you could add other players as objects in the scene here)
});
// Animation loop
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
This basic solution lets you start with simple multiplayer movement, and you can expand it to handle more complex interactions like physics, combat, or chat.
In regard to deterministic physics, there must be a workflow to export baked destruction… basically a precomputed BVH map. Nodes in Unity (5-ish) introduced this for geometry/materials.
Metaverse chains explore “honest” probabilistic rollups, with penalties incurred for bad calculations (AIMD in traditional network terms). Metaverse has propelled verifiable physics outcomes of varying precision. These RT prompts affect critical automotive and industrial applications.
Is there a high-level library or working group that defines how collisions are performant by speculation? Maybe just a nice diagram or glossary.
k thanks for the heads up
