Parallel and Perspective projection views

Hi,

Is there a way to set the view projection style like ‘Parallel projection’ / ‘Perspective projection’?
I could not find an API by taking a quick look at the documentation

With the latest release of the engine (3.6.0), the camera class now supports Orthographic(parallel) projections as well as perspective projections.

You can also blend between perspective and parallel by setting directly the ‘isOrthographic’ parameter to some value between 0 (perspective) and 1 (orthographic)

calling setIsOrthographic where the second parameter is some number, makes the Camera blend between the 2 modes taking the number of milliseconds to make the transition.

Some sample code for switching between the 2 can be found here:

1 Like

Thank Philip for the update. However, I am getting the following error after upgrading from 3.3 to 3.6…

@GLBaseRenderer#setupWebGL. The CANVAS element’s position must be other than static.
See: Zea Engine Documentation

with the following stack trace…

setupWebGL @ GLBaseRenderer.js:589
hl @ GLBaseRenderer.js:62
ul @ GLRenderer.js:30
ngAfterViewInit @ part-3dview.component.ts:69
callHook @ core.js:2512
callHooks @ core.js:2483
executeInitAndCheckHooks @ core.js:2434
refreshView @ core.js:9457
refreshComponent @ core.js:10552
refreshChildComponents @ core.js:9183
refreshView @ core.js:9436
refreshEmbeddedViews @ core.js:10506
refreshView @ core.js:9410
refreshComponent @ core.js:10552
refreshChildComponents @ core.js:9183
refreshView @ core.js:9436
renderComponentOrTemplate @ core.js:9500
tickRootContext @ core.js:10726
detectChangesInRootView @ core.js:10751
detectChanges @ core.js:22770
tick @ core.js:29492
(anonymous) @ core.js:29376
invoke @ zone-evergreen.js:368
onInvoke @ core.js:28513
invoke @ zone-evergreen.js:367
run @ zone-evergreen.js:130
run @ core.js:28397
next @ core.js:29375
schedulerFn @ core.js:25867
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:25857
checkStable @ core.js:28450
onHasTask @ core.js:28530
hasTask @ zone-evergreen.js:422
_updateTaskCount @ zone-evergreen.js:443
_updateTaskCount @ zone-evergreen.js:270
runTask @ zone-evergreen.js:191
drainMicroTaskQueue @ zone-evergreen.js:578
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:561
scheduleTask @ zone-evergreen.js:392
scheduleTask @ zone-evergreen.js:217
scheduleMicroTask @ zone-evergreen.js:237
scheduleResolveOrReject @ zone-evergreen.js:1262
then @ zone-evergreen.js:1406
bootstrapModule @ core.js:29162
zUnb @ main.ts:11
webpack_require @ bootstrap:79
0 @ main.js:11
webpack_require @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1

Here’e the sample code that tried…

<!doctype html>

Getting Started using Zea CAD body {font-family: Arial;}
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

.appstyle {
  background-color: #fff;
  width:800px;
  height:600px;
}	

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  background-color: #000;
  width:800px;
  height:600px;
}
London Paris
<!-- Tab content -->
<div id="London" class="tabcontent">
	<div id="london_app">
        <canvas id="londonapp" class="appstyle" width="auto" height="auto"></canvas>
	</div>
</div>

<div id="Paris" class="tabcontent">	
	<div id="paris_app">
        <canvas id="parisapp" class="appstyle" width="auto" height="auto"></canvas>
	</div>
</div>

<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
	tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
	tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
</script>

Hello @shailesh.limaye,

The Zea Engine uses the native ResizeObserver to achieve a fluid resizing of the canvas every time the viewport changes. In that way, the Zea Engine avoids infinite callback loops and cyclic dependencies.

For it to work properly in our particular case, it’s necessary to create a CSS positioning context for the canvas up in the hierarchy, where you find it most convenient (it’s easier than it sounds).

Please add this to your styles:

/* Styles for the parent of the canvas */
#paris_app {
  position: relative;
}

/* Styles for the canvas */
#parisapp {
  position: absolute;
}

Hi Mauro,

Making these changes does not take away the warning message…. (earlier there were 2 identical messages thrown now it is one message).

Also, I noticed that the display quality is very bad after making this change…. I have attached the before and after images.

If required I can demonstrate it you in a meeting.

Regards,

  • Shailesh

image001.png

You can customize your app’s styles to make them fit your needs. For instance, you can add styles for your other tab too:

/* Styles for the parent of the canvas */
#london_app {
  position: relative;
}

/* Styles for the canvas */
#londonapp {
  position: absolute;
}

This change got rid of the warning but the display quality is still bad. The default grid display becomes blurred (as clearly seen in the images in my last email) when I use the latest Zea engine.

Any idea why is this so and how can get it right? OR am I missing something/doing something incorrect?

Thanks,

  • Shailesh

That’s strange. Do you think you can share with me the full example? In GitHub for instance.

Mauro,

It’s a simple code …single html file. So, I have attached a zip file containing both versions of that html file.

Please open both html files in chrome and see the visual quality difference.

Regards,

  • Shailesh

(Attachment index - Zea3.6.zip is missing)

Mauro,

It’s a simple code …single html file.

So, I have attached both versions of that html file. Please open both html files in chrome and see the visual quality difference.

Regards,

  • Shailesh

(Attachment index - Zea3.3.html is missing)

(Attachment index - Zea3.6.html is missing)

Mauro,

It’s a simple code …single html file. So, I have put both versions of that html file in GitHub : https://github.com/shaileshlimaye/Prototypes.git

Please open both html files in chrome and see the visual quality difference.

Regards,

  • Shailesh

Thank you @shailesh.limaye, I’ll take a look and will let you know.

Thanks!

Were you able to reproduce the problem?

Regards,

  • Shailesh

I was able to repro, I’ll send you the fix as soon as I get some time.

Thank you.

@shailesh.limaye, please take a look at this PR Fix grid by mauroporras · Pull Request #1 · shaileshlimaye/Prototypes · GitHub

Thank you.

Phil,

Finally I could upgrade to 3.6 and the perspective/orthographic projection is working fine.

Thanks!

Thanks for letting us know Shailesh.