Lehre @ Invisible Cow

RUN-EU BIP 2026:
The Digital Mirror

---

Welcome to the yellow pages for The RUN-EU Erasmus-BIP
The Digital Mirror.

Here you'll find all materials to the lectures and workshops on the metaverse, avatars and virtual idols.

---

Into the metaverse - the lecture

---

Tech. intro for the workshop

---

Tech. preparation for the workshop
AIML preparation for the workshop

---

Build your idol - the workshop

---

Build your Idol
The workshop

Tech. Preparation

---

Slides for the first preparation for the workshop

---

Intro: Tech. Preparation for the In-Person-Workshops
 

---

More stuff is yet to come ;)

---

Briefing Document: Web-Based Virtual Idol Development Pipeline

Executive Summary

This document outlines the technical framework and strategic approach for constructing a personalized "Virtual Idol" through a web-based, semi-professional pipeline. The methodology prioritizes accessibility for users with limited technical expertise while maintaining professional-grade output. The pipeline utilizes a combination of four core tools—VRoid Studio, VRM, Three.js, and @pixiv/three-vrm—to create, standardize, and render interactive 3D avatars directly in a web browser. By leveraging standard web technologies (HTML, CSS, and JavaScript), this approach ensures high interoperability, low entry barriers, and a modular foundation for future expansions into autonomous or AI-integrated avatar systems.

The Development Pipeline

The chosen "web-based semi-pro pipeline" is designed to facilitate a continuous workflow from character design to interactive rendering. It balances technical capability with ease of use through the following four integrated components:

• VRoid Studio: The primary entry point for avatar creation. It uses a parameterized, visually guided modeling approach, allowing for the generation of consistent humanoid 3D characters without requiring advanced 3D modeling skills.
• VRM Format: A standardized file format used for exporting avatars. Based on glTF 2.0, VRM adds avatar-specific features including:
• • Humanoid rigging
  • Facial blendshapes
  • Metadata for usage and identity
  • Broad interoperability across various platforms
• Three.js: The central rendering engine for web visualization. This JavaScript library provides access to WebGL, enabling the efficient display of 3D content within a browser environment.
• @pixiv/three-vrm: An extension library that acts as the bridge between the VRM format and Three.js. It provides dedicated functions for loading, interpreting, and controlling avatars, specifically regarding gaze behavior, humanoid animation, and facial expressions.

Foundational Web Technologies

The implementation of the avatar pipeline relies on three core web technologies that provide stability and flexibility for rendering and interaction.

HTML (Structural Backbone)

HTML defines the semantic organization of the application's user interface. Its primary roles include:

• Providing the element required for 3D rendering.
• Defining input fields and control elements (buttons) for user interaction.
• Establishing the connection between the avatar's visual representation and the user interface.

CSS (Visual Design and Layout)

CSS manages the aesthetic integration of the 3D viewport into the application. Its responsibilities include:

• Responsive behavior and layout design.
• Layering interface elements over or around the avatar.
• Ensuring the avatar is embedded within a coherent, well-designed application context rather than appearing in isolation.

JavaScript (Execution Logic)

JavaScript serves as the system's control layer, handling the most complex aspects of the pipeline:

• Scene Control: Initializing and managing the 3D environment via Three.js.
• Avatar Manipulation: Loading VRM files and processing user interactions.
• Service Integration: Connecting external services such as AI-based dialogue systems or text-to-speech.
• Real-time Data Processing: Synchronizing audio with lip movements (lip-sync) and dynamically adapting behavioral states or animations.

Workflow Overview

The process of building and deploying a Virtual Idol follows a linear, four-step progression:

1. Avatar Creation: Design the character within VRoid Studio.
2. Export: Save the character as a .vrm file.
3. Scene Initialization: Build a basic 3D scene using Three.js.
4. Loading and Control: Utilize three-vrm to import the avatar into the scene and enable interactive features.

Technical Resources and References

The following resources are identified as critical for the implementation and study of this pipeline:

Avatar Tools and Standards

Tool/ Standard	Resource	Type	URL
VRoid Studio	Official Source	vroid.com/en/studio
VRoid Help	Tutorials/Intro	vroid.pixiv.help/hc/en-us
VRM Consortium	Official Site	vrm.dev/en/
VRM Spec	GitHub	github.com/vrm-c/vrm-specification
@pixiv/three-vrm	Documentation	pixiv.github.io/three-vrm

Rendering and Web APIs

Technology	Resource Type	URL
Three.js	Official/Docs	threejs.org
Web Speech API	MDN Reference	developer.mozilla.org...Web_Speech_API
AudioContext	MDN Reference	developer.mozilla.org...AudioContext
Canvas/WebGL	MDN Reference	developer.mozilla.org...Canvas_API
Animation	MDN Reference	developer.mozilla.org...requestAnimationFrame

Conclusion

The modular nature of this pipeline represents a practical balance between development effort and technical sophistication. By utilizing standardized formats like VRM and widely supported web libraries, the system remains platform-independent and highly extensible. This framework is particularly suited for educational contexts, prototyping, and as a foundational step toward more complex metaverse or autonomous virtual systems.

---