24
COLLADA to WebGL Experimenting using COLLADA to bring content from Unity to WebGL using Turbulenz and Fl4re exporter Rémi Arnaud [email protected]

COLLADA to WebGL (GDC 2013 presentation)

Embed Size (px)

DESCRIPTION

Experimenting using COLLADA to bring content from Unity to WebGL using Turbulenz and Fl4re exporter

Citation preview

Page 1: COLLADA to WebGL (GDC 2013 presentation)

COLLADA to WebGL

Experimenting using COLLADA to bring content from Unity to WebGL using Turbulenz and Fl4re exporter

Rémi Arnaud [email protected]

Page 2: COLLADA to WebGL (GDC 2013 presentation)

Content creation

game3D model

Images

Animations

Physics

Audio

Script

Page 3: COLLADA to WebGL (GDC 2013 presentation)

Content ‘Pipeline’

Packaging

Optimization

Physics

Textures, Shaders

Animations

Modeler

Object files

Animation files+ skins/bones

Shader files+ psd

Physics files

Binary files

package file

Multiple indexes, Quads

Clips, bézier, complex Transformation graph

Vertex / Fragment shaders

Convex Mesh, collliders

Single index, trianglesDXTs, simplified scene

Compressed folder

Page 4: COLLADA to WebGL (GDC 2013 presentation)

COLLADA – intermediate format

Packaging

Optimization

Physics

Textures, Shaders

Animations

Modeler

COLLADA

COLLADA

COLLADA

COLLADA

COLLADA

package file

Multiple indexes, Quads

Clips, bézier, complex Transformation graph

Vertex / Fragment shaders

Convex Mesh, collliders

Single index, trianglesDXTs, compressed anims

Compressed folder

Page 5: COLLADA to WebGL (GDC 2013 presentation)

COLLADA Refinery (2007)

https://collada.org/mediawiki/index.php/COLLADA_Refinery

COLLADA Refinery 2.0.3 conditionners

AxisconverterCompress TransformsStipperImage conversionAxis transformCoherencytest ** Use this !!CopyrighterDeindexerTriangulateVertex cache optimizationOptimizerPackager

Page 6: COLLADA to WebGL (GDC 2013 presentation)

COLLADA interchange?

Packaging

Optimization A

Physics A

Textures, Shaders A

Animations A

Modeler A

Packaging

Optimization B

Physics B

Textures, Shaders B

Animations B

Modeler B

Page 7: COLLADA to WebGL (GDC 2013 presentation)

COLLADA interchange?

Packaging

Optimization A

Physics A

Textures, Shaders A

Animations A

Modeler A

Packaging

Optimization B

Physics B

Textures, Shaders B

Animations B

Modeler B

COLLADA

COLLADA

COLLADA

COLLADA

COLLADA

Page 8: COLLADA to WebGL (GDC 2013 presentation)

COLLADA interchange?

Packaging

Optimization A

Physics A

Textures, Shaders A

Animations A

Modeler A

Packaging

Optimization B

Physics B

Textures, Shaders B

Animations B

Modeler B

COLLADA

COLLADA

COLLADA

Page 9: COLLADA to WebGL (GDC 2013 presentation)

COLLADA loader?

Packaging

Optimization A

Physics A

Textures, Shaders A

Animations A

Modeler A

Page 10: COLLADA to WebGL (GDC 2013 presentation)

COLLADA loader?

Packaging

Optimization A

Physics A

Textures, Shaders A

Animations A

Modeler A My modelerCOLLADA

Page 11: COLLADA to WebGL (GDC 2013 presentation)

COLLADA loader?

Packaging

Optimization A

Physics A

Textures, Shaders A

Animations A

Modeler A

My game

COLLADA

Polygons multiple indexes image format mesh optimization, split complex transform hierarchy no shader programs no collision volumes verbose text (xml) parsing

Page 12: COLLADA to WebGL (GDC 2013 presentation)

