Rev. 2.73

WebGL.jpg

맛간을 이용해서 지난 시간에 소개CopperLicht를 훑어보았습니다. 위 화면은 Quake 3의 지형을 가져온 실행가능한 데모를 뽀려(?)온 것이며 WebGL을 지원하는 브라우저에서 정상 작동합니다. copperlicht.js를 로드하고 CopperLicht클래스의 인스턴스를 만드는 것으로 3D 엔진이 생성됩니다. CopperCube에서 만들어진 ".ccbjs" 파일은 base64로 인코딩되어 있으며, 엔진의 Ajax 호출 메서드로 3D 데이터를 로드하고 매핑 이미지 소스(JPG)는 개별적으로 호출합니다. OnLoadingComplete 콜백 함수가 발동하면 엔진 API로 접근하여 조작하는 방식입니다. 문제는 이 3D 엔진 라이브러리가 네임스페이스를 마구잡이로 사용하는데 있습니다. 특히 메이저 자바스크립트 프레임웍들이 즐겨사용하는 $를 변수로 사용하고 있어 충돌이 발생합니다. 그래서 copperlicht.js에 작성된 코드들을 익명함수로 둘러싸고 CopperLicht 클래스만 window에 할당하여 해결할 수 있었습니다. 간단한 사용 소감으로는 플래시로 구현된 것 보다 WebGL로 만들어진 쪽 성능이 더욱 좋다는 느낌을 받았습니다.

var engine = new CopperLicht('3darea');
if (engine.initRenderer()) {
  // start loading
  engine.load('quakelevel/index.ccbjs');
  engine.OnLoadingComplete = function() {
    // find active camera
    var scene = engine.getScene();
    if (scene && scene.getActiveCamera()) {
      // change the speed of the camera
      var animator = scene.getActiveCamera().getAnimatorOfType('camerafps');
      if (animator) animator.MoveSpeed = 0.52;
    }
  };
}

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar