Depth sorting touch components

Hi, sava nozin!

Sorry for the delay!

Your question is so interesting but I couldn't find a time to answer it 

Here is my solution (Works only for the case with different cameras like in your second example but can be extended)

I created two scripts : DepthHelper and DepthController

Depth Helper creates touch component for it's sceneObject with specified camera and tells DepthController what touch events were called and DepthController decides which one to call

//@input Component.Camera camera

var touchComponent = script.getSceneObject().createComponent("Component.TouchComponent");
var meshVisual = script.getSceneObject().getComponent("Component.BaseMeshVisual");
touchComponent.addMeshVisual(meshVisual);
touchComponent.setCamera(script.camera);

//get Camera renderOrder to know what's on the top
var camRenderOrder = script.camera.renderOrder;

//do same for other touch events

// on Tap function that will be called if this object is on the top
function realOnTapFunction(){
print("Taped on " + script.getSceneObject().name);
}

var onTapFunction = global.depthController.getTouchCallback("TapEvent", meshVisual, camRenderOrder, realOnTapFunction);
script.createEvent("TapEvent").bind(onTapFunction);


/// Touch Move Event example 
function realOnTouchMoveFunction(){
print("Moving on " + script.getSceneObject().name);
}

var onTouchMoveFunction = global.depthController.getTouchCallback("TouchMoveEvent", meshVisual, camRenderOrder, realOnTouchMoveFunction);
script.createEvent("TouchMoveEvent").bind(onTouchMoveFunction);

I added two examples here for tap and touch move

( Basically what you need - instead of binding function to touch event, register it to the Depth Controller, that will give you new function, which you would bind to event)

And DepthController (put it above all helper scripts) collects all triggered events of some type and selects the one with highest render order

//@input bool debug = true
var eventPool = {}

var getTouchCallback = function(eName, meshVisual, camRenderOrder, callBack){
    
    if(script.debug){
        print("Registered " + eName + " on " + meshVisual.getSceneObject().name + " with render Order " + camRenderOrder);
    }
    var setting = {
        renderOrder : camRenderOrder,
        callBack : callBack
    }   
    var func =  function (s, e) { 
        return function () {
            if(eventPool[e] == undefined){
                eventPool[e] = new Array();
            }
            eventPool[e].push(s)
        }
    } (setting, eName);
    return func;
}
    
script.createEvent("LateUpdateEvent").bind(onLateUpdate);

function onLateUpdate() {
    for( eventName in eventPool) {
        print(eventPool[eventName].length)
        eventPool[eventName].sort(compare);
        eventPool[eventName][0].callBack();
    }   
    eventPool = {};
}

if (global.depthController == undefined){
    global.depthController = {
        getTouchCallback : getTouchCallback
    }
    
}
//comparator function. We can add distance to camera or render order here too
//now it sorts only taking into account camera render order
//sorts descending
function compare(a, b) {
  if (a.renderOrder > b.renderOrder) {
    return -1;
  }
  if (a.renderOrder < b.renderOrder) {
    return 1;
  }
  return 0;
}

If you are interested I can extend this example on render order of ScreenImages or distance to 3D objects . This probably will not be so precise

I will definitely push this feature request to our engineers and hopefully we can have it built in studio soon

Let me know if this is helpful/works for your case or if you need help with integrating this to your project

Project 

Best

Olha

Just saw the Face Paint lens - it's amazing!