COLLADA – more tools available?

Packaging

WebGL packaging

OptimizationSimplygon Okino Atangeo MeshLab

PhysicsBullet PhysX Havok

Textures, ShadersPhotoshop FX Composer Render Monkey

AnimationsPoser DAZ Mixamo

ModelerMax Maya Blender Modo Cinema4D XSI

Page 13: COLLADA to WebGL (GDC 2013 presentation)

Unity Editor

Packaging

IOS, Andoid, PC, Web (plugin), Flash

OptimizationBuilt-in

PhysicsPhysX

Textures, ShadersShader Factory

Animations Mecanim

ModelerMax Maya Blender Modo Cinema4D XSI

?WebGL?

Fbx or simple COLLADA (e.g. no physics, morphing, shaders..)

http://unity3d.com/Unity Engine

Content pipeline

Page 14: COLLADA to WebGL (GDC 2013 presentation)

Turbulenz SDK (WebGL)

Packaging

json2tar , mapping.json, cgfx2json

Optimizationdae2json

PhysicsBullet PhysX Havok

Textures, ShadersPhotoshop FX Composer Render Monkey

AnimationsPoser DAZ Mixamo

ModelerMax Maya Blender Modo Cinema4D XSI

http://biz.turbulenz.com/developers

Imports COLLADA with physics

WebGL Turbulenz engine

Page 15: COLLADA to WebGL (GDC 2013 presentation)

Unity Editor -> WebGL Turbulenz using COLLADA !M

odel

er MaxMayaBlender…

Edito

r Unity

Expo

rter COLLADA

Conv

erte

r dae2json

web

G L

eng

ine Turbulenz

http://u3d.as/content/fl4re/collada-dae-exporter-for-unity/3cC

Page 16: COLLADA to WebGL (GDC 2013 presentation)

WIP: Unity Editor -> WebGL using COLLADA and glTF

Mod

eler Max

MayaBlender…

Edito

r Unity

Expo

rter COLLADA

conv

erte

r COLLADA2GLTF

Web

GL Turbulenz

Threejs...

https://github.com/KhronosGroup/glTF

Page 17: COLLADA to WebGL (GDC 2013 presentation)

WIP: Unity Editor -> WebGL using COLLADA , glTF and REST3D

Mod

eler Max

MayaBlender…

Edito

r UnityEx

port

er COLLADA

conv

erte

r glTF

Web

GL Turbulenz

Threejs...

http://rest3d.org

REST3D REST3D

Page 18: COLLADA to WebGL (GDC 2013 presentation)

Exporter UI

Page 19: COLLADA to WebGL (GDC 2013 presentation)

Animated Skinned mesh

Unity

PreviewYes!! (would love to select clip in preview)

TurbulenzYes!!(Picky on hierarchy, weapons attachment currently not by default in viewer app)

Page 20: COLLADA to WebGL (GDC 2013 presentation)

Physics ?

Unity- Need to have cameraand light to see physicsIn ‘run’ mode

Preview- No physics

TurbulenzYes!!(some limitations getting resolved )

Page 21: COLLADA to WebGL (GDC 2013 presentation)

Lightmap (glow) ?

Unity

Preview

Turbulenz- user provided shader

mapping to enable advanced lighting

Page 22: COLLADA to WebGL (GDC 2013 presentation)

animations?

Unity- SpiderRobots are ‘prefabs’Sharing the same animations-

Preview- Works only if animationsare shared!

TurbulenzYes!!- Some minor animation glitches

Page 23: COLLADA to WebGL (GDC 2013 presentation)

Summary

• Unity -> COLLADA -> Turbulenz– COLLADA fulfill its promises:• game developer can combine tools from different

vendors

– Turbulenz does a great job importing COLLADA• Remaining issues are being worked on

– glTF / REST3D• Those technologies will make it even easier and more

efficient to bring COLLADA to WebGL apps