VRML helper to calculate pixel-sensitive sizes without PixelLayer3D

proto.PixelSensor.wrl

#VRML V2.0 utf8

PROTO PixelSensor [
  # Distance to Parallel
  # e.g. for z=0 in a Layer3D that uses Viewpoint{position 0 0 10}
  field  SFFloat  distance  10

  # FOV of the Layer3D viewpoint
  field  SFFloat  fieldOfView  0.785398

  # Browser.windowSize convered to Parallel
  eventOut  SFVec2f  window

  # Factor to convert a Pixel size to a Parallel size
  # e.g. 10 pixels width is "10 * pixel[0]" 
  eventOut  SFVec2f  pixel
]{
  Script {
    field  SFFloat  fieldOfView  IS fieldOfView
    field  SFFloat  distance  IS distance
    eventIn  SFVec2f  onWindowSize
    eventOut  SFVec2f  window  IS window
    eventOut  SFVec2f  pixel  IS pixel

    directOutput TRUE
    url "javascript:

    function onWindowSize(){
      var windowSize = Browser.windowSize;
      var width, height;
      if (windowSize[0] > windowSize[1]){
        height = (Math.tan(fieldOfView / 2) * distance * 2);
        width = (Math.tan((Math.atan((windowSize[0] * Math.tan(fieldOfView / 2)) / windowSize[1]) * 2) / 2) * distance * 2);
      } else {
        width = Math.tan(fieldOfView / 2) * distance * 2;
        height = (Math.tan((Math.atan((Math.tan(fieldOfView / 2) * windowSize[1]) / windowSize[0]) * 2) / 2) * distance * 2);
      }
      window = new SFVec2f(width, height);
      pixel = new SFVec2f(width / windowSize[0], height / windowSize[1]);
    }

    function initialize(){
      onWindowSize();
      Browser.addRoute(Browser, 'windowSize', Browser.getScript(), 'onWindowSize');
    }

    function shutdown(){
      Browser.deleteRoute(Browser, 'windowSize', Browser.getScript(), 'onWindowSize');
    }

    "
  }
}


###############################################################################
# Usage Example
###############################################################################

#Viewpoint {}
#
#Layer3D {
#  viewpoint Viewpoint {
#    position 0 0 5
#    fieldOfView 0.5
#  }
#  children Shape {
#    appearance Appearance {
#      material Material {
#        diffuseColor 0 0 0
#        emissiveColor 1 0 0
#      }
#    }
#    geometry DEF rectangle Rectangle {
#      size 1 1
#    }
#  }
#}
#
#DEF sensor PixelSensor {
#  distance 5
#  fieldOfView 0.5
#}
#
#DEF script Script {
#  field  SFNode  rectangle  USE rectangle
#  eventIn  SFVec2f  onPixel
#  directOutput FALSE
#  url "javascript:
#
#  function onPixel(pixel){
#    rectangle.size = pixel.multiply(100); // 100px * 100px
#  }
#
#  "
#}
#
#ROUTE sensor.pixel TO script.onPixel