[{"content":"","date":"20 October 2026","externalUrl":null,"permalink":"/VARwebsite/","section":"François Grastilleur's Website","summary":"","title":"François Grastilleur's Website","type":"page"},{"content":"","date":"20 October 2026","externalUrl":null,"permalink":"/VARwebsite/tags/human-computer-interface/","section":"Tags","summary":"","title":"Human-Computer Interface","type":"tags"},{"content":"","date":"20 October 2026","externalUrl":null,"permalink":"/VARwebsite/posts/","section":"Posts","summary":"","title":"Posts","type":"posts"},{"content":"","date":"20 October 2026","externalUrl":null,"permalink":"/VARwebsite/tags/","section":"Tags","summary":"","title":"Tags","type":"tags"},{"content":" The shape of smartphones # The evolution of the smartphone. At first, portable phones were only usefull for calling, or sending SMS messages. For this reason, they first began very small, so that they could fit inside any pocket. The commands were simple, as there wasn\u0026rsquo;t a lot of options of things to do apart from the primary usage of the phone. The size began to grow bigger as more functionality were added. The true revolution began with the first iPhone, that remove the traditional button and replaced it with a touch-screen. With this new technology, they also added many functionalities, such as browsing Internet or downloading apps through the App Store. Using a touch screen quickly became the norm, and smartphones tried to ride the wave by creating phones with bigger and bigger screens, until no button was left on the front panel (like the iPhone X for example). Now that smartphones have grown big, new technologies are being created to make them contact again, introducing foldable phones.\nIn the future, this new trend is likely to continue, with the arrival of rollable phones or phones that have screens that can extend. With this new innovations, phone size could eventually come back to a more compact, pocket-sized format, while still being able to be confortable for any kind of usage.\n\u0026ldquo;The Computer for the 21st Century\u0026rdquo;, by Mark Weiser # In his landmark 1991 Scientific American paper, \u0026ldquo;The Computer for the 21st Century,\u0026rdquo; Mark Weiser introduced the concept of ubiquitous computing (or \u0026ldquo;embodied virtuality\u0026rdquo;).\n\u0026ldquo;The most profound technologies are those that disappear. They weave themselves into the fabric of everyday life until they are indistinguishable from it.\u0026rdquo;\nIn this paper, Weiser talks about the \u0026ldquo;Hardware Trinity\u0026rdquo; of Tabs, Pads and Boards, which are already present nowadays in the form of smartwatches, tablets and smart TVs. He also mentions ubiquitous radio networks : with WiFi 6/7, Bluetooth and 4G, 5G or even 6G that should appear in the future, all our devices are interconnected without the need of cables.\nBut Weiser\u0026rsquo;s vision is still not complete. He wrote : \u0026ldquo;Pads are intended to be \u0026lsquo;scrap computers\u0026rsquo; that can be grabbed and used anywhere; they have no individualized identity or importance\u0026rdquo;. Phones and tablets are still too expensive to produce and purchase to be considered \u0026ldquo;scrap\u0026rdquo;, as anybody wouldn\u0026rsquo;t want to break their precious phone. As a phone holds a lot a data that the user cares for and uses, the way it stored would need to be entirely remote, so that the device itself doesn\u0026rsquo;t hold that much importance. Then, any device would need to be able to adapt to any user and allow them to access their data, while also following the user\u0026rsquo;s natural way of interacting with the device to remain seemless. This create a concern for privacy as it would need the data to be perfectly secured.\nThe future MR App Store # As mixed reality headsets will eventually replace smartphones, the traditional apps we know will become obsolete. Instead of opening isolated programs, users will toggle persistent, context-aware layers that augment work, navigation, and human memory in real time. Let\u0026rsquo;s get over some ideas for the most used MR apps of the future.\nFirst, it is fair to expect most common applications to have a port in the MR environment. Messagerie apps will allow the user to consult new messages in the corner of their field of view. Music apps will have their icon integrated as well so the user can change their playlist with the flick of a finger. Navigation apps will be very useful, guiding the users in real time, with easy to understand visual clues.\nSome new innovations will also eventually arise. For example, there could be some sort of visual research tool, where the user would point something of manipulate a virtual frame to select a part of the field of view to make a research about it on the internet. Like a Google Image search, but mixed with the real world in real-time. Something similar to this could even extend with a tool to find objects. For example, if the user is looking for a specific object but cannot find it, an MR app could help him detect it as soon as the object enters the field of view of the user, and/or indicate its location clearly.\nIn the end, the killer app of mixed reality won\u0026rsquo;t be something you look at, but the lens through which you experience everything else.\n","date":"20 October 2026","externalUrl":null,"permalink":"/VARwebsite/posts/hci_5/","section":"Posts","summary":"","title":"The shape of smartphones, 'The Computer for the 21st Century' \u0026 Future MR App Store","type":"posts"},{"content":"","date":"19 October 2026","externalUrl":null,"permalink":"/VARwebsite/tags/gaussian-splatting/","section":"Tags","summary":"","title":"Gaussian Splatting","type":"tags"},{"content":"In this post, I will explain how I sketched my own AR application idea, made a first prototype and evaluated it.\nSketching an idea # As a DJ, I find interest in searching through new music, and find importance in finding the perfect song to play next. Nowadays, most DJs have their music on digital format using USB flashdrives. But the true old-school way is defferent : they use vinyls. I always wanted to try learning vinyl DJing, but there are a lot of new things to learn. One of these is knowing all the information you need to select the song. On digital formats, it easy as all the information is stored in the metadata, and accessible on the DJing device. On the contrary on vinyls, the information is harder to find, often never in the same place and sometimes totally absent. My app idea would help index all this informations, while also recognising vinyls when the user picks them up, displaying the relevant informations. This would make selecting the next song similar to digital devices, without obstructing the flow of the user.\nMaking a prototype # I decided to make my prototype by imagining how the product would look when the user will use it. In the case of my idea, the app would be used when the user is searching through vinyls. When searching, the app would recognize a vinyl and an icon would hover over the disk for the user to choose if they want to see more informations. For the integration, I had several ideas: would it be better to have a smaller, less heavy extend icon so the user isn\u0026rsquo;t to visually burdened by the app when they doesn\u0026rsquo;t want to have all the information in front of their eyes; or something more obvious ? When showing the informations, would it be better to have the window to float above each vinyl, or have all the windows aligned so that the user could better compare his selection ? Here are how my different proposition look:\nPropositions for the \u0026ldquo;shrunk\u0026rdquo; window\nPropositions for the full window\nEvaluating the prototype # I showed my prototype to a friend (that DJs too !) to get his feedback:\nWindow anchoring : better to follow the vinyl, as it is more natural for the user, and they can do the comparison by placing both vinyl side by side Icon choice : better to keep it simple (no text). But how to actually use it if both hands are not free ? Maybe a quick tilt of the vinyl to indicate wanting to expand/shrink the window Displayed information : checkmarks are unclear. For example for the BPM, it would be better to indicate a percentage offset from the other vinyl, or in the case of someone DJing, the difference with the song playing (ex: +3.5% from Master) Those feedbacks not only helped choice among the ideas I already had, but also made new propositions emerge from the perspective of an user actually using the solution !\n","date":"19 October 2026","externalUrl":null,"permalink":"/VARwebsite/posts/hci_4/","section":"Posts","summary":"","title":"Ideating \u0026 Prototyping an AR app","type":"posts"},{"content":"As we have seen in a previous post, Gaussian splatting is a 3D digital reconstruction and rendering technique that uses millions of tiny, soft, overlapping 3D shapes called Gaussians to recreate real-world scenes with photorealistic detail and real-time viewing speeds.\nIn this post, we will learn how to add a Gaussian Splatting inside a Unity project.\nSetting up Gaussian Splatting in Unity # To bring .ply or .spz splat datasets into Unity, we use UnityGaussianSplatting.\nFor that we will clone the repository to a local drive:\ngit clone https://github.com/graphdeco-inria/gaussian-splatting --recursive In the Unity Hub, click Add and navigate to UnityGaussianSplatting/projects/. Select GaussianExample-URP. Make sure the Unity version is Unity 6, and open the project. Converting a .ply file into a GameObject # Unity supports .ply file, so the process is very simple.\nIn your Scene Hierarchy, right-click and select Create Empty. With the GameObject selected, click Add Component in the Inspector and add GaussianSplatRenderer. Drag your generated point_cloud asset from the Project window into the Asset slot on the GaussianSplatRenderer. The Gaussian scene will immediately appear in your Scene and Game views, and can now be used like any GameObject.\nThe final look of the Gaussian Splatting imported in Unity, and its parameters. ","date":"19 October 2026","externalUrl":null,"permalink":"/VARwebsite/posts/unity-gs/","section":"Posts","summary":"","title":"Importing a Gaussian Splatting in Unity","type":"posts"},{"content":"","date":"19 October 2026","externalUrl":null,"permalink":"/VARwebsite/tags/unity/","section":"Tags","summary":"","title":"Unity","type":"tags"},{"content":"In this tutorial, we will look at how to build an in-engine chat interface where an NPC responds locally on your machine using LLMUnity.\nArchitecture Overview # The system architecture consists of four distinct components working together:\nLLM_GameObject (The Brain): A GameObject with the LLM script that loads the local .gguf weights and runs inference in the background. LLMAgent (The Character): The client representation holding the agent\u0026rsquo;s character persona and system prompt. Multiple agents can connect to a single LLM backend. NPCController.cs (The Glue): A custom C# script handling UI events, locking input while the character speaks, and updating the text stream. ChatScrollView (The Face / UI): A responsive TextMeshPro Scroll View that dynamically displays the conversation and scrolls automatically. Step 1: Install LLMUnity \u0026amp; Setup the Model Server # Open your Unity project (\u0026lsquo;6000.0.x\u0026rsquo; or later. Navigate to Window \u0026gt; Package Manager. Click the + button in the upper-left corner and select Add package from git URL\u0026hellip;. Enter https://github.com/undreamai/LLMUnity.git and click Add. Once imported, right-click in your Hierarchy and choose Create Empty. Name this object LLM_GameObject. With LLM_GameObject selected, go to the Inspector, click Add Component, and search for LLM. In the LLM component inspector: Keep default settings: Num Threads = -1 (uses all CPU cores) and Context Size = 8192. Under the model list, select and download a lightweight model like Qwen 3.5 0.8B (fast initial token latency, concise chat answers) Wait for the model download to complete. Step 2: Create the AI Character # Right-click in the Hierarchy and create another Empty GameObject named AI Character. Add the LLMAgent component to it. In the Inspector, ensure the Llm property references the LLM_GameObject created in Step 1. Customize the System Prompt to define your character\u0026rsquo;s personality and interaction boundaries: You are an AI conversational agent. Respond naturally and briefly (1-3 sentences), as if having a real-time spoken conversation with a user testing your interface. Do not use emojis. Step 3: Build the Chat UI # The UI Canvas hierachy should look something like this :\nCanvas ├── ChatScrollView (Scroll View) │ └── Viewport │ └── Content (Vertical Layout Group + Content Size Fitter) │ └── ChatLogText (TextMeshPro - Text) ├── InputField_UserMessage (TMP Input Field) └── Button_Send (TMP Button) Some settings have to be changed as well, so the generated text fits the window perfectly:\nSet UI Scale Mode to Scale With Screen Size and Reference Resolution to 1920 x 1080. ChatScrollView : Width: 700, Height: 300, Pos Y: 90. isable horizontal scrolling on the Scroll Rect component (Horizontal = unchecked). Content: Add a Vertical Layout Group (Control Child Size Width: Checked). Add a Content Size Fitter and set Vertical Fit to Preferred Size. ChatLogText: Enable Word Wrapping. Add a Content Size Fitter with Vertical Fit set to Preferred Size. Font Size: 24 or to liking. Here is how it looked for me :\nStep 4: Create the Controller Script # Create a new C# script named NPCController.cs in your Assets/Scripts/ folder and paste the following code:\nusing UnityEngine; using UnityEngine.UI; using TMPro; using LLMUnity; public class NPCController : MonoBehaviour { public LLMAgent llmAgent; public TMP_InputField inputField; public TextMeshProUGUI chatLogText; public Button sendButton; public ScrollRect chatScrollRect; private string fullLog = \u0026#34;\u0026#34;; void Start() { sendButton.onClick.AddListener(OnSendClicked); inputField.onSubmit.AddListener(delegate { OnSendClicked(); }); } void OnSendClicked() { string userMessage = inputField.text.Trim(); if (string.IsNullOrEmpty(userMessage)) return; fullLog += $\u0026#34;\\n \u0026lt;color=#5B6CFF\u0026gt;\u0026lt;b\u0026gt;You: \u0026lt;/b\u0026gt;\u0026lt;/color\u0026gt; {userMessage}\\n\u0026#34;; fullLog += \u0026#34;\u0026lt;color=#FF9F1C\u0026gt;\u0026lt;b\u0026gt;AI:\u0026lt;/b\u0026gt;\u0026lt;/color\u0026gt; \u0026#34;; chatLogText.text = fullLog; inputField.text = \u0026#34;\u0026#34;; inputField.interactable = false; sendButton.interactable = false; _ = llmAgent.Chat(userMessage, HandleReply, OnReplyComplete); } void HandleReply(string replySoFar) { chatLogText.text = fullLog + replySoFar; // Automatically scroll to the bottom // Forces Unity to recalculate the UI height based on the new text first Canvas.ForceUpdateCanvases(); // 0f represents the absolute bottom of the scroll view chatScrollRect.verticalNormalizedPosition = 0f; } void OnReplyComplete() { fullLog = chatLogText.text + \u0026#34;\\n\u0026#34;; inputField.interactable = true; sendButton.interactable = true; inputField.ActivateInputField(); } } Step 5: Assign Component References # Select the AI Character GameObject Add the NPCController component to it. Link the inferences in the Inspector: Llm Agent: Drag the AI Character object (holds the LLMAgent component). Input Field: Drag InputField_UserMessage. Chat Log Text: Drag ChatLogText. Send Button: Drag Button_Send. Scroll Rect: Drag ChatScrollView. Step 6: Try it out ! # Press Play in the Unity Editor, click into the input field, and send a message. Here is a video demonstrating the final results.\nYour browser does not support the video tag. The LLM in action Now you can play around with the different parameters available, for example the System Prompt to see how it impact the answer from the LLM Agent.\n","date":"18 October 2026","externalUrl":null,"permalink":"/VARwebsite/posts/unity-llm/","section":"Posts","summary":"","title":"Implementing a LLM Chatbot in Unity","type":"posts"},{"content":"In this post, we will learn how to implement a Machine Learning Agent in Unity. In order to do that, we will install the Unity ML-Agents Toolkit, that allows to train an agent to complete tasks. We will first follow the installation guide and check one of the built-in examples, and then create our own agent from scratch.\nSetting up the ML-Agents Toolkit # This part basicaly follows the guide of the official Unity ML-Agents Toolkit manual. If any problem occurs, please refer to this page.\nPrerequisites # Before installing the toolkit, ensure you have the correct foundation:\nUnity Editor: You must be using Unity version 6000.0 or later. Use Unity Hub to manage your installation.\nConda (or Mamba): You need a virtual environment manager to keep the ML-Agents Python dependencies isolated from the rest of your system.\n1. Creating the Python Environment # Python 3.10.12 is prefered. In a terminal, use Conda to create a new virtual environment specifically running Python 3.10.12, then activate it:\nconda create -n mlagents python=3.10.12 \u0026amp;\u0026amp; conda activate mlagents If you are on Windows, you will need to install PyTorch separately at this stage to ensure proper CUDA support for your GPU).\npip3 install torch~=2.2.1 --index-url https://download.pytorch.org/whl/cu121 2. Installing the ML-Agents Unity Package # Next, we need to add the toolkit to your Unity project. This is done via the Unity Editor:\nOpen your project in Unity.\nGo to Window \u0026gt; Package Manager.\nClick the + icon and select Add package by name.\nType com.unity.ml-agents and install it.\n3. Installing the ML-Agents Python Package # Finally, you need to install the Python side of the toolkit so your algorithms can communicate with Unity. Run this inside your Conda environment:\npython -m pip install mlagents==1.1.0 The 3D Ball example # The 3DBall example in training One of the examples Unity provides when installing ML-Agents is the 3D Ball environment, which contains several agent cubes and balls. In this environment, an agent cube is an Agent that receives a reward for every step that it balances the ball. An agent is also penalized with a negative reward for dropping the ball. The goal of the training process is to have the agents learn to balance the ball on their head. Now, we will quickly follow the steps from this page.\nFirst, make sure you open the ML-Agents project that was setup earlier. In the Project window, you should now have access to Assets/ML-Agents/Examples/3DBall/Scenes, where you find the 3DBallscene file. Open it.\nRun a pre-trained model # Let\u0026rsquo;s run a model that Unity has already trained for us.\nIn your Hierarchy, you will see several platforms (they are all identical clones to speed up training). Select the main 3DBall prefab so we can edit them all at once. In the Inspector window, look for a component called Behavior Parameters. This script dictates how the agent makes decisions. Go to your Project window and navigate to Assets/ML-Agents/Examples/3DBall/TFModels . You will see a file named 3DBall (this is the pre-trained .onnx neural network model). Drag and drop this file into the Model slot on the Behavior Parameters component. Make sure the Inference Device is set to CPU. Press Play at the top of the Unity Editor and see the model in action ! Train a new model from scratch # Now let\u0026rsquo;s try to train our own 3DBall model.\nMake sure you are using the Conda environment we created in the setup guide : conda activate mlagents Navigate to the root directory where you cloned the ml-agents repository. Run the following command to start the training process: mlagents-learn config/ppo/3DBall.yaml --run-id=first3DBallRun The terminal will initialize and eventually display a message asking you to press the Play button in the Unity Editor. Go back to the Unity Editor and press Play. You can observe the training in the Unity Editor and the terminal, where you can see the results improving as the step go further. Screenshot of the terminal during training Once the training is complete, Unity automatically generates a .onnx neural network file. You can find it in the /results folder within the ML-Agents directory.\nMaking our own environment # For our own environment, we will train a ball agent to go towards target objects that are generated randomly inside the training area.\nFirst let\u0026rsquo;s create the scene. In a new project (or a new Scene in the ML-Agents project), add a Plane for the ground, Walls if you want boundaries, a Sphere object that will be our agent, and a target object (a red square in my case). Your Scene should look like the following :\nAdd a RigidBody to the agent so it can interacts with physics, and create a tag \u0026lsquo;floor\u0026rsquo; for the floor plane.\nNow let\u0026rsquo;s implement the Agent Script to our agent object. Create a new \u0026ldquo;RollerAgent\u0026rdquo; script in the agent object. ML Agents splits training in episodes, where the Agents (in ou rcase the sphere) tries to solve the task. The file shoulf look like the following :\nusing UnityEngine; using Unity.MLAgents; using Unity.MLAgents.Sensors; using Unity.MLAgents.Actuators; public class RollerAgent : Agent { public Rigidbody rBody; public float forceMultiplier = 10f; public Transform Target; // Start is called once before the first execution of Update after the Agent is created void Start() { rBody = GetComponent\u0026lt;Rigidbody\u0026gt;(); } public override void OnEpisodeBegin() { // If the Agent falls off the platform, reset its position and zero out its velocity if (this.transform.localPosition.y \u0026lt; 0) { this.rBody.angularVelocity = Vector3.zero; this.rBody.linearVelocity = Vector3.zero; this.transform.localPosition = new Vector3(0, 0.5f, 0); } // Move the Target to a new random position to promote generalization Target.localPosition = new Vector3(Random.Range(-4f, 4f), 0.5f, Random.Range(-4f, 4f)); } public override void CollectObservations(VectorSensor sensor) { // 1. Target Position (x,y,z) - Tells Agent where it needs to go sensor.AddObservation(Target.localPosition); // 2. Agent Position (x,y,z) - Allows Agent to know where it is now sensor.AddObservation(this.transform.localPosition); // 3. Agent Velocity (x,z) - Helps Agent control speed and avoid overshooting sensor.AddObservation(rBody.linearVelocity.x); sensor.AddObservation(rBody.linearVelocity.z); } public override void OnActionReceived(ActionBuffers actionBuffers) { // Receive 2 continuous actions (x, z directions) Vector3 controlSignal = Vector3.zero; controlSignal.x = actionBuffers.ContinuousActions[0]; controlSignal.z = actionBuffers.ContinuousActions[1]; // Apply force to the Rigidbody rBody.AddForce(controlSignal * forceMultiplier); // Calculate distance to target float distanceToTarget = Vector3.Distance(this.transform.localPosition, Target.localPosition); // If distance \u0026lt; 1.42 -\u0026gt; reward +1.0 and end episode if (distanceToTarget \u0026lt; 1.42f) { SetReward(1.0f); EndEpisode(); } // If Agent falls (y \u0026lt; 0) -\u0026gt; end episode (no explicit penalty given) else if (this.transform.localPosition.y \u0026lt; 0) { EndEpisode(); } } public override void Heuristic(in ActionBuffers actionsOut) { var continuousActionsOut = actionsOut.ContinuousActions; float h = Input.GetAxis(\u0026#34;Horizontal\u0026#34;); float v = Input.GetAxis(\u0026#34;Vertical\u0026#34;); continuousActionsOut[0] = h; continuousActionsOut[1] = v; } } In this scipt, we extend three methods from the Agent base class : OnEpisodeBegin, CollectObservations and OnActionReceived. The Heuristic method is also included for keyboard testing.\nNow select the Agent and drag the Target object into the public \u0026ldquo;Target\u0026rdquo; field of the script. Add a \u0026lsquo;Decision Requester\u0026rsquo; component with a decision period of 10. Add a \u0026lsquo;Behavior Parameters\u0026rsquo; component and configure it to match the script : BehaviorName = RollerBall (the name of your agent), Vector Observation \u0026gt; Space Size = 8, Actions \u0026gt; Continuous Actions = 2.\nScreenshot of how the settings of the ML Agent should look like\nTo prepare for training, create a configuration file in the config/ppo (let\u0026rsquo;s name ours rollerball_config.yaml ). This file contains hyperparameters like batch size, buffer size, and learning rate. Here is the file I used :\nbehaviors: RollerBall: trainer_type: ppo hyperparameters: batch_size: 10 buffer_size: 100 learning_rate: 3.0e-4 beta: 5.0e-4 epsilon: 0.2 lambd: 0.99 num_epoch: 3 learning_rate_schedule: linear beta_schedule: constant epsilon_schedule: linear network_settings: normalize: false hidden_units: 128 num_layers: 2 reward_signals: extrinsic: gamma: 0.99 strength: 1.0 max_steps: 100000 time_horizon: 64 Now we can start the training. From the working directory, use this command :\nmlagents-learn config/rollerball_config.yaml --run-id=RollerBall Press the PLay button in the Unity Editor to watch the training process. Here are a video from the beginning of the training, where we see the agent struggling to reach the target, and an other from the end where it became very efficient and reaches multiple target per episodes.\nYour browser does not support the video tag. Beginning of the training\nYour browser does not support the video tag. End of the training\n","date":"18 October 2026","externalUrl":null,"permalink":"/VARwebsite/posts/unity-ml/","section":"Posts","summary":"","title":"Implementing Machine Learning in Unity","type":"posts"},{"content":"","date":"18 October 2026","externalUrl":null,"permalink":"/VARwebsite/tags/llm/","section":"Tags","summary":"","title":"LLM","type":"tags"},{"content":"","date":"18 October 2026","externalUrl":null,"permalink":"/VARwebsite/tags/ml/","section":"Tags","summary":"","title":"ML","type":"tags"},{"content":"Gaussian splatting is a 3D digital reconstruction and rendering technique that uses millions of tiny, soft, overlapping 3D shapes called Gaussians to recreate real-world scenes with photorealistic detail and real-time viewing speeds. Here we use a database of photos to create make this reconstruction. We use Colmap, Brush and Supersplat to get the final result.\nWhat exactly is Gaussian Splatting ? # At its foundation, 3D Gaussian Splatting is a rasterization technique. It adheres to the fundamental principle of traditional computer graphics:\nStart with data describing the scene geometry. Project and draw that data onto the screen. In classical graphics pipelines, scenes are broken down into triangles that are rasterized onto the pixel grid. 3D Gaussian Splatting replaces triangles with 3D Gaussians as the foundational primitive. When millions of overlapping, semi-transparent Gaussians are projected onto screen space and alpha-blended together, they reconstruct photorealistic scenes—complete with complex geometries and view-dependent lighting—at real-time frame rates.\nEach individual 3D Gaussian primitive is defined by four core properties:\nMean ($\\mu$): The center position in 3D space, represented by coordinates $(x, y, z)$. Covariance ($\\Sigma$): An anisotropic 3D covariance matrix that defines the scale, elongation, and spatial rotation of the ellipsoid. Opacity ($\\sigma(\\alpha)$): The transparency of the Gaussian, typically initialized at $\\alpha = 0.1$. Color Parameters: Encoded either as RGB color channels or as Spherical Harmonics (SH) coefficients to model view-dependent reflections and dynamic lighting highlights. Colmap # First, we load the image database into Colmap, to detect features on each of them, and reconstruct them together to get the relations between each images\nFirst visualisation of the object after detecting features and reconstructing Brush # Now, we use brush in order to train the database and perform the reconstruction, using Machine Learning. The app allows the user to see the rendering progress in real time.\nBrush, training the database After the training, we can see that there are a lot of artifacts created, which we will try to remove to get a more polished look.\nFinal result from Brush Supersplat # To get our finished product, we use Supersplat to visualise the 3D object, as well as remove any Gaussians that are not relevant to the object we want to show.\nFinal result after removing the irrelevant gaussians on Supersplat\nHere is a interactive representation of the 3D object (not working at the moment) :\n","date":"2 October 2026","externalUrl":null,"permalink":"/VARwebsite/posts/hci_3/","section":"Posts","summary":"","title":"Creating a Gaussian Splatting","type":"posts"},{"content":" A current HCI research study # In this section, I will present the recent work of Weiwei He, who is working (together with other researchers) on a Biomimetic Flexible Sensor inspired by the natural layered structure of eggshells.This work was inspired by the great potential that biomimetic innovations have shown in recent years.\nTheir team designed the eggshell-inspired multifunctional hybrid flexible sensor (EMHFS), which uses 4 functional layers : a triboelectric layer for noncontact sensing, a piezoresistive layer for pressure sensing, and hydrophilic–hydrophobic layers for directional moisture wicking, breathability, and antibacterial properties.\nThis new flexible sensor can be useful for a variety of HCI scenarios, such as wearables, robotics or smart interactives devices.\nSchematics from the research article illustrating the inspiration The Ultimate Display, by Ivan Sutherland # In this foreshadowing paper from 1965, Ivan Sutherland predicts how Human-Computer Interfaces could evolve in the future. Nowadays, we can see that his prediction where quite precise !\nHe predicted that computers will be interacted with using a keyboard (a \u0026ldquo;typewriter\u0026rdquo;), the apparition of drag-and-drop interfaces as well as voice inputs. He also conceptualized what became haptic feedbacks, where the user can feel resistance when interacting with an object.\nSutherland also describes technologies we don\u0026rsquo;t know of yet. The haptic feedbacks he imagined still isn\u0026rsquo;t as advanced today, so there is still room for improvement and many innovations could emerge in the upcomig years. His ultimate ambition is \u0026ldquo;a room within which the computer can control the existence of matter\u0026rdquo;. This still seems very far today, but maybe this could also become reality !\nIvan Sutherland and his head mounted display Input Device failing # Here I\u0026rsquo;ll talk about pre-touch sensing. This technology has been discussed more than 10 years ago (see the ACM SIGCHI video), but it has never gone mainstream. While they argue that it adds more depth to mobile interactions and is relatively easy and cheap to integrate to a device, the technology couldn\u0026rsquo;t find its way to our phones. This might be because pre-touch adds a new dimension to how we interact with our device, which it could also adds a way for the device to misinterpret the intention of the user. When the device detects the user approaching it, it might interpret it as them wanting to interact, but it might also be them just moving around. For this main reason, this technology didn\u0026rsquo;t get used much, prefering other ways to interact such as voice command, which is easier for the user to use while still completing complex tasks.\nPre-Touch Sensing for Mobile Interaction, by ACM SIGCHI on Youtube ","date":"26 September 2026","externalUrl":null,"permalink":"/VARwebsite/posts/hci_2/","section":"Posts","summary":"","title":"Current research, the Ultimate Display \u0026 Input Devices","type":"posts"},{"content":" Affordances # \u0026ldquo;An affordance is a relationship between the properties of an object and the capabilities of the agent that determine just how the object could possibly be used.\u0026rdquo; - Don Norman\nA simple example of affordance would be cutlery. Their long shape naturally induce how it should held, as well as in which cases they should be used. For example a spoon\u0026rsquo;s curved bowl affords scooping and holding liquids, while a knife\u0026rsquo;s sharper shapes affords cutting.\nA case of bad affordance is the mystery meat navigation. It is when a component of a web page is hidden until the user hovers his mouse on it. For example when articles are being refered to on Wikipédia, you can see a preview when hovering on their title. This is useful for a user on a computer, but it doesn\u0026rsquo;t work for a user on a smartphone. It would be difficult to solve this problem, but maybe it could be tackled by using a feature of the touchscreen. Something like a \u0026ldquo;zooming\u0026rdquo; motion could be a way to tell if the user wants to see the preview of an article.\nExample of a preview when hovering on Wikipédia Gestalt Laws # Gestalt Laws is useful when tidying your computer desktop ! You can arrange the icons of the desktop however you want. I personaly like to keep related apps close to each others. This is an example of the law of Common-region, though this is not done automatically.\nA classic Windows desktop Dark Design Patterns # Video games often use some dark patterns to either keep the players on the game, or even to get them to spend money. For example, the Daily Login Reward mechanic rewards the player for each consecutive day they log onto the game, making sure they open the app every day. A more sound approach to this would be to reward the user for playing regularly without imposing this daily login rule. The player could choose how often they intend to play the game, and still get a reward.\nA login reward from a game Many websites use cookies and want their user to accept them. To do this, they use tactics to make it harder for the user to refuse them. It is mostly done through interface interference and obstruction, as the user can accept all cookies with a single click, but if they want to refuse them, several clicks are required. This would be simply fixed with a \u0026ldquo;reject all cookies\u0026rdquo; button, but it would require the website to be more honest and not want to trick the user in the first place.\nExample of a cookie agreement pop-up ","date":"21 September 2026","externalUrl":null,"permalink":"/VARwebsite/posts/hci_1/","section":"Posts","summary":"","title":"Affordances, Gestalt Law \u0026 Dark Design Patterns","type":"posts"},{"content":"In this guide, we’ll walk through how to get Unity up and running on a Windows machine and cover the basic concepts you need to know to get started.\nThe Basics # Before we download anything, let\u0026rsquo;s briefly go over what Unity actually is. Unity is a game engine—a software environment that handles the heavy lifting of game development (like rendering graphics, calculating physics, and managing audio) so you don\u0026rsquo;t have to code those systems from scratch.\nHere are the core concepts you\u0026rsquo;ll work with inside the engine:\nScenes: Think of a Scene as a single level, menu, or environment in your game. A game is usually made up of multiple scenes. GameObjects: Everything in a Unity scene is a GameObject. Characters, lights, cameras, and invisible trigger zones are all GameObjects. By themselves, they don\u0026rsquo;t do much—they are just empty containers. Components: This is where the magic happens. You add Components to GameObjects to give them functionality. Add a \u0026ldquo;Mesh Renderer\u0026rdquo; to make an object visible, a \u0026ldquo;Rigidbody\u0026rdquo; to give it gravity and physics, or an \u0026ldquo;Audio Source\u0026rdquo; to make it play sound. Scripts: When the built-in components aren\u0026rsquo;t enough, you write your own custom components using the C# programming language. These scripts dictate your game\u0026rsquo;s unique logic and rules. Example of a project window in Unity Installing Unity on Windows # Unity uses a management application called Unity Hub. This app organizes your different Unity projects and lets you install different versions of the Unity Editor (which is crucial, as different projects often require specific versions of the engine).\nHere is the step-by-step process to get everything installed:\n1. Download Unity Hub # Head over to the official Unity download page and click the Download for Windows button. Run the installer .exe file that downloads and follow the standard Windows installation prompts.\n2. Sign in and get a License # Open Unity Hub. You will be prompted to sign in with your Unity ID. If you don\u0026rsquo;t have an account, create one (it\u0026rsquo;s free). Once logged in, you need a license. Go to Preferences (the gear icon) \u0026gt; Licenses \u0026gt; Add License. Choose Get a free personal license, or anything else that fits you.\n3. Install the Unity Editor # In Unity Hub, navigate to the Installs tab on the left menu and click the Install Editor button. You will see several versions. Always choose the recommended LTS (Long Term Support) release unless you have a specific reason not to. LTS versions are the most stable and receive updates for longer.\n4. Create Your First Project # Once the Editor finishes installing, go to the Projects tab in Unity Hub and click New project. Select a template (e.g., 2D Core or 3D Core), give your project a name, choose a folder to save it in, and click Create project.\nUnity will now launch your brand-new project! The first time it opens, it might take a few minutes to import assets and set up the initial files.\nYou\u0026rsquo;re all set!\n","date":"19 September 2026","externalUrl":null,"permalink":"/VARwebsite/posts/unity-setup/","section":"Posts","summary":"","title":"Setting Up Unity","type":"posts"},{"content":"Hugo is a simple and easy-to-use tool for building static website. This website was built using Hugo, implementing the Blowfish theme. It is hosted with GitHub Pages\nHere, I’ll walk you through setting up a brand-new Hugo project from scratch, manually installing the Blowfish theme, adding your first piece of content, building and hosting the final site.\nThis walk-through is basically following the Hugo quickstart guide, the Blowfish installation guide and the Blowfish hosting guide.\nPrerequisites # Before we dive in, make sure you have the following ready to go:\nHugo installed (v0.158.0 or later).\nGit installed.\nA terminal (I made this website on Linux).*\nStep 1: Create Your Project Skeleton # First, open your terminal and run the following commands to generate your project folder and initialize it:\n# Create a new project called \u0026#39;my-website\u0026#39; hugo new project my-website # Move into your new project directory cd my-website # Initialize an empty Git repository git init Step 2: Install the Blowfish Theme Manually # There are many ways to install Blowfish. I decided to do it manually\nHead over to the Blowfish GitHub repository and download the latest release of the theme\u0026rsquo;s source code.\nExtract the downloaded archive.\nRename the extracted folder to exactly blowfish.\nMove this folder into the themes/ directory inside your Hugo project\u0026rsquo;s root folder.\nStep 3: Configure the Theme # Blowfish uses a structured configuration folder rather than a single file. Here is how to set it up:\nIn the root folder of your website, delete the default hugo.toml file that Hugo automatically generated for you.\nNavigate to themes/blowfish/config/_default/ and copy all the .toml files you see there.\nPaste those files into your project\u0026rsquo;s own config/_default/ folder (create these folders in your root directory if they don\u0026rsquo;t exist).\nOnce you copy the files over, your project\u0026rsquo;s config folder should look like this:\nconfig/_default/ ├─ hugo.toml ├─ languages.en.toml ├─ markup.toml ├─ menus.en.toml └─ params.toml Crucial Step: Because we installed the theme manually (without using Hugo Modules), you need to open your new config/_default/hugo.toml file and add this exact line to the very top:\ntheme = \u0026#34;blowfish\u0026#34; While you have hugo.toml open, it\u0026rsquo;s also a good time to personalize your site\u0026rsquo;s core settings:\nbaseURL = \u0026#39;https://yourwebsite.com/\u0026#39; locale = \u0026#39;en-us\u0026#39; title = \u0026#39;My Awesome Blowfish Site\u0026#39; Step 4: Create Your First Post # In the particular case of making a blog, creating posts is easy thanks to Hugo. You can do it by using the following command:\nhugo new content content/posts/my-first-post.md Hugo will create the file and automatically populate it with some \u0026ldquo;front matter\u0026rdquo; (the metadata at the top). Open it in your favorite text editor, and it will look something like this:\n+++ title = \u0026#39;My First Post\u0026#39; date = 2024-01-14T07:07:07+01:00 draft = true +++ ## Introduction This is **bold** text, and this is *emphasized* text. Welcome to my new blog! Step 5: Preview Your Website # To see what your website looks like as you edit, start Hugo\u0026rsquo;s local development server. Because our post is still a draft, we need to append the -D flag to tell Hugo to render draft content:\nhugo server -D Open the localhost URL provided in your terminal in your web browser. You can keep this server running in the background—it will automatically refresh the page whenever you save changes to your files!\nStep 6: Host the Website on GitHub Pages # This website is also hosted on GitHub Pages. Let\u0026rsquo;s see how to do this.\nFirst, make sure your Hugo project is pushed to a repository on GitHub. Once it\u0026rsquo;s there, we need to create an Actions workflow to automatically build and deploy your site every time you make a change.\nCreate a new file in your project located at .github/workflows/gh-pages.yml and paste the following configuration into it:\n# .github/workflows/gh-pages.yml name: GitHub Pages on: push: branches: - main jobs: build-deploy: runs-on: ubuntu-24.04 concurrency: group: ${{ github.workflow }}-${{ github.ref }} steps: - name: Checkout uses: actions/checkout@v3 with: submodules: true fetch-depth: 0 - name: Setup Hugo uses: peaceiris/actions-hugo@v2 with: hugo-version: \u0026#34;latest\u0026#34; - name: Build run: hugo --minify - name: Deploy uses: peaceiris/actions-gh-pages@v3 if: ${{ github.ref == \u0026#39;refs/heads/main\u0026#39; }} with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_branch: gh-pages publish_dir: ./public Ensure that the branch name (e.g., main) matches your actual source branch in both the branches: section and the deploy step\u0026rsquo;s if: parameter.\nHead over to Settings \u0026gt; Pages in your GitHub repository and change the source to GitHub Actions. This will tell the repository to deploy the website to your username.github.io domain.\nSave the gh-pages.yml file and push this new configuration up to your GitHub repository. The GitHub Action should trigger automatically.\nEverything should be ready to go !\n","date":"18 September 2026","externalUrl":null,"permalink":"/VARwebsite/posts/setting-up/","section":"Posts","summary":"","title":"Setting Up a Hugo Website with the Blowfish Theme","type":"posts"},{"content":"","externalUrl":null,"permalink":"/VARwebsite/authors/","section":"Authors","summary":"","title":"Authors","type":"authors"},{"content":"","externalUrl":null,"permalink":"/VARwebsite/categories/","section":"Categories","summary":"","title":"Categories","type":"categories"},{"content":"","externalUrl":null,"permalink":"/VARwebsite/series/","section":"Series","summary":"","title":"Series","type":"series"}]