🤖 Adds 3D model view

This commit is contained in:
Rune Harlyk
2023-07-18 17:47:49 +02:00
parent e34c719a86
commit c8ee581715
8 changed files with 479 additions and 6 deletions
+7
View File
@@ -4,4 +4,11 @@
},
"editor.tabSize": 4,
"editor.detectIndentation": false,
"cmake.sourceDirectory": "C:/data/repos/Hardware/Spot Micro - Leika/.pio/libdeps/esp32cam/esp32-camera",
"cSpell.words": [
"lerp",
"URDF",
"uzip",
"xacro"
]
}
+310
View File
@@ -0,0 +1,310 @@
<?xml version="1.0"?>
<robot xmlns:xacro="http://www.ros.org/wiki/xacro" name="spot_micro_rviz">
<material name="white">
<color rgba="1 1 1 1"/>
</material>
<material name="black">
<color rgba="0.1 0.1 0.1 1"/>
</material>
<material name="blue">
<color rgba="0 0.75 1 1"/>
</material>
<!-- Params -->
<xacro:property name="body_length" value="0.140" />
<xacro:property name="body_width" value="0.110" />
<xacro:property name="body_height" value="0.070" />
<xacro:property name="front_length" value="0.058" />
<xacro:property name="rear_length" value="0.040" />
<xacro:property name="shoulder_length" value="0.044" />
<xacro:property name="shoulder_width" value="0.038" />
<xacro:property name="leg_length" value="0.1075" />
<xacro:property name="foot_length" value="0.130" />
<xacro:property name="toe_radius" value="0.020" />
<!-- <xacro:property name="toe_radius" value="0.014" /> -->
<xacro:property name="toe_width" value="0.020" />
<xacro:property name="shift" value="0.055" />
<xacro:property name="shiftx" value="0.093" />
<xacro:property name="shifty" value="0.039" />
<!-- Macros -->
<xacro:macro name="gen_shoulder" params="name left">
<link name="${name}">
<visual>
<xacro:if value="${left}">
<geometry>
<mesh filename="package://stl/lshoulder.stl" scale="0.001 0.001 0.001"/>
</geometry>
<origin rpy="0 0 3.14159" xyz="0.135 0.015 -0.01"/>
</xacro:if>
<xacro:unless value="${left}">
<geometry>
<mesh filename="package://stl/rshoulder.stl" scale="0.001 0.001 0.001"/>
</geometry>
<origin rpy="0 0 3.14159" xyz="0.135 0.095 -0.01"/>
</xacro:unless>
<material name="black"/>
</visual>
<collision>
<geometry>
<box size="${shoulder_length} ${shoulder_width} ${body_height}"/>
</geometry>
<origin rpy="0 0 0" xyz="0 0 0"/>
</collision>
<inertial>
<mass value="0.10"/>
<inertia ixx="100" ixy="0" ixz="0" iyy="100" iyz="0" izz="100" />
</inertial>
</link>
</xacro:macro>
<xacro:macro name="gen_shoulder_joint" params="pos shiftx shifty">
<joint name="${pos}_shoulder" type="revolute">
<parent link="base_link"/>
<child link="${pos}_shoulder_link"/>
<axis xyz="1 0 0"/>
<origin rpy="0 0 0" xyz="${shiftx} ${shifty} 0"/>
<limit effort="1000.0" lower="-0.548" upper="0.548" velocity="0.7"/>
<dynamics damping="0.0" friction="0.5"/>
</joint>
</xacro:macro>
<xacro:macro name="gen_leg" params="name left">
<link name="${name}_cover">
<visual>
<xacro:if value="${left}">
<geometry>
<mesh filename="package://stl/larm_cover.stl" scale="0.001 0.001 0.001"/>
</geometry>
<origin rpy="0 -0.139 3.14159" xyz="0.130 -0.040 -0.025"/>
</xacro:if>
<xacro:unless value="${left}">
<geometry>
<mesh filename="package://stl/rarm_cover.stl" scale="0.001 0.001 0.001"/>
</geometry>
<origin rpy="0 -0.139 3.14159" xyz="0.130 0.15 -0.025"/>
</xacro:unless>
<material name="white"/>
</visual>
</link>
<link name="${name}">
<visual>
<xacro:if value="${left}">
<geometry>
<mesh filename="package://stl/larm.stl" scale="0.001 0.001 0.001"/>
</geometry>
<origin rpy="0 -0.139 3.14159" xyz="0.130 -0.040 -0.025"/>
</xacro:if>
<xacro:unless value="${left}">
<geometry>
<mesh filename="package://stl/rarm.stl" scale="0.001 0.001 0.001"/>
</geometry>
<origin rpy="0 -0.139 3.14159" xyz="0.130 0.15 -0.025"/>
</xacro:unless>
<material name="black"/>
<!-- <geometry>
<box size="0.028 0.036 ${leg_length}"/>
</geometry>
<origin rpy="0.0 0.0 0.0" xyz="0.0 0.0 -0.050"/>
<material name="white"/>-->
</visual>
<collision>
<origin rpy="0.0 0.0 0.0" xyz="0.0 0.0 -0.050"/>
<geometry>
<box size="0.028 0.036 ${leg_length}"/>
</geometry>
</collision>
<inertial>
<mass value="0.15"/>
<inertia ixx="1000" ixy="0" ixz="0" iyy="1000" iyz="0" izz="1000" />
</inertial>
</link>
</xacro:macro>
<xacro:macro name="gen_leg_joint" params="pos shift">
<joint name="${pos}_leg" type="revolute">
<parent link="${pos}_shoulder_link"/>
<child link="${pos}_leg_link"/>
<axis xyz="0 1 0"/>
<origin rpy="0 0 0" xyz="0 ${shift} 0"/>
<limit effort="1000.0" lower="-2.666" upper="1.548" velocity="0.5"/>
<dynamics damping="0.0" friction="0.0"/>
</joint>
<joint name="${pos}_leg_cover_joint" type="fixed">
<parent link="${pos}_leg_link"/>
<child link="${pos}_leg_link_cover"/>
<origin xyz="0 0 0"/>
</joint>
</xacro:macro>
<xacro:macro name="gen_foot" params="name left">
<link name="${name}">
<visual>
<xacro:if value="${left}">
<geometry>
<mesh filename="package://stl/lfoot.stl" scale="0.001 0.001 0.001"/>
</geometry>
<origin rpy="0 0 3.14159" xyz="0.120 -0.04 0.1"/>
</xacro:if>
<xacro:unless value="${left}">
<geometry>
<mesh filename="package://stl/rfoot.stl" scale="0.001 0.001 0.001"/>
</geometry>
<origin rpy="0 0 3.14159" xyz="0.120 0.15 0.1"/>
</xacro:unless>
<material name="black"/>
</visual>
<collision>
<geometry>
<box size="0.026 0.020 ${foot_length}"/>
</geometry>
<origin rpy="0.0 0.0 0.0" xyz="0.0 0.0 -0.050"/>
</collision>
<inertial>
<mass value="0.1"/>
<inertia ixx="1000" ixy="0" ixz="0" iyy="1000" iyz="0" izz="1000" />
</inertial>
</link>
</xacro:macro>
<xacro:macro name="gen_foot_joint" params="pos">
<joint name="${pos}_foot" type="revolute">
<parent link="${pos}_leg_link"/>
<child link="${pos}_foot_link"/>
<axis xyz="0 1 0"/>
<origin rpy="0 0 0" xyz="0 0 -${leg_length}"/>
<limit effort="1000.0" lower="-2.6" upper="0.1" velocity="0.5"/>
<dynamics damping="0.0" friction="0.5"/>
</joint>
</xacro:macro>
<xacro:macro name="gen_toe" params="name">
<link name="${name}">
<visual>
<geometry>
<mesh filename="package://stl/foot.stl" scale="0.001 0.001 0.001"/>
</geometry>
<origin rpy="0 -0.40010 3.14159" xyz="0.00 0.01 0.015"/>
<material name="blue"/>
</visual>
<collision>
<geometry>
<sphere radius="${toe_radius}" />
</geometry>
<origin rpy="0 0 0" xyz="0 0 ${toe_radius}"/>
<contact_coefficients mu="1.1" />
</collision>
<inertial>
<mass value="0.05"/>
<inertia ixx="1000" ixy="0" ixz="0" iyy="1000" iyz="0" izz="1000" />
</inertial>
</link>
</xacro:macro>
<xacro:macro name="gen_toe_joint" params="pos">
<joint name="${pos}_toe" type="fixed">
<parent link="${pos}_foot_link"/>
<child link="${pos}_toe_link"/>
<origin xyz="0 0 -${foot_length}"/>
</joint>
</xacro:macro>
<xacro:macro name="gen_full_leg_joint" params="pos shiftx shifty shift left">
<xacro:gen_shoulder name="${pos}_shoulder_link" left="${left}"/>
<xacro:gen_leg name="${pos}_leg_link" left="${left}"/>
<xacro:gen_foot name="${pos}_foot_link" left="${left}"/>
<xacro:gen_toe name="${pos}_toe_link"/>
<xacro:gen_shoulder_joint pos="${pos}" shiftx="${shiftx}" shifty="${shifty}"/>
<xacro:gen_leg_joint pos="${pos}" shift="${shift}"/>
<xacro:gen_foot_joint pos="${pos}"/>
<xacro:gen_toe_joint pos="${pos}"/>
</xacro:macro>
<!-- Robot Body -->
<link name="base_link">
<visual>
<geometry>
<mesh filename="package://stl/mainbody.stl" scale="0.001 0.001 0.001"/>
</geometry>
<material name="black"/>
<origin rpy="0 0 0" xyz="-0.042 -0.055 -0.010"/>
</visual>
<collision>
<geometry>
<box size="${body_length} ${body_width} ${body_height}"/>
</geometry>
<origin rpy="0 0 0" xyz="0 0 0"/>
</collision>
<inertial>
<mass value="2.80"/>
<inertia ixx="100" ixy="0" ixz="0" iyy="100" iyz="0" izz="100" />
</inertial>
</link>
<link name="rear_link">
<visual>
<geometry>
<mesh filename="package://stl/backpart.stl" scale="0.001 0.001 0.001"/>
</geometry>
<origin rpy="0 0 3.14159" xyz="0.04 0.055 -0.010"/>
<material name="white"/>
</visual>
<collision>
<geometry>
<box size="${rear_length} ${body_width} ${body_height}"/>
</geometry>
<origin rpy="0 0 0" xyz="0.135 0 0"/>
</collision>
<inertial>
<mass value="0.20"/>
<inertia ixx="100" ixy="0" ixz="0" iyy="100" iyz="0" izz="100" />
</inertial>
</link>
<joint name="base_rear" type="fixed">
<parent link="base_link"/>
<child link="rear_link"/>
</joint>
<link name="front_link">
<visual>
<geometry>
<mesh filename="package://stl/frontpart.stl" scale="0.001 0.001 0.001"/>
</geometry>
<origin rpy="0 0 3.14159" xyz="0.040 0.055 -0.010"/>
<material name="white"/>
</visual>
<collision>
<geometry>
<box size="${front_length} ${body_width} ${body_height}"/>
</geometry>
<origin rpy="0 0 0" xyz="-0.145 0 0"/>
</collision>
<inertial>
<mass value="0.20"/>
<inertia ixx="100" ixy="0" ixz="0" iyy="100" iyz="0" izz="100" />
</inertial>
</link>
<joint name="base_front" type="fixed">
<parent link="base_link"/>
<child link="front_link"/>
</joint>
<!-- create Legs -->
<xacro:gen_full_leg_joint pos="front_left" shiftx="${shiftx}" shifty="${shifty}" shift="${shift}" left="true"/>
<xacro:gen_full_leg_joint pos="front_right" shiftx="${shiftx}" shifty="-${shifty}" shift="-${shift}" left="false"/>
<xacro:gen_full_leg_joint pos="rear_left" shiftx="-${shiftx}" shifty="${shifty}" shift="${shift}" left="true"/>
<xacro:gen_full_leg_joint pos="rear_right" shiftx="-${shiftx}" shifty="-${shifty}" shift="-${shift}" left="false"/>
</robot>
Binary file not shown.
+11 -1
View File
@@ -12,13 +12,23 @@
export let url = window.location.pathname;
onMount(() => {
connect(`ws://${location}`);
registerFetchIntercept()
});
const registerFetchIntercept = () => {
const { fetch: originalFetch } = window;
window.fetch = async (...args) => {
const cache = await caches.open("files")
const [resource, config] = args;
return await cache.match(resource) ?? originalFetch(resource, config)
};
}
</script>
<Router {url}>
<TopBar />
<Sidebar />
<div class="absolute w-full h-full">
<div class="absolute w-full h-full bg-background text-on-background">
<Route path="/" component={Controller} />
<Route path="/config" component={Config} />
<Route path="/health" component={Health} />
+136
View File
@@ -0,0 +1,136 @@
<script lang="ts">
import { onMount } from 'svelte';
import {
WebGLRenderer,
PerspectiveCamera,
Scene,
Mesh,
PlaneGeometry,
ShadowMaterial,
DirectionalLight,
PCFSoftShadowMap,
sRGBEncoding,
AmbientLight,
MathUtils,
LoaderUtils
} from 'three';
import { XacroLoader } from 'xacro-parser';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import URDFLoader from 'urdf-loader';
import { servoBuffer } from '../../lib/socket'
import { lerp } from '../../lib/utils';
import uzip from 'uzip';
import { outControllerData } from '../../lib/store';
import { solve } from '../../lib/kinematics';
let el: HTMLCanvasElement;
let scene, camera, renderer, robot, controls;
let angles = new Int8Array(12)
const servoNames = [
"front_left_shoulder", "front_left_leg", "front_left_foot",
"front_right_shoulder", "front_right_leg", "front_right_foot",
"rear_left_shoulder", "rear_left_leg", "rear_left_foot",
"rear_right_shoulder", "rear_right_leg", "rear_right_foot"]
onMount(async () => {
await cacheModelFiles()
createScene()
});
const cacheModelFiles = async () => {
const cacheKey = "files"
const cache = await caches.open(cacheKey)
let data = await fetch("/stl.zip").then(data => data.arrayBuffer())
var files = uzip.parse(data);
for(const [path, data] of Object.entries(files) as [path:string, data:Uint8Array][]){
const url = new URL(path, window.location.href)
cache.put(url, new Response(data));
}
}
const loadModel = () => {
const url = '/spot_micro.urdf.xacro';
const xacroLoader = new XacroLoader();
xacroLoader.load( url, xml => {
const urdfLoader = new URDFLoader();
urdfLoader.workingPath = LoaderUtils.extractUrlBase( url );
robot = urdfLoader.parse( xml );
robot.rotation.x = Math.PI / 0.6666;
robot.rotation.z = Math.PI / 2;
robot.traverse(c => c.castShadow = true);
robot.updateMatrixWorld(true);
scene.add( robot );
}, (error) => console.log(error));
}
const createScene = () => {
scene = new Scene();
camera = new PerspectiveCamera();
camera.position.set(-0.5, 0.5, 1);
renderer = new WebGLRenderer({ antialias: true, canvas: el });
renderer.outputEncoding = sRGBEncoding;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
const directionalLight = new DirectionalLight(0xffffff, 1.0);
directionalLight.castShadow = true;
directionalLight.shadow.mapSize.setScalar(1024);
directionalLight.position.set(5, 30, 5);
scene.add(directionalLight);
const ambientLight = new AmbientLight(0xffffff, 0.2);
scene.add(ambientLight);
const ground = new Mesh(new PlaneGeometry(), new ShadowMaterial({ opacity: 0.25 }));
ground.rotation.x = -Math.PI / 2;
ground.scale.setScalar(30);
ground.receiveShadow = true;
scene.add(ground);
controls = new OrbitControls(camera, renderer.domElement);
controls.minDistance = 0;
controls.maxDistance = 4;
controls.update();
loadModel()
handleResize()
render()
}
const handleResize = () => {
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
const render = () => {
requestAnimationFrame(render);
renderer.render(scene, camera);
if(!robot) return
const newAngles = $servoBuffer
if(JSON.stringify(angles) === JSON.stringify(newAngles)) return
for (let i = 0; i < servoNames.length; i++) {
angles[i] = lerp(robot.joints[servoNames[i]].angle * (180/Math.PI), newAngles[i], 0.2)
robot.joints[servoNames[i]].setJointValue(MathUtils.degToRad(angles[i]));
}
}
</script>
<svelte:window on:resize={handleResize}></svelte:window>
<canvas bind:this={el} class="absolute"></canvas>
+8 -4
View File
@@ -4,7 +4,11 @@ export type WebSocketStatus = 'OPEN' | 'CONNECTING' | 'CLOSED'
export const isConnected = writable(false)
export const data = writable(new Float32Array(13))
export const dataBuffer = writable(new Float32Array(13))
export const servoBuffer = writable(new Int8Array(12))
export const data = writable();
export const status:Writable<WebSocketStatus> = writable('CLOSED')
@@ -32,7 +36,7 @@ const _disconnected = () => {
const _message = (event) => {
if (event.data instanceof ArrayBuffer) {
let buffer = new Uint8Array(event.data);
data.set(new Float32Array(buffer.buffer));
}
let buffer = new Int8Array(event.data);
servoBuffer.set(buffer);
} else dataBuffer.set(JSON.parse(event.data));
}
+5 -1
View File
@@ -1,4 +1,8 @@
export const humanFileSize = (size:number):string => {
var i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
return Number((size / Math.pow(1024, i)).toFixed(2)) * 1 + ['B', 'kB', 'MB', 'GB', 'TB'][i];
}
}
export const lerp = (start: number, end: number, amt: number) => {
return (1 - amt) * start + amt * end;
};
+2
View File
@@ -1,9 +1,11 @@
<script lang="ts">
import Stream from '../components/Views/Stream.svelte';
import Controls from '../components/Controls.svelte';
import ModelView from '../components/Model/ModelView.svelte';
</script>
<div class="flex justify-center items-center w-full h-full">
<Stream />
<ModelView />
<Controls />
</div>