GIS Developer

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

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

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

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

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

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으로 주고 있다는 것이 핵심이다. 추후 이 부분에 대해서 그 이유를 파악하고 응용쪽이 아닌 컴포넌트 쪽에 반영할 필요가 있다.

글

AO 효과

gwc-card + gwc-vscrollview 에서 resizing