I'm working on a small application that allows users to draw freehand in 3d with three.js (the result is somewhat similar to Blender's grease pencil). The application works in any browser but I'm struggling with my main target platform: the iPad with the Apple pencil.
Compared to a mouse, the Apple pencil fires a very high amount of touchmove events and that causes my lines to be "jagged" in some scenarios, especially when the line is drawn slowly.
Here's a jsfiddle that shows the functionality. The only thing I'm doing here is this:
//convert coordinate to three.js space
x = (x / window.innerWidth) * 2 - 1;
y = -(y / window.innerHeight) * 2 + 1;
var vNow = new THREE.Vector3(x, y, 0);
//unproject the coordinates based on the camera
vNow.unproject(camera);
//push a new line into the line geometry
line.geometry.vertices.push(vNow);
//re-render the line at every mousemove
setGeometry()
If you try it with a mouse, the result are pretty okay. But once you switch to Apple pencil… this is what I tend to get the lines are mostly "jagged"
I tried many things, but nothing satisfied me yet.
- I tried generating curves from some or all of the coordinates and re-rendering the line on touchend but I do not like the effect and controlling the quality of the output is very difficult.
- I tried simplifying the line with simplify.js and while close to the desired result it produces inconsistent results.
So, I thought that instead of manipulating the output (the line) I could manipulate the input (the points) and stabilise them before drawing. What would be the best approach to "stabilize" mouse events, given an array of points? I googled left and right but did not find a good answer. Most solutions for drawing smooth curves are for the canvas, which is very different from 3d geometry.
Thanks!