웹저자를 위한 X3D 그래픽스 사용자 상호작용 8 장 Nobody knows the kind of trouble we're in. Nobody seems to think it all might happen again. Gram Parsons, “One Hundred Years from Now”.

내용 개요 개념 X3D 노드와 예제 요약 맟 제안 연습 추가 자원 및 참고문헌

개요

개요: 사용자 상호작용 사용자 상호작용은 사용자 입력을 받아들이는 센서노드에 의해 개시되며 적절한 반응을 제공하도록 되어 있다. • TouchSensor 는 마우스와 같은 포인팅 디바이스를 감지한다. • PlaneSensor 는 평면상에서 x-y 포인터 모션을 변환하여 평면상에서 물체를 이동시키는 드래그 센서이다. • CylinderSensor 와 SphereSensor 는 x-y 포인터 모션을 변환하여 물체를 회전시키는 드래그 센서이다. • KeySensor 와 StringSensor 는 키보드 입력을 받아들인다. 상호작용 센서는 애니메이션 체인이 시작되도록 한다.

관련 노드 4장, 뷰잉 및 네비게이션 노드 12장, 환경 센서와 사운드 • Anchor: 포인팅 디바이스 • 다른 뷰포인트를 선택하거나 다른 장면을 로드한다. • 포인팅 디바이스가 기하 위를 지나갈 때 설명을 보인다. • Billboard 는 자식 기하가 유저를 향하도록 회전시킨다. • Collision 은 뷰어가 기하와 충돌하는지를 보고한다. 12장, 환경 센서와 사운드 • LoadSensor 는 미디어 자산이 로드될 때 보고한다. • ProximitySensor 는 유저가 가까이 오면 보고한다. • VisibilitySensor 는 유저의 현재 카메라 뷰가 기하를 볼 수 있을 때를 나타낸다.

개념

사용자 상호작용의 중요성 ∙애니메이션 장면은 변화 없는 정적 기하보다는 재미가 있다. ∙ X3D 상호작용은 사용자 동작을 감지하고 적절한 반응을 내보낸다. ∙ 사용자 지침이나 제어에 반응하는 행동을 포함하는 장면은 보다 생동적이다. ∙ 네비게이션과 상호작용은 사용자의 현실감과 몰입감에 기여한다. ∙ 따라서 애니메이션 동작은 반사적이고 명확하게 사용자에 반응한다.

센서는 이벤트를 발생 센서는 다양한 사용자 상호작용을 감지하고 장면내 라우팅되도록 이벤트를 발생한다. 각 센서는 특정 상호작용을 감지하고 하나 이상의 이벤트를 발생한다. 저자는 사용자 상호작용을 기술하는 이벤트가 어떻게 해석되고 처리되는가를 결정한다. 이 방법은 저자에게 매우 큰 융통성을 제공한다.

장면에서의 센서 사용 세 가지 공통 디자인 패턴 (→ = ROUTE) • Trigger (sensor) → Clock → Interpolator → Target node • Sensor → Target node • Sensor → Script (adaptor) → Target node

포인팅 디바이스 포인팅 디바이스(Pointing device)는 장면에서 유저와 기하의 상호작용을 위한 기본 툴이다. • 마우스, 터치 패드, 터치 스크린, 트래킹 스타일러스 (tracking stylus) • 화살표, 엔터, 다른 키들도 사용 • 트랙볼, 데이터 장갑(data glove), 게임 컨트롤러 • 트래킹 막대기(Tracking wand) 혹은 몰입형 3D 환경에서의 다른 디바이스들 • 눈 트래커(Eye trackers) 나 다른 디바이스들 X3D 센서는 일반 포인팅 디바이스와 같이 사용하도록 되어 있어 휴대성 있는 장면을 제공한다.

감지된 기하 교차와 선택 포인팅 디바이스는 유저가 의도된 방향, 이동, 선택이 되도록 통신한다. • 브라우저와 뷰어는 보통 2D 아이콘을 겹쳐서 유저의 의도된 포인팅 방향을 표시한다. • 2D 오버레이 아이콘(overlay icon)이 선택 표시를 바꿀 수 있다. 센서들은 장면그래프에서 해당되는 형제와 자식 노드들과 반응한다. • 다른 기하를 포인팅하면 센서 활성화가 더 이상 가능하지 않은 것을 의미한다. • 보통 한 센서는 다른 센서가 활성화되기 전에 비활성화되어야 한다.

