3D na webu - konference OpenAlt

11
3D Na webu Pavol Hejný PavolHejny.com 6.11.2016 | OpenAlt | Brno

Transcript of 3D na webu - konference OpenAlt

Page 1: 3D na webu - konference OpenAlt

3DNa webu

Pavol HejnýPavolHejny.com

6.11.2016 | OpenAlt | Brno

Page 2: 3D na webu - konference OpenAlt

Využití 3D na webu

● Hry, herní prvky

● Mapy

● (Fyzikální) simulace

● Produkty na eshopu

Page 3: 3D na webu - konference OpenAlt

2D vs. 3D

Page 4: 3D na webu - konference OpenAlt

Server vs. Browser

Wikipedia YouTube Facebook Google docs

Server Browser

Page 5: 3D na webu - konference OpenAlt
Page 6: 3D na webu - konference OpenAlt

Browser

Model

HTML canvas

DOMReactAngular(jQuery)

WebGLBabylonTree.jsA-Frame

Page 7: 3D na webu - konference OpenAlt
Page 8: 3D na webu - konference OpenAlt

Babylon TypeScript, Games

Page 9: 3D na webu - konference OpenAlt

A-FrameWebVR

<html>

<head>

<title>Hello, World!</title>

<script

src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>

</head>

<body>

<a-scene>

<a-box position="-1 0.5 -3" rotation="0 45 0"

color="#4CC3D9"></a-box>

<a-sphere position="0 1.25 -5" radius="1.25"

color="#EF2D5E"></a-sphere>

<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5"

color="#FFC65D"></a-cylinder>

<a-plane position="0 0 -4" rotation="-90 0 0" width="4"

height="4" color="#7BC8A4"></a-plane>

<a-sky color="#ECECEC"></a-sky>

</a-scene>

</body>

</html>

Page 10: 3D na webu - konference OpenAlt

ShadowShadow

Ground mesh

Plane mesh

Box meshSkybox

Light

Page 11: 3D na webu - konference OpenAlt

Díky za pozornost!

Díky za hodnocení:

a.openalt.cz/3122

PavolHejny.com

@pavolhejny

WebAppGames.com