타이어가 앞부분, 뒷부분이 나뉘어 각자의 축에서 움직여야 하는데 Tire 상위 노드에 한 데 묶임 → 각각 묶어주는 작업이 필요
Shift + Ctrl + 미들클릭으로 앞 부분의 타이어를 선택 후 드래그해서 Scene Graph의 가장 아래 부분으로 가져와 그룹으로 묶음(FL)
뒷 부분도 같은 방법으로 그룹으로 묶기
원래의 Wheel, Tire 상위 그룹 삭제
FL, RL을 반대쪽으로 넘기기
FL 우클릭 → 편집 → 복제 → 복제 미러링 Y 및 플러시(엠블럼 데칼이 따라올 수 있기 때문에 플러시로 선택)
기존에 적용된 Multipass를 복제하고, 그 안에 들어간 로고 이미지 삭제. 복제한 Multipass 우클릭 후 선택한 노드에 적용(Apply Selected Nodes)
그 안에 포르쉐 로고를 다시 적용해서 사이즈 조정
폴더 이름 FR로 변경 후 뒷 부분도 똑같이 진행 후 RR로 변경
총 네 가지의 Wheel&Tire를 묶어 달리는 애니메이션을 위한 준비가 완료 됨
2. Running Car
Transform을 켜고 피봇 위치를 확인해 객체 중심으로 바꿔주기
Y축으로 Rotation을 움직여야 하는 것을 확인
다른 Tire노드들 모두 축을 객체 중심으로 변경
곡선 편집기(Curve Editor)를 열어 각각 적용 가능한 채널 목록을 확인
Rotation Y를 조정해야 함. 일단 멈춰있는 상태에서 키를 잡기 위해 우클릭 → 선택 항목 키 지정(Key Seleted)
애니메이션 → 타임라인을 켜고 25프레임 선택. Rotation을 360으로 잡고 선택한 키를 지정 후 뷰의 프레임 곡선 선택
타임라인에서 프레임을 조절하면 돌아가는 것이 보이나 뒤로 돌아가기 때문에 25프레임 키를 잡고 -360 수정
FL 우클릭 → 블록 만들기. 곡선 데이터를 특정 구간으로 나누어 블록 형태로 변환하는 기능
적용된 모습을 보는 것은 카메라와 관련되어 있음
카메라를 켜고 모션 블러 사용(Enable Motion Blur) 체크. 1/125인 상태에서 안티앨리어싱을 누르면 너무 느리게 움직이는 것을 확인. 1/15로 설정하면 적당함
뒷바퀴에도 움직임과 카메라 설정 해주기. FL_Block을 복사해서 RL 노드를 선택한 후 붙여넣기
나머지 타이어 노드에도 적용
카메라로 확인하니 모두 움직임 적용 완료
자산 관리자에서 환경도 함께 적용하기. 스피드가 느껴지도록 환경을 수정해야 함
재질에 들어가 적용된 Airfield를 기본 자산 관리자와의 연결을 끊기 위해 우클릭 → 자산 → 링크 끊기(Remove Reference). 이 때부터 환경 수정이 가능해짐
0프레임에서 Center X의 키를 잡아주고, 25프레임에서 2000으로 값을 잡고 키 프레임 지정. 움직임과 배경이 맞게끔 값을 조절
움직임을 확인하고, 10000으로 다시 값을 수정
안티앨리어싱, 레이트레이싱을 켜서 리얼하게 차가 달리는 이미지를 만들 수 있음
환경을 Winding Road로 변경하고, 위치를 잡아주기
길의 휘어짐에 맞춰서 FL, RL의 각도도 바꿔줘야 함. Z 회전 30
곡선 편집기에서 기존의 움직임인 FL_Block, FR_Block의 체크는 꺼주고 새로 만들어줘야 함
FL, FR을 객체 중심으로 다시 잡아주기
0 프레임에서 FL의 Rotation Y의 키프레임 지정하고, 25프레임에서 값을 -360 넣어주고 키프레임 지정 → 블록 만들기
복사해서 FR에 붙여넣기
배경도 움직여야 하는데 X축으로만 움직이는 것이 아닌 살짝 회전이 되어야 함
아까와 같이 링크를 제거함
곡선 편집기에서 Rotate Z를 0프레임에서 키를 잡아주고, 25프레임에서 5도 정도로 잡음. 그리고 블록 만들기
안티앨리어싱으로 확인해보니 배경이 너무 빨리 돌아 5 → 1로 변경
카메라를 켜고 아웃 포커싱이 되는 Enable Depth of Field를 체크
F 스탑이 낮을수록 아웃포커싱이 많이 되고 높을수록 안됨
포커싱 맞출 곳을 적용해줘야 함. 뒤의 포르쉐 좌 더블클릭을 해서 그 부분 제외하고 나머지를 흐리게 표현하는 것
다이나믹한 뷰를 위해 롤을 조정해서 적용할 수 있음
윈도우 → 렌더 윈도우 크기 → 1280 x 720을 선택해 렌더뷰에 맞춰 화면 잡아주기
렌더링을 걸어서 이미지 확인해보기
타임라인, 곡선 편집기, 트랜스폼을 활용해 차량이 달리는 듯한 이미지 추출 완료
3. Interactive Interface
프레젠테이션을 효과적으로 하기 위한 반응형 인터페이스를 만들기
파일 가져오기(Add)로 Alias에서 만든 Switch 파일 가져오기
Alias에서 작업 후 .wire로 저장해서 불러온 것
Switch와 Body의 컬러를 입혀보도록 하자. Body 컬러가 입혀진 걸로 추정되는 Multipass를 우클릭 → 노드선택으로 확인한 후 Body Silver로 이름 변경
적용된 Metalic Silver Color를 두 번째 Switch에 드래그해서 적용하기
Switch에 다양한 Metalic 재질 입히기
포르쉐 로고를 살릴 수 있게 Body의 Multipass인 Body silver를 복제(Duplicate) → Body White로 이름 변경 후 Metalic White 재질을 드래그 앤 드롭 후 Silver 재질은 삭제. 재질이 노드보다 위에 위치해야 함
Surface와 Surface Symmetric 노드를 하나의 그룹으로 만들어 Body로 이름을 지정하고 Body를 눌러 Body white(Multipass)로 선택한 노드에 적용(Apply to Selected Nodes)
복제를 하며 7개의 스위치에 맞는 Multipass를 완성
Multipass Material을 하나로 통합시켜야 함. 하나를 선택해 선택항목으로부터 스위치 만들기(Create Switch from Seletion) 클릭
아이콘이 바뀌는 것 확인. 이름을 Body Switch로 바꾸고 여기에 다른 스위치 Multipass를 드래그 앤 드롭으로 넣기
현재 Metalic white로 적용된 Body를 Body Switch로 적용하기 위해 선택한 노드로 적용(Apply to Selected Nodes)
동일한 모델의 여러 변형을 만들어 각각의 특성을 조정할 수 있는 Variants Set을 저장해야 함. 7개의 항목을 만들고 이름 지정해주기
재질 탭으로 이동해서 각각 변형 세트에 Body Switch를 드래그 앤 드롭을 하고, 상태의 컬러를 이름과 맞춰주기
버튼들을 클릭했을 때 Variants Set이 적용되게끔 만들어야 함. 터치 센서를 켜고 Scene Graph에 있는 Switch들을 하나씩 옮겨주기
Variants Set과 Touch Sensor를 연결해주면 됨. Variants Set를 터치센서에 맞는 색으로 드로그 앤 드롭해서 넣어주기. Switch를 누르면 색이 바뀌는 것 확인
바디 부분을 선택했을 때 Switch들이 쫙 펼쳐지는 애니메이션이 작동하도록 만들기. 클립메이커를 켜서 Switch 노드를 누른 상태에서 마법사(Wizard) 클릭
완료 시간을 1초로 설정하고 캡쳐시작, 캡쳐완료 클릭
만들어진 클립의 애니메이션을 누르고 곡선 편집기에서 임의로 잡혀있는 키프레임 삭제(scale XYZ를 사용할 것이기 때문)
애니메이션을 하나 더 만들기. 하나는 스케일이 0에서 1 / 하나는 스케일이 1에서 0으로
Vatiants Set에 애니메이션 두 가지를 넣고 순차 애니메이션(Sequential animation) 체크
바디를 터치했을 때 오픈 클로즈가 일어나도록 터치 센서에 Body 노드를 넣고 Variants Set의 Opent Close를 그 하위에 드로그 앤 드롭
이제 바디를 클릭하면 Switch가 생겼다 사라졌다 하는 애니메이션이 적용됨
바디에 그림자가 없어서 Switch는 일단 노드를 안보이게 한 후 스튜디오 환경을 적용하고 링크 제거. 그림자 평면 표시(Shadow Plane Visible) 체크
쉐도우 플레인에 그림자가 비춰지도록 계산해야 함. 쉐도우 플레인을 클릭하고 라이트 및 그림자 계산에서 그림자 유형 → 그림자, 세분화에 체크 후 계산하기를 클릭하면 그림자가 생기는 것 확인
4. Lighting
환경이 아닌 라이트를 활용해 차량에 리플랙션이 맺히도록 하기
라이트 편집기에서 Rectangular Light로 반사판을 만들어 리플랙션 생성할 것
Top 뷰로 본 후 변환 → 카메라에서 가져오기(Get from Camera)를 누르면 보고있던 화면에서 라이트가 생성됨
길이를 늘리고 회전해 자동차에 빛이 길게 맺히도록 함
스튜디오의 배경이 안보이도록 하기 위해서 장면 → 장면 플레이트 편집기 → +로 Backplate 추가
HDRI와 별개로 Backplate는 한 마디로 배경에 본인이 원하는 이미지를 입힌다고 생각하면 됨
안티앨리어싱과 레이트레이싱을 켜서 그림자를 확인하고 없으면 재질 → 스튜디오(현재 내 환경) → 그림자 평면 표시
쉐도우 머티리얼의 링크를 제거
쉐도우의 반사(Reflection)에서 Reflectivity(반사도), Roughness(거칠기)를 조절해서 그림자 설정을 조절하기
스튜디오 환경의 Dome은 끄고 ShadowPlane은 남겨두기. 온전히 라이트에 의한 리플렉션만 만들어짐. 윈도우 사이즈는 1280 * 720으로 맞추기. 우측 하단 FOV도 25로 변환
라이트가 비춰지는 것을 보이지 않게 하려면 영역 라이트에서 기본 가시성(Primary Visibility) 체크 해제
라이트를 더 만들기 위해 직사각형 라이트 재 생성 → 카메라로 가져오기
실루엣만 보이는 이미지를 만들어보기
안티앨리어싱, 레이트레이싱, 라이트 모드 끄기
직사각형 라이트를 자동차 사이드에 생성해서 크기를 늘리기
환경 Studio의 Dome을 끄고, 라이트를 자동차 가까이 붙여 자동차쪽으로 회전한 후 위로 올리면 실루엣이 더 잘보이게 됨. 그림자 기본 가시성 체크 해제하고 강도를 높이기
숄더쪽 라이트를 약하게 넣으면 은은하게 디자인이 비치게끔 만들 수도 있음
5. Overay Preview
화면에 띄울 프리뷰는 직접 화면을 찍거나 이미지를 업로드해서 만들 수 있음
변형세트 → 각 속성 우클릭
파일 → 스크립트 편집기에서 아래 코드 복붙
'''
DISCLAIMER:
---------------------------------
In any case, all binaries, configuration code, templates and snippets of this solution are of "work in progress" character.
This also applies to GitHub "Release" versions.
Neither Simon Nagel, nor Autodesk represents that these samples are reliable, accurate, complete, or otherwise valid.
Accordingly, those configuration samples are provided “as is” with no warranty of any kind and you use the applications at your own risk.
Scripted by Simon Nagel
How to use:
- (optional) Export the Variants of your scene. File - Export Scene Data - Variants
- Remove the Variants from your Variant Set Module that you do not need in your overlay.
- Create a Preview for each Variant Set. Right Click on the Variant Set - Create Preview - Standard Quality
- Paste the Scene in the Script Editor of VRED and press run
- (optional) Export a VRED GO file. The Overlays are included.
'''
varSets = getVariantSets()
renderWindowSize = getRenderWindowHeight(-1)
thumbnailSize = round((renderWindowSize-8)/len(varSets),0)
fontSize = round(thumbnailSize/10,0)
arrayButton = []
arrayJsFunc = []
arrayVarSet = []
for i in range(len(varSets)):
currentVarSet = varSets[i]
varSetName = currentVarSet
varSetPreviewBla = base64.b64encode(getVariantSetPreview(currentVarSet))
varSetPreview = str(varSetPreviewBla)
varSetPreview = varSetPreview[2:]
varSetPreview = varSetPreview[:-1]
jsFuncName = "f"+str(i)+"()"
jsFuncPart1 = 'function '+jsFuncName+'{vred.executePython("value=selectVariantSet('
jsFuncPart2 = varSetName
jsFuncPart3 = ')"); };\n'
jsFunc = jsFuncPart1+"'"+jsFuncPart2+"'"+jsFuncPart3
button = '<button type="button" id="VP1" class="button1" onclick="'+jsFuncName+'" style="background-image: url(data:image/png;base64,'+str(varSetPreview)+');"></button><br> \n'
arrayButton.append(button)
arrayJsFunc.append(jsFunc)
buttons = ''.join(arrayButton)
jsFuncs = ''.join(arrayJsFunc)
varSetss =''.join(arrayVarSet)
style = '<head>\n<style>\n button {\n background-size: 100%;\n border-style: none; \n width: '+str(round(thumbnailSize+(thumbnailSize/32),0))+';\n height: '+str(thumbnailSize)+';\n color:white; \n font-size:'+str(fontSize)+'px; \n font-family: sans-serif; \n text-shadow: 1px 1px #000000;\n}\n</style>\n</head>\n'
url = '<html>\n'+style+'<body style="overflow:hidden;">\n<div>\n'+buttons+' \n</div> \n<script>\n'+jsFuncs+'\n</script>\n</body>\n</html>'
#add URL to sceneplate
allSceneplates = vrSceneplateService.getAllSceneplates()
allSceneplates = vrSceneplateService.getAllSceneplates()
sceneplateToDelete = []
del sceneplateToDelete[:]
for i in range(len(allSceneplates)):
sceneplateName = allSceneplates[i].getName()
print sceneplateName[0:18]
if sceneplateName[0:18] == "HTMLVariantOverlay":
sceneplateToDelete.append(allSceneplates[i])
vrSceneplateService.removeNodes(sceneplateToDelete)
sceneplate = vrSceneplateService.createNode(vrSceneplateService.getRootNode(), vrSceneplateTypes.NodeType.Frontplate, "HTMLVariantOverlay")
sceneplate.setWidth(1920)
sceneplate.setHeight(1080)
sceneplate.setContentType(vrSceneplateTypes.ContentType.Web)
sceneplate.setSize(1)
sceneplate.setUrl(url)
vrSceneplateService.reloadWebPage([sceneplate])