공통 필드: enabled enabled 는 센서 노드를 켜고 끄는 inputOutput 이진 필드이다. 저자가 다른 반응을 유발하는 유저에 의한 이벤트를 허용하거나 중단시키도록 한다. enabled='false' 로 설정하면 이벤트 체인을 방해한다. enabled='true‘ 설정 여부와 관계없이 센서는 출력으로부터 ROUTE 연결을 필요로 한다. 그렇지 않으면 아무런 반응도 일어나지 않는다.

공통 필드: isOver isOver 는 outputOnly 이진 필드로서 감지된 기하를 포인팅하는 것을 보고한다. isOver true 값은 포인터가 모양 위에 있을 때 보냄 isOver false 값은 포인터가 모양 위에 더 이상 없을 때 보냄 선택이 발생하면 isOver false 는 선택이 해제될 때까지 더 이상 일어나지 않는다. isOver 값이 전달되면 애니메이션이 생성될 수 있다. 신속한 on/off 열(sequence) 생성은 어려운 점이 있다. 이 애니메이션은 포인팅 디바이스에서 벗어나서 뷰포인트나 기하를 움직이지는 못한다는 점을 주의한다.

공통 필드: isActive isAtive 는 센서가 유저 입력을 받았을 때 보고하는 outputOnly 이진 필드이다. • isActive true 값은 선택이 시작되면 보낸다. • isActive false 값은 선택이 해제되면 보낸다. • isActive true 값은 센서가 처음 활성화될 때 선행하여 일어난다. isActive 값은 TimeSensor 노드나 다른 애니메이션 노드를 활성화하거나 비활성화할 수 있다. • 급속한 on/off 열 생성은 어려움이 있으나 • BooleanFilter, BooleanToggle, BooleanTrigger 도 유용하다 : 9장 이벤트 유틸리티와 스크립팅 참고

공통 필드: description 각 센서의 description 필드는 유저에게 각 센서의 존재와 의도하는 목적을 통지한다. X3D 명세는 브라우저에게 description 문자열이 어떻게 디스플레이할지 융통성을 제공한다. • 오버레이 텍스트(overlay text), 윈도우 경계 텍스트, 혹은 오디오

드래깅(Dragging) 드래깅은 감지된 물체를 선택하여 센서가 활성화되어 있는 동안 포인팅 디바이스를 움직이게 하는 것을 의미한다. 이 유저 동작은 드래깅 모션이 일어나는 동안 연속적인 출력 이벤트를 발생하도록 한다. • Click + drag + release = Select + hold + release 여러 공통 필드 ● enabled, description, isActive, isOver, touchTime 세 가지 X3DDragSensorNode 타입 센서 ● CylinderSensor, PlaneSensor, SphereSensor

2D 디바이스를 이용한 3D (6DOF) 제어 선택된 물체는 3D 공간에 위치한 3D • 3D 물체 모션을 위해 6 자유도 (degrees of freedom, DOF) 제공 (예, x, y, z, roll, pitch, yaw) 그러나 대부분의 포인팅 디바이스는 좌-우, 상-하의 2D 제어를 한다. • Mouse, touchpad or touch screen, keyboard, 등. 2D 출력 디바이스를 3D/6DOF 모션으로 매핑시켜야 한다. • 각 드래그 센서는 2D 모션을 어떻게 해석할지 정의한다: cylinder, plane, sphere 면에서 • 유저에게 직관적인 방법으로 설계되는 것이 바람직하다.

X3D 노드와 예제

TouchSensor 노드 TouchSensor 는 근접한 기하에 영향을 주고 기본 포인트 디바이스의 접촉 상호작용을 제공한다. • 처음 포인팅 되면 isOver true 이벤트를 보낸다. • 선택되면 isActive true 이벤트를 보낸다. • 선택 해지되면 isActive false 이벤트를 보낸다. • 더 이상 포인팅 되지 않으면 isOver false 이벤트를 보낸다. 선택은 유저에 의한 고의적 동작이다. 예를 들어, • Mouse, touchpad, touchscreen: 좌측 버튼 클릭 • Keyboard: 엔터 키 • 3D wand: 선택 버튼

감지된 기하 그룹핑 1 TouchSensor 노드가 감지될 수 있는 모든 기하 감지된 기하 그룹핑 1 TouchSensor 노드가 감지될 수 있는 모든 기하 그룹핑 노드 (Group, Transform, etc.) 를 사용하여 관심있는 감지된 기하를 고립시킨다. • 전체 장면을 선택할 수 있도록 하지 않는다. 그렇지 않으면 상호작용이 매우 복잡해진다. 다른 작업을 위해서 다른 센서들을 자체적인 설명 기하에 부착시킨다. 예를 들어 • Light switch isOver: 이름을 주고 클릭하면 변하도록 • 빌보드(Billboard) 텍스트 혹은 버튼: 여러 번 제어를 위해서

감지된 기하 그룹핑 2 그룹핑 노드에 의해 감지된 기하는 다른 모양들과 분리시킨다. 다음 슬라이드에서 예제 발췌됨 • 4장 – ViewingNavigation/BindOperations.x3d 이 예제를 위한 장면 구조 • 이벤트를 소비하고 생산하는 뷰포인트 • 기하 디스플레이 센서가 없는 경우 • 선택된 기하와 TouchSensor • 정규 애니메이션 디자인 패턴 : TimeSensor, Interpolator, target Script node, ROUTE connections

여러 TouchSensor 노드 ∙그룹핑 된 기하의 일부만을 감지할 수는 없다. – 기하 그룹을 분리하지 않으면 일부만은 안되며 유저에게는 단일 모양처럼 변환된다. ∙ 여러 개 TouchSensor 노드, ROUTE 와 이벤트 체인을 이용하여 여러 작업을 수행할 수 있다. ∙ 하나의 TouchSensor 노드의 DEF, USE 를 이용하여 여러 모양들에게 같은 동작을 촉발시킬 수 있다. ∙ 여러 TouchSensor 노드가 같은 레벨에 있거나 주어진 기하 위에 있으면 가장 가까운 것에 적용 – 같은 거리에서 묶여 있으면 한번에 활성화된다.

출력 이벤트 touchTime touchTime 감지된 기하가 선택 해지되면 SFTime 출력 이벤트를 보낸다. 동시에 isActive false 이벤트가 보내진다. touchTime 을 위해서는 세 가지 선행 조건 필요 1. 포인팅 디바이스가 감지된 기하를 포인팅하며 시작 (isOver true 이벤트 발생) 2. 포인팅 디바이스가 유저 선택에 의해 초기 활성화 되었을 때 (isActive true 이벤트 발생) 3. 포인팅 디바이스가 감지된 기하를 포인팅 하는 동안 연속적으로 비활성화되었을 때 (isActive false 이벤트 발생)

출력 이벤트 hitPoint_changed, hitNormal_changed, hitTexCoord_changed • 지역 좌표로 참조되는 선택 포인트의 3D 위치 좌표를 제공하는 출력 SFVec3f 이벤트를 보낸다. hitNormal_changed • 선택 점에 있는 기하의 법선 벡터를 제공하는 출력 SFVec3f 이벤트를 보낸다. hitTexCoord_changed • 선택 점에 있는 텍스처의 2D (u, v) 좌표를 제공하는 출력 SFVec2f 이벤트를 보낸다.

예제: 문 열기 3D 장면에서 상호작용은 글자 그대로일 필요는 없다. 문을 열 때 문 손잡이를 돌리기 보다는 문을 클릭하는 것이 쉽다. 다음 예는 TouchSensor 선택을 비교한다. • 좌측 도어는 처음 선택으로 열린다(클릭) • 우측 도어는 나중 해지로 열린다 (클릭 해제) 주요 차이점: isActive 는 처음엔 true 이고 다음엔 false 이다. • 해결책으로 BooleanFilter 와 TimeTrigger 를 통한 이벤트 라우팅은 TimeSensor 를 적절하게 시작하게 한다. • 이들은 이벤트 유틸리티 노드로서 9장에서 다룬다.

PlaneSensor 노드 PlaneSensor 는 포인팅 디바이스에 의해 x-y 드래깅 모션을 평면상 면 이동으로 변환한다. • 2 개값 모션이 3 개값 SFVec3f 로 변환 • 모션은 지역 z=0 평면 (스크린 평면) 과 평행 장면그래프의 기하에 의해 활성화된다. • 센서 자체는 배경 기하나 감지된 모양이 평면이 아니면 렌더링 되지 않는다. 이동 출력 값들은 ROUTE 연결에 의해 부모 Transform 이동을 따른다. • 혹은 다른 SFVec3f 값으로 연결된다.

PlaneSensor 필드, 이벤트 • 선택되면 isActive true 이벤트를 보낸다. • 선택 해지되면 isActive false 이벤트를 보낸다. • minPosition, maxPosition 은 평면 영역에서 허용되는 SFVec2f 값들로 정의된 X-Y 이동값을 제한한다. • 예: minPosition=＇-2 -2＇ maxPosition=＇2 2＇ • offset 은 최근 혹은 초기 SFVec3f 위치 값을 가진다. • autoOffset='true' 는 새로운 드래그 선택 개시에 앞서 이동을 기억하며, 아니면 autoOffset='false‘ 로 초기 위치에서 다시 시작한다. • translation_changed 과 trackPoint_changed 는 센서 결과를 위한 기본 출력 이벤트들이다.

CylinderSensor 노드 CylinderSensor 는 포인팅 디바이스에 의한 x-y 드래깅 모션을 한 축을 중심으로 한 회전으로 변환한다. • 2개 값 모션이 4개 값 SFRotation 으로 변환된다. • 회전은 지역 좌표계의 y축으로 제한된다. 장면 그래프의 기하에 의해 활성화 • 센서 자체는 감지된 모양이 실린더가 아니면 렌더링되지 않는다. 회전 출력 값들은 부모의 Transform 회전으로 ROUTE 연결을 따른다. • 혹은 다른 SFRotation 필드와 연결된다.

CylinderSensor diskAngle 과 선택 점이 트래킹 모드를 결정한다 유저가 드래그 실린더의 끝 혹은 옆면을 선택한다. • diskAngle 는 축에서 터치 점까지를 측정한다. • 센서를 조정하여 실린더 모양에 접근하도록 한다. • 방위각(bearing angle)은 축으로부터 유저의 트랙 포인트까지로 측정된다.

CylinderSensor 필드, 이벤트 • 선택되면 isActive true 이벤트를 보낸다. • 선택 해지되면 isActive false 이벤트를 보낸다. • minAngle, maxAngle 은 회전을 제한한다. • 디폴트 값들은 정렬되고 항상 라디안 사용 • 예: minAngle=＇-3.14159＇ maxAngle=＇-3.14159＇ • offset 은 최근 혹은 초기 회전값을 가진다. • autoOffset='true' 은 새로운 드래그 선택을 개시하기 전 회전으로 기억하거나 아니면 autoOffset=＇false＇ 으로 초기 회전으로 다시 시작한다. • rotation_changed 와 trackPoint_changed 는 센서 결과를 위한 기본 출력 이벤트들이다.

CylinderSensor off-axis 회전 디자인 패턴 1 CylinderSensor 는 지역 좌표계 Y축을 중심으로 회전한다. • 축의 오프셋을 위한 내부 필드는 제공되지 않는다. • 회전축을 감지된 기하와 다르게 하는 것은 까다롭다. 다음의 장면 그래프 디자인 패턴은 CylinderSensor 가 다른 축을 어떻게 회전하는지 보여준다. • 원하는 축을 먼저 회전하고 CylinderSensor 는 자식이 된다. • 다음은 원래의 Y 축을 복원하여 두 번째 Tranform 회전하고 감지된 기하를 자식으로 둔다.

CylinderSensor off-axis rotation design pattern 2

SphereSensor 노드 SphereSensor 는 포인팅 디바이스에 의한 x-y 드래깅 모션을 임의 회전으로 변환한다. • 2개값 모션을 4개값 SFRotation으로 변환한다. • 지역좌표계 원점을 중심으로 회전한다. 장면그래프 기하(peer geometry)에 의해 활성화된다. • 대응하는 센서 모양 형태가 아니면 구센서 자체는 렌더링되지 않는다. 회전 출력 값들은 부모 Transform 회전 필드로 ROUTE 연결된다. • 혹은 다른 SFRotation 필드로 연결된다.

