VCE: Assignment 3
Build your own VCE
Goals
This is the list of competencies expected to develop with the assignment 3:
Objective
It can't be a videogame, it must be a communications platform!
Evaluation
This are the evaluation criteria:
Clear Idea
Your final VCE should have a clear use case in mind and a clear target audience.
It is more than "a 3D chat", it should contain some functionality available to everybody using your VCE.
It can't be a videogame, it must be a communications platform!
Everything should reflect that idea:
Login
Users should be able to register and login with a password to the system.
The system should check if there is already a user with the same username when registering a new one.
When a user logins using login/pass, the server should send him a session token (a unique random string generated for him). The server will store that token along the user info. The user can store the token locally (using localStorage) to avoid having to login using the username/password everytime.
The user can login in the future using his username/password or just by passing the session token.
Database
The backend should connect to a database to store information (users, rooms, messages) permanently.
It should use the database in an intelligent way, not just using a redis to store user/pass and nothing else.
Features to prove database connection:
Navigation
Navigating through the 3D space should feel natural. Actions like:
Also the camera movement should feel if helps see the space around you.
Having different camera modes may help:
UX
Besides the 3D space, the web will have other panels.
It is important that the interface seems easy to use.
It is important to do a good use of CSS
Technology
Beside the basics of 3D walking chat you should try to develop some piece of technology that enriches the experience, something that nobody else have, like:
Completion
It is important that the web looks polished, finished.
You should pay attention to details like:
Security
You should be sure the sensitive data of users is secure:
Presentation
For the presentation, remember to rehearse your pitch, try to explain it as if you are trying to find investors.
Show all the features of your app that are more interesting.
Focus in what makes your app different from others.
Do not show the app as it is, but sell it as what it could become.
Add info about your customer target, present and future features, etc.
Delivery
The presentation and delivery will be the last friday of exams.
Students must send it through AulaGlobal and have a working version in the ECV server.
Careful when creating the ZIP file, avoid sending .git or node_modules.
It must contain a README.txt with all the important information about the features developed.
It must contain a link to a video in youtube with a presentation of your work.
Max size is 200MBs.
Steps
Framework
Download the 3D framework
Keep in mind that this framework requires to use an HTTP server to use it as it loads files from the folder, which is blocked when opening in chrome by double-clicking the index.html.
I recommend setting up the node module http-server which is very easy to setup.
Steps
3D Space
You will need to use the 3D library Rendeer.
Check the guides to know how to use it:
Also remember to export from Blender in GLB format to import easily your 3D content to the engine.
Synchronization
Keep the same structure as in the Assignment 2, that means, send only the relevant info to the server and let the server broadcast it to the rest of the users.
Create a method to extract only the relevant info from the user character:
and send it to the server (if possible not every frame, at could overcharge the server).
Useful Code
Dragging Files
This function allows you to set up easily a callback that will be called when a file is dragged on top of an element of the DOM.
The callback will receive the drop event, to get the file go to drop event parameter and search for:
evt.dataTransfer.files
function createDropArea( element, callback_drop, callback_enter, callback_exit )
{
element.addEventListener("dragenter", onDragEvent);
function onDragEvent(evt)
{
element.addEventListener("dragexit", onDragEvent);
element.addEventListener("dragover", onDragEvent);
element.addEventListener("drop", onDrop);
evt.stopPropagation();
evt.preventDefault();
if(evt.type == "dragenter" && callback_enter)
callback_enter(evt, this);
if(evt.type == "dragexit" && callback_exit)
callback_exit(evt, this);
}
function onDrop(evt)
{
evt.stopPropagation();
evt.preventDefault();
element.removeEventListener("dragexit", onDragEvent);
element.removeEventListener("dragover", onDragEvent);
element.removeEventListener("drop", onDrop);
var r = undefined;
if(callback_drop)
r = callback_drop(evt,evt.dataTransfer.files[0]);
if(r)
{
evt.stopPropagation();
evt.stopImmediatePropagation();
return true;
}
}
}
Reading files
To read the content of a file (as text or binary) you need to use the FileReader class.
Depending on what you want to obtain you should call the appropriate function.
//create a file reader
var reader = new FileReader();
//define the callback
reader.onload = function(evt) {
//use the file content...
console.log(evt.target.result);
};
//to read as ArrayBuffer
reader.readAsArrayBuffer(file);
//to read as Text
reader.readAsText(file);
//to read as Base64URL
reader.readAsDataURL(file)
File to URL
Some objects (like Image or Video) require to pass the URL to the Image, not the File.
In that case you can transform any file to an URL using the URL class.
//create a file reader
var url = URL.createObjectURL(file);
//pass to the element
img.src = url;
Read WebCam
You can access the video and audio stream of the user.
//request access
navigator.mediaDevices.getUserMedia({video: true, audio: false})
.then( function(stream) {
//if user allows access
var video = document.querySelector("video");
video.srcObject = stream;
}, function(err) {
console.log('Failed to get local stream' ,err);
});
Upload file
To send a file in a HTTP Request you can use fetch and pass the file as the body of the request.
From the other side you must read the body to extract the file.
// This will upload the file after having read it
const upload = (file) => {
fetch('http://www.example.net', { // Your POST endpoint
method: 'POST',
headers: {
// Content-Type may need to be completely **omitted**
// or you may need something
"Content-Type": "You will perhaps need to define a content-type here" //optional
},
body: file // This is your file object
}).then(
response => response.json() // if the response is a JSON
).then(
success => console.log(success) // Handle the success
).catch(
error => console.log(error) // Handle the error
);
};