글

작성일자

AO 효과

Ambient Occlusion은 물체를 보다 다 입체적으로 보이는데 매우 중요한 요소입니다. 아래는 AO 뿐만 아니라 다양한 곳에 응용될 수 있는 블렌더 쉐이더 노드 구성입니다.

적용된 매시의 렌더링 결과를 보면 다음과 같습니다.

위의 노드 구성 중 Bevel은 오직 Cycles 렌더링에서만 작동하며 Bump 맵핑처럼 매시의 가장자리를 렌더링하기 위해 사용됩니다. 이 노드는 실제 매시의 지오메트리를 변경하지 않고 오직 쉐이더만으로 효과를 냅니다. 덧붙여 아래는 좀더 구체적인 응용을 위해 재구성된 노드입니다.

Noise Texture는 좀더 불규칙한(자연스러운) Bevel 효과를 얻기 위함이고 Multiply는 최종 효과를 보다 두드러지게 표현되도록 하기 위함입니다.

사실 위의 노드 구성은 AO를 위한 것은 아닙니다. AO에 대한 것만을 원한다면 이에 특화된 Ambient Occlusion 노드가 있으니 이를 이용하기 바랍니다.

작성일자

gwc-card + gwc-vscrollview 에서 resizing

gwc-card 내부에 gwc-vscrollview를 배치하고 자연스러운 resizing을 위한 코드인데 추후 범용적인 개선이 필요하기에 메모를 남김.

먼저 DOM 구성을 위한 코드는 다음과 같다.

const domLayout = document.createElement("div");
domLayout.classList.add("layer-editor-attributes", "gwc-show-animation");

const htmlContent = .... ;

const html = /* html */`
  
    
      
        

          

            ${htmlContent}
          

        

      
    
  
`;

domLayout.innerHTML = html;

const domCard = domLayout.querySelector("gwc-card");

domCard.resizablePanel.resizableLeft = false;
domCard.resizablePanel.resizableRight = true;
domCard.resizablePanel.resizableTop = false;
domCard.resizablePanel.resizableBottom = true;

domCard.resizablePanel.minWidth = 200;
domCard.resizablePanel.minHeight = 68;

스타일은 다음과 같다.

.layer-editor-attributes {
    width: 0;
    height: 0;
}

.layer-editor-attributes gwc-card {
    top: 120px;
    left: 20px;
    width: 270px;
    height: 180px;
}

.layer-editor-attributes gwc-card gwc-vscrollview {
    margin: 0.3em 0;
    width: 100%;
    height: 100%;
}

.layer-editor-attributes .content {
    height: 0;
}

.layer-editor-attributes .content .vertical-linear-layout {
    gap: 0.2em;
}

.layer-editor-attributes .content > div > div > gwc-label {
    width: 7.5em;
    zoom: 0.8;
}

.layer-editor-attributes .content gwc-textinput {
    flex: 1;
    zoom: 0.8;
}

.layer-editor-attributes gwc-resizable-panel {
    height: 100%;
}

위 스타일 코드 중 15번째에서 height를 0으로 주고 있다는 것이 핵심이다. 추후 이 부분에 대해서 그 이유를 파악하고 응용쪽이 아닌 컴포넌트 쪽에 반영할 필요가 있다.

작성일자

지오서비스웹 공간/속성 데이터 편집

지오서비스웹(GEOSERVICE-WEB)를 이용해 공간 데이터와 속성 데이터를 편집하는 기능에 대한 메뉴얼입니다. 지오서비스웹은 웹에서 공간 데이터를 쉽게 편집할 수 있는데요. 새로운 도형 생성 및 편집 삭제가 가능하고 도형 데이터와 연관된 속성 데이터 편집도 가능합니다.

편집 시작

먼저 SHP 파일을 압축해서 아카이브에 업로드합니다. SHP 파일을 압축할 때 확장자가 .shp, .dbf, .shx는 필수로 포함되어야 하고 .prj는 선택입니다. 만약 .prj를 포함하지 않을 경우 EPSG 값을 선택해 좌표계를 지정해야 합니다. 아카이브에 SHP 파일을 추가하면 아카이브 관리자를 통해 “레이어로 추가하기”를 실행(아래 그림 참조)하여 지도로 표시할 수 있습니다. 아래는 건물.zip에 대해 레이어로 추가하는 화면입니다.

레이어를 추가하면 아래처럼 레이어가 추가되고 지도에 표시됩니다. 추가된 레이어의 설정 버튼(아래 그림 1)을 클릭하면 표시되는 메뉴에서 “공간/속성 데이터 편집”(아래 그림 2)를 클릭합니다.

그러면 다음처럼 편집을 위한 툴바가 표시되어 편집을 시작할 수 있습니다.

새로운 도형 생성

새로운 도형을 생성하기 위해서는 먼저 편집툴에서 새로운 도형 추가 버튼(아래 그림 1)을 클릭하고 마우스를 이용해 지도 상에 생성하고자 하는 도형을 그립니다(아래 그림 2). 도형을 그릴 때 좌표 지정은 클릭이고 도형의 완성은 더블클릭으로 처리합니다. 더블클릭으로 도형이 완성되면 생성된 도형에 대한 속성을 입력할 수 있는 UI가 표시(아래 그림 3)되며 이 곳에서 속성값을 입력하면 됩니다.

새로운 도형 생성 중에 취소를 하려면 ESC 키를 누르면 됩니다. 또한 도형을 그리는 중에 가장 마지막에 추가한 정점을 제거하기 위해서는 Back Space 키를 누르면 됩니다.

이미 존재하는 도형 및 속성 편집

기존 도형을 편집하려면 먼저 편집툴에서 도형 선택 버튼(아래 그림 1)을 클릭해서 눌린 상태로 만듭니다. 그리고 편집할 도형을 클릭해서 선택하면 편집할 수 있는 정점이 표시됩니다(아래 그림 2). 선택된 도형의 속성은 속성 편집 UI를 통해 수정할 수 있습니다(아래 그림 3).

정점을 이동하거나 정점을 새롭게 추가할 수 있으며 정점을 삭제할 수 있습니다. 또한 멀티 폴리곤(또는 폴리라인)일 경우 새로운 파트를 추가하거나 파트를 제거할 수 있습니다.

  • 정점 이동 : 이동할 정점을 마우스 왼쪽 버튼으로 그래그(Drag)해서 이동 합니다.
  • 정점 삭제: 삭제할 정점 위에 마우스 커서를 위치하고 마우스 왼쪽 버튼을 누른 상태에서 Back-Space 키를 누릅니다.
  • 정점 추가: 정점을 추가할 도형의 선분 위에 마우스 커서를 위치하고 Shift 키를 누른 상태에서 클릭 합니다.
  • 새로운 파트 추가 : 새로운 파트를 추가할 시작 정점을 클릭해서 생성하고 더블클릭으로 완성합니다.
  • 파트 제거 : 제거할 파트 위에 마우스 커서를 위치하고 마우스 왼쪽 버튼을 누른 상태에서 Back-Space 키를 누릅니다.

이미 존재하는 도형 삭제

먼저 삭제할 도형을 선택하기 위해서 도형 선택 버튼을 클릭해서 눌린 상태(아래 그림 1)로 만듭니다. 그리고 삭제할 도형을 선택(아래 그림 2)한 후 도형 삭제 버튼(아래 그림 3)을 클릭하거나 Back-Space 키를 누르면 선택된 도형이 삭제됩니다.

편집된 레이어를 새로 저장

레이어를 편집하면 편집된 내용은 메모리에서만 유지됩니다. 편집된 레이어를 완전히 저장하기 위해서는 아카이브에 업로드 해야 합니다. 이를 위해서 먼저 저장할 레이어의 설정 버튼(아래 그림 1)을 클릭하면 표시되는 메뉴에서 “아카이브에 새로 저장”(아래 그림)를 클릭하여 진행하면 됩니다.