SphereSensor 필드, 이벤트 • 선택되면 isActive true 이벤트를 보낸다. • 선택 해지되면 isActive false 이벤트를 보낸다. • offset 는 최근 혹은 초기 회전 값을 갖는다. • autoOffset=＇true＇ 는 새로운 드래그 선택을 개시하기 전의 이전 회전을 기억하며, 아니면 autoOffset=＇false＇ 는 초기 회전으로 다시 시작한다. • rotation_changed 과 trackPoint_changed 은 센서 결과를 위한 기본 출력 이벤트들이다. 다른 센서들과 같이 description, enabled 을 포함한다.

KeySensor 노드 KeySensor는 한번에 한 문자 인터페이스이며 유저 키보드에서 키를 눌러 얻는다. • 메뉴 선택으로 선택할 때 유용 • 특별한 키보드에 의한 네비게이션 인터페이스 생성에 유용 • 키 이름만 주고 Shift 문자는 아님 Control, alt, shift 키는 별도 이벤트로 보내진다. • 특별 동작 키를 포함하는 것과 같음 키 이벤트는 Script 노드를 필요로 한다. • 9장 이벤트 유틸리티 및 스크립팅에서 다룬다.

KeySensor 이벤트 1 • 선택되면 isActive true 이벤트를 보낸다. • 선택 해지되면 isActive false 이벤트를 보낸다. • keyPress, keyRelease 는 특정 키가 눌러지면 SFString 값을 제공한다. • 보통 대문자 혹은 기본 키 기호 • shiftKey, altKey, controlKey 는 키가 눌러졌는지 해제되었는지를 나타내는 SFBool 이진 값들이다. KeySensor 도 역시 enabled 필드를 갖는다. • 그러나 description은 없다.

KeySensor 이벤트 2 • actionKeyPress, actionKeyRelease 는 눌러질 때와 해제될 때 SFInt32 값들을 제공한다.

StringSensor 노드, 이벤트 StringSensor 는 유저 키보드의 문자열 기반 인터페이스이다. • 각 문자 키 입력은 엔터키가 나올 때까지 수집되어 finalText 문자열을 완성한다. • 중간 문자열 결과 (삭제 포함하여)도 가능하며 enteredText 문자열로 진행된다. • deletionAllowed 는 <Backspace>, <Delete> 키를 활성화하는 이진 필드이다. StringSensor 는 isActive 이벤트 활성화 필드를 가진다. • description 은 없음.

예제: 사용자 상호작용 센서 노드 UserInteractivitySensorNodes.x3d • TouchSensor Cone을 선택(클릭과 잡기)하여 Background 노드와 교대한다. • PlaneSensor 선택과 드래그 -- 스크린 위 박스 • CylinderSensor 를 회전하기 위해 선택과 드래그 -- Cylinder • SphereSensor 를 돌리기 위해 선택과 드래그 -- Sphere 키보드 입력도 활성화된다. • KeySensor 는 keyPress 를 나타낸다. • StringSensor 는 엔터 키가 눌러지면 finalText 를 보인다. • Console 은 enteredText 를 보여준다(삭제도 포함하여)

Chapter Summary

Summary: User Interactivity User interactivity is initiated via sensor nodes, which capture user inputs and are hooked up to provide appropriate responses • TouchSensor senses pointing device (mouse, etc.) • PlaneSensor is a drag sensor that converts x-y pointer motion to move objects in a plane • CylinderSensor and SphereSensor are drag sensors that convert x-y pointer motion to rotate objects • KeySensor and StringSensor capture keyboard input Interactivity sensors initiate animation chains

Suggested exercises Illustrate and annotate ROUTE connections in an animation scene graph (documenting 10 steps) • Print out one of these scenes in landscape mode, either using the X3dToXhtml.xslt stylesheet version or Netbeans-provided 'Save as HTML' option. • Then draw all ROUTE connections, label beginning and end of each by name, type and accessType • Best candidate: UserInteractivitySensorNodes.x3d Draw animation chain diagrams to document behaviors in your own example scenes • Add use-case summaries about user intent

Additional Resources

ArbitraryAxisCylinderSensor Prototype ArbitraryAxisCylinderSensor is a prototype that simplifies the design pattern of aligning a CylinderSensor about an arbitrary axis • https://savage.nps.edu/Savage/Tools/Animation • Prototype definition: ArbitraryAxisCylinderSensorPrototype.x3d • ProtoInstance examples: ArbitraryAxisCylinderSensorExamples.x3d Fields match those of CylinderSensor, plus: • shiftRotationAxis, center, children, plus show/scale/color/transparency of CylinderSensorShape

DoubleClickTouchSensor DoubleClickTouchSensor is a prototype alternative to TouchSensor that detects when a user has rapidly selected an object twice • https://savage.nps.edu/Savage/Tools/Animation • Prototype definition: DoubleClickTouchSensorPrototype.x3d • ProtoInstance examples: DoubleClickTouchSensorExample.x3d Fields match those of TouchSensor, plus: • maxDelayInterval allowed for distinguishing between single and double click, in seconds

TimeDelaySensor Prototype TimeDelaySensor is an alternative to TimeSensor that includes a time delay before firing • https://savage.nps.edu/Savage/Tools/Animation • Prototype definition: TimeDelaySensorPrototype.x3d • ProtoInstance examples: TimeDelaySensorExample.x3d Fields match those of TimeSensor, plus: • delayInterval, delayCompleteTime

TimeSensorEaseInEaseOut Prototype TimeSensorEaseInEaseOut is an alternative to TimeSensor with a slower ramp at beginning and end of a cycle, thus smoothing transitions • https://savage.nps.edu/Savage/Tools/Animation • Prototype definition: TimeSensorEaseInEaseOutPrototype.x3d • ProtoInstance examples: TimeSensorEaseInEaseOutExample.x3d Fields match those of TimeSensor • Slight linear slowdown for first and last 10% • Slight linear speedup in between

References

References 1 X3D: Extensible 3D Graphics for Web Authors by Don Brutzman and Leonard Daly, Morgan Kaufmann Publishers, April 2007, 468 pages. • Chapter 8, User Interactivity • http://x3dGraphics.com • http://x3dgraphics.com/examples/X3dForWebAuthors X3D Resources • http://www.web3d.org/x3d/content/examples/X3dResources.html

References 2 X3D-Edit Authoring Tool • https://savage.nps.edu/X3D-Edit X3D Scene Authoring Hints • http://x3dgraphics.com/examples/X3dSceneAuthoringHints.html X3D Graphics Specification • http://www.web3d.org/x3d/specifications • Also available as help pages within X3D-Edit

References 3 VRML 2.0 Sourcebook by Andrea L. Ames, David R. Nadeau, and John L. Moreland, John Wiley & Sons, 1996. • http://www.wiley.com/legacy/compbooks/vrml2sbk/cover/cover.htm • http://www.web3d.org/x3d/content/examples/Vrml2.0Sourcebook • Chapter 9 - Sensing Viewer 3D User Interfaces with Java3D by Jon Barilleaux, Manning Publications, 2001. • http://www.manning.com/barrilleaux • http://java.sun.com/developer/Books/Java3D

References 4 3D User Interfaces: Theory and Practice by Doug A. Bowman, Ernst Kruijff, Joseph J. LaViola Jr. and Ivan Poupyrev, Addison Wesley, 2005. • http://www.3dui.org • http://people.cs.vt.edu/~bowman/3dui.org/3D UI Book.html Understanding Virtual Reality: Interface, Application and Design by Bill Sherman and Alan Craig, Morgan Kaufmann, 2003. • http://www.immersence.com/publications/2003/2003-WSherman.html

Conferences 1 ACM SIGGRAPH • Special Interest Group on Graphics is the leading professional society for computer graphics and interactive techniques • http://www.siggraph.org ACM SIGCHI • Special Interest Group on Computer-Human Interaction, brings together people working on the design, evaluation, implementation, and study of interactive computing systems for human use • http://www.sigchi.org

Conferences 2 IEEE Symposium on 3D User Interfaces (3DUI) • http://conferences.computer.org/3dui IEEE Symposium on Virtual Reality (VR) • http://conferences.computer.org/vr Web3D Symposium • In cooperation with Web3D Consortium, ACM SIGGRAPH and Eurographics • http://www.web3d2009.org