Rev. 2.73


마우스 왼쪽 버튼을 클릭하면 작은 사각형 물체를 생성하며, 오른쪽 버튼을 클릭하면 화면을 초기화 합니다.

Robert Kieffer씨는 Box2D 물리엔진(Physics Engine) 라이브러리를 자바스크립트(Canvas 엘리먼트 사용)로 포팅한 Box2DJS를 공개하고 위와 같은 랜더링 결과물을 만들어 냈습니다. Box2D는 객체의 접촉과 마찰을 매우 사실적으로 표현하고, 프로그래머들이 애니메이션, 게임 등에 적용하여 보다 사실적인 화면을 연출할 수 있게하는 놀라운 시뮬레이션 라이브러리입니다. Box2DJS는 플래시 액션스크립트에서 사용되기 위해 만들어진 Box2DFlashAS3(1.4.3.1)를 변환한 것이라고 하네요. 따라서 API 문서역시 Box2DFlashAS3의 것과 동일한데요. 이 라이브러리를 써먹기 위해서는 world, shape, density, contact, friction, joint 등에 대한 용어 이해가 필요합니다. 약 60여개의 자바스크립트 파일들로 구성되어 있으며, PrototypeExplorerCanvas 라이브러리를 필요로 하는데, 그 이유는 Prototype이 상속 성능이 뛰어나기 때문이고 ExplorerCanvas는 IE에서도 Canvas 엘리먼트를 사용할 수 있게 해 주기 때문이랍디다.

표현의 수단으로 Canvas 엘리먼트가 사용된 것 뿐입니다. 굳이 Canvas 엘리먼트에만 Box2dJS를 사용할 수 있는 것은 아닙니다. CPU 부하로 인한 프레임 저하 현상은 시급히 해결해야 할 과제로 보이지만, 자바스크립트로 할 수 있는 재미있는 장난감이 또 하나 늘었네요. 물리법칙이 적용되는 게임도 쉽사리 만들어낼 수 있겠습니다.

CHANGELOG

  • 구글크롬 브라우저에서 더욱 원활한 렌더링 성능을 체험할 수 있습니다.
  • 프레임 처리 회수에 따라 드로잉 구간이 결정됩니다.(프레임 스킵)
  • 프레임이 낮은 경우 객체간 접촉을 감지하지 못하는 것을 보정합니다.
  • 객체 크기에 비례하는 밀도(무게)를 가집니다.
  • 프레임 처리 성능에 따라서 책정된 시간 간격으로 임의로 객체를 생성합니다.
  • 시간이 지날수록 FPS가 떨어지는 현상을 수정하였습니다.(객체 자동 제거)
  • 이 화면을 보고있지 않은 경우 작동을 일시 중지합니다.
  • 빈번한 호출이 발생하는 클래스에 네이티브 코드를 사용하여 엔진의 성능이 향상되었습니다.
  • IE계열 브라우저에서는 실버라잇가 설치된 경우 ExplorerCanvas 실버라잇 브릿지를 사용합니다.
  • IE8을 지원하는 ExplorerCanvas(r3 버전)를 사용합니다.

Comments

불러오고 있습니다...

불러오고 있습니다...

출발지: 도착지:
KML:

이번엔 구글어스 API와 한국지도 길찾기를 연동해 보았습니다. 위 화면이 보이지 않는 분은 플러그인을 별도로 설치해야 합니다. KML을 다루는 것과 시점 조작, 그리고 마커 생성 등에 대한 기초적인 사용방법을 익힐수 있었습니다. 맵과, 어스의 인스턴스를 개별적으로 생성한 후 두 인스턴스를 의동기화 시키는 방법으로 구현하였는데, 어스의 마커 이동과 카메라의 이동에서 싱크가 맞지 않는 문제가 발생하더군요. 결국 "google.earth.addEventListener"를 사용해서 프레임 단위로 모션을 처리하여 해결하습니다. 시스템 사양에 따라 처리하는 프레임 수가 다르며, 비효율적으로 작성된 함수를 대입한 경우 프레임 수는 더욱 떨어집니다. 따라서 프레임 수를 근거로 한 주행 속도와 남은 시간 및 거리 그리고 변속 위치 등을 산출해야 했습니다.(스스로 계산했다는 것이 믿기지 않음 ㅡ.ㅡ) 아래는 어스의 리스너에 의해 지속적으로 호출이 일어나는 함수에 포함된 계산식입니다.

