웹저자를 위한 X3D 그래픽스 사용자 상호작용 8 장

Presentation on theme: "웹저자를 위한 X3D 그래픽스 사용자 상호작용 8 장"— Presentation transcript:

1 웹저자를 위한 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”.

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

3 개요

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

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

6 개념

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

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

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

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

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

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

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

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

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

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

17 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 면에서 • 유저에게 직관적인 방법으로 설계되는 것이 바람직하다.

18 X3D 노드와 예제

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

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

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

22

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

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

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

26

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

28

29

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

31 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 는 센서 결과를 위한 기본 출력 이벤트들이다.

32

33

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

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

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

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

38 CylinderSensor off-axis rotation design pattern 2

39

40

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

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

43

44

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

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

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

48

49

50

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

52

53

54

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

56

57

58

59

60 Chapter Summary

61 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

62 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

63 Additional Resources

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

65

66 DoubleClickTouchSensor
DoubleClickTouchSensor is a prototype alternative to TouchSensor that detects when a user has rapidly selected an object twice • • 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

67 TimeDelaySensor Prototype
TimeDelaySensor is an alternative to TimeSensor that includes a time delay before firing • • Prototype definition: TimeDelaySensorPrototype.x3d • ProtoInstance examples: TimeDelaySensorExample.x3d Fields match those of TimeSensor, plus: • delayInterval, delayCompleteTime

68 TimeSensorEaseInEaseOut Prototype
TimeSensorEaseInEaseOut is an alternative to TimeSensor with a slower ramp at beginning and end of a cycle, thus smoothing transitions • • 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

69

70 References

71 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 • • X3D Resources •

72 References 2 X3D-Edit Authoring Tool • https://savage.nps.edu/X3D-Edit
X3D Scene Authoring Hints • X3D Graphics Specification • • Also available as help pages within X3D-Edit

73 References 3 VRML 2.0 Sourcebook by Andrea L. Ames,
David R. Nadeau, and John L. Moreland, John Wiley & Sons, 1996. • • • Chapter 9 - Sensing Viewer 3D User Interfaces with Java3D by Jon Barilleaux, Manning Publications, 2001. • •

74 References 4 3D User Interfaces: Theory and Practice by
Doug A. Bowman, Ernst Kruijff, Joseph J. LaViola Jr. and Ivan Poupyrev, Addison Wesley, 2005. • • UI Book.html Understanding Virtual Reality: Interface, Application and Design by Bill Sherman and Alan Craig, Morgan Kaufmann, 2003. •

75 Conferences 1 ACM SIGGRAPH
• Special Interest Group on Graphics is the leading professional society for computer graphics and interactive techniques • 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 •

76 Conferences 2 IEEE Symposium on 3D User Interfaces (3DUI)
• IEEE Symposium on Virtual Reality (VR) • Web3D Symposium • In cooperation with Web3D Consortium, ACM SIGGRAPH and Eurographics •