var animate = function() {
  // 속도가 변경된 경우 현재 위치 계산
  if (curSpeed != newSpeed) {
    var distIdx = Math.round((curSpeed*i - newSpeed*i) / (curSpeed = newSpeed)); // 오차값
    balance = (balance / i) * (i += distIdx); // 인덱스 및 스택 값 재설정
  }

  // polyline으로부터 주행방향 좌표계산(GLatLng)
  var newLoc = Route.getPointAtDistance(curSpeed * i, polyline);

  // 모의주행 종료
  if (status == 'stop' || !newLoc) {
    status = 'idle';
    stopDrive();
    return statusEl.update('모의주행이 종료 되었습니다.');
  }

  // 초당 프레임 수 계산
  var now = new Date().getTime();
  balance += now - lastMillis; // 평균 프레임 산출을 위한 스택
  var fps = 1000 / (balance / i);

  // 화면 및 마커 이동
  drive(curLoc, geh.getHeading(curLoc, newLoc));
  marker.setPoint(curLoc);

  // 1초에 한번씩 진입(프레임 저하 방지)
  if (i % parseInt(fps) == 0) {
    map.panTo(newLoc); // 지도 패닝(프레임 저하 요소)
    var distRange = totalRange - curSpeed * i; // 남은 거리
    var speedPerHour = curSpeed * fps * 60 * 60; // 시속
    var timesLeft = new Date((distRange / speedPerHour) * 60 * 60 * 1000); // 남은 시간
    var houres = parseInt(timesLeft.getTime() / 60 / 60 /1000);
    // 메시지 업데이트
    statusEl.update([
      fps.toFixed(1) + ' FPS',
      '현재 시속 ' + Route.toKm(speedPerHour) + '로 주행 중이며',
      '도착지까지 남은 거리와 시간은 ' + Route.toKm(distRange),
      (houres > 0 ? houres + '시간 ' : '') +
      timesLeft.getMinutes() + '분 ' +
      timesLeft.getSeconds() + '초 입니다.'
    ].join(', '));
  }

  lastMillis = now;
  curLoc = newLoc;
  i++;
};

지역변수로 선언되어있지 않은 것은 상위 지역변수이거나 전역변수로 볼 수 있습니다.

길을 찾는 순서는 종전의 방식과 비슷하며, 맵에서 설정한 마커를 클릭하거나 이동하여 어스의 시점을 옮길 수 있고, 모의주행이 시작되면 어스의 화면이 3D 주행모드로 전환됩니다. 추가적으로 KML경로를 입력하면 실시간 반영됩니다. 예를 들어 aero님의 작업물인 "Daum Map On Google Earth" KML을 로드하려면 "http://aero.dnip.net/dmoge/daum_on_google2.kml"을 입력하세요. 다음의 고화질 위성사진이 오버레이 되는 것을 볼수 있습니다. 그리고 주행속도를 실시간으로 변경할 수 있게 하였으며, 한국지역 뿐만아니라 외국지역의 길찾기도 가능하게 하였습니다.(필라델피아, 뉴욕 등으로 검색해 보세요.) 이 작업을 끝으로, 지도 API로 해보고 싶었던 것들은 모두 해 보았네요. ㅎㅎ

Deprecated

* 다음의 길찾기 정보가 새롭게 갱신되어 위 데모는 더이상 작동하지 않습니다. 참고로 iRoute에서는 새롭게 변경된 다음의 길찾기 정보를 사용하고 있습니다.

Comments

출발지: 도착지:

구글맵 API다음 지도의 길찾기 검색 결과를 훔쳐(?)와서 조악한 길찾기 애플리케이션을 만들어 보았습니다. 이번 작업 역시 maps.js를 사용하였으며, 다음 지도는 콩나물 좌표계를 기본으로 사용기 때문에 'congnamul' 좌표계로 변환할 수 있게 하고, 소소한 유틸리티 메서드들을 추가하였습니다. 이거 이러다가 라이브러리화 될지도 모르겠네요. 시작과 끝점의 중앙값과 적절한 줌레벨을 얻기 위한 GLatLngBounds 클래스 사용법에 대하여 확실히 공부 할 수 있었습니다. "모의주행"은 폴리 라인(Polyline)의 교차점을 단위로 띄엄띄엄 이동하는 매우 저수준의 애니메이션으로 작업 되었습니다. 시간 대비 속도 및 거리등을 환산하여 조금 더 재미있게 발전시켜 볼 예정입니다. PC용으로 나온 GPS리시버를 로컬서버 데몬에 올리고 브라우저와 통신에 성공하기만 하면 웹기반 네비게이션 애플리케이션도 만들 수 있을 것 같아요!

Updates:

* 2009.02.09 미터법에 근거한 자동차가 달리는 애니메이션이 추가되었습니다.
* 2009.02.09 상태 표시창이 추가되었습니다.
* 2009.02.09 자동차가 달리는 속도를 산출하고 도착까지 남은 시간을 측정합니다.
* 2009.02.10 모의주행 도중 우측의 가이드 패널을 이용하여 해당 구간으로 즉시 이동할 수 있습니다.
* 2009.02.10 모의주행 시작시 두번씩 움직이는 오류를 수정하였습니다.

Deprecated

* 다음의 길찾기 정보가 새롭게 갱신되어 위 데모는 더이상 작동하지 않습니다. 참고로 iRoute에서는 새롭게 변경된 다음의 길찾기 정보를 사용하고 있습니다.

Comments