Past Projects
Lightworks WebGL Car Configurator with Cloud Raytracer
Client
LIGHTWORKS
{"items":["c609bb_68167856c1874fb9a7e16a6e16dc5041"],"styles":{"galleryType":"Strips","groupSize":1,"showArrows":0,"cubeImages":true,"cubeType":"fill","cubeRatio":"100%/100%","isVertical":false,"gallerySize":35,"collageAmount":0.8,"collageDensity":1,"groupTypes":"1","oneRow":true,"imageMargin":0,"galleryMargin":0,"floatingImages":0,"chooseBestGroup":true,"smartCrop":false,"hasThumbnails":false,"enableScroll":true,"isGrid":false,"isSlider":false,"isColumns":false,"isSlideshow":true,"cropOnlyFill":false,"fixedColumns":1,"enableInfiniteScroll":true,"isRTL":false,"minItemSize":120,"rotatingGroupTypes":"","rotatingCubeRatio":"","gallerySliderImageRatio":1.7777777777777777,"numberOfImagesPerRow":3,"numberOfImagesPerCol":1,"groupsPerStrip":0,"borderRadius":0,"boxShadow":0,"gridStyle":0,"mobilePanorama":false,"placeGroupsLtr":false,"viewMode":"preview","thumbnailSpacings":9,"galleryThumbnailsAlignment":"bottom","isMasonry":false,"isAutoSlideshow":false,"slideshowLoop":false,"autoSlideshowInterval":4,"bottomInfoHeight":0,"titlePlacement":"SHOW_ON_HOVER","galleryTextAlign":"left","scrollSnap":true,"itemClick":"nothing","fullscreen":true,"videoPlay":"onClick","scrollAnimation":"NO_EFFECT","scrollDirection":1,"overlayAnimation":"NO_EFFECT","arrowsPosition":0,"arrowsSize":8,"watermarkOpacity":40,"watermarkSize":40,"useWatermark":true,"watermarkDock":{"top":"auto","left":"auto","right":0,"bottom":0,"transform":"translate3d(0,0,0)"},"loadMoreAmount":"all","defaultShowInfoExpand":1,"allowLinkExpand":true,"expandInfoPosition":0,"allowFullscreenExpand":true,"fullscreenLoop":false,"galleryAlignExpand":"left","addToCartBorderWidth":1,"addToCartButtonText":"","slideshowInfoSize":0,"playButtonForAutoSlideShow":false,"allowSlideshowCounter":false,"hoveringBehaviour":"NEVER_SHOW","thumbnailSize":120,"magicLayoutSeed":1,"imageHoverAnimation":"NO_EFFECT","imagePlacementAnimation":"NO_EFFECT","calculateTextBoxWidthMode":"PERCENT","textBoxHeight":0,"textBoxWidth":200,"textBoxWidthPercent":50,"textImageSpace":10,"textBoxBorderRadius":0,"textBoxBorderWidth":0,"loadMoreButtonText":"Load More","loadMoreButtonBorderWidth":1,"loadMoreButtonBorderRadius":0,"imageInfoType":"NO_BACKGROUND","itemBorderWidth":0,"itemBorderRadius":0,"itemEnableShadow":false,"itemShadowBlur":20,"itemShadowDirection":135,"itemShadowSize":10,"imageLoadingMode":"BLUR","expandAnimation":"NO_EFFECT","imageQuality":90,"usmToggle":false,"usm_a":0,"usm_r":0,"usm_t":0,"videoSound":true,"videoSpeed":1,"videoLoop":false,"gotStyleParams":true,"selectedLayout":"5|bottom|1|fill|false|1|true","allowSocial":false,"allowDownload":false,"allowTitle":false,"allowDescription":false,"loveButton":false,"loveCounter":false,"showVideoPlayButton":true,"galleryImageRatio":2,"sharpParams":{"quality":90,"usm":{}},"galleryHorizontalAlign":"flex-start","galleryVerticalAlign":"flex-end","imageLoadingWithColorMode":"PICKED_COLOR","imageRatioType":"FIXED","numberOfDisplayedItems":3,"itemShadowOpacityAndColor":{"themeName":"color_15","value":"rgba(43,43,43,0.2)"},"textBoxBorderColor":{"themeName":"color_15","value":"rgba(43,43,43,1)"},"titleDescriptionSpace":6,"textsVerticalPadding":0,"textsHorizontalPadding":0,"textBoxFillColor":{"themeName":"color_12","value":"rgba(171,171,171,1)"},"alwaysShowHover":false,"isStoreGallery":false,"previewHover":false,"calculateTextBoxHeightMode":"MANUAL","galleryLayout":5,"useCustomButton":false,"customButtonText":"","itemOpacity":{"themeName":"color_14","value":"rgba(85,85,85,0.6)"},"itemFont":{"style":{"bold":false,"italic":false,"underline":false},"family":"open sans","preset":"Heading-S","editorKey":"font_6","size":20,"fontStyleParam":true,"displayName":"Small Heading","value":"font:normal normal normal 20px/1.4em \"open sans\",sans-serif;"},"itemFontSlideshow":{"family":"avenir-lt-w01_85-heavy1475544","displayName":"Basic Heading","style":{"bold":false,"italic":false,"underline":false},"size":22,"preset":"Custom","editorKey":"font_5","fontStyleParam":true,"value":"normal normal normal 22px/27px avenir-lt-w01_85-heavy1475544,sans-serif"},"itemDescriptionFontSlideshow":{"family":"avenir-lt-w01_35-light1475496","displayName":"Paragraph 2","style":{"bold":false,"italic":false,"underline":false},"size":15,"preset":"Custom","editorKey":"font_8","fontStyleParam":true,"value":"normal normal normal 15px/18px avenir-lt-w01_35-light1475496,sans-serif"},"itemDescriptionFont":{"family":"avenir-lt-w01_35-light1475496","displayName":"Paragraph 2","style":{"bold":false,"italic":false,"underline":false},"size":15,"preset":"Custom","editorKey":"font_8","fontStyleParam":true,"value":"font:normal normal normal 15px/18px avenir-lt-w01_35-light1475496,sans-serif;"},"itemFontColor":{"themeName":"color_11","value":"rgba(213,213,213,1)"},"itemFontColorSlideshow":{"themeName":"color_15","value":"rgba(43,43,43,1)"},"itemDescriptionFontColor":{"themeName":"color_11","value":"rgba(213,213,213,1)"},"itemDescriptionFontColorSlideshow":{"themeName":"color_15","value":"rgba(43,43,43,1)"},"loadMoreButtonFont":{"family":"open sans","displayName":"Paragraph 2","style":{"bold":false,"italic":false,"underline":false},"size":16,"preset":"Body-M","editorKey":"font_8","fontStyleParam":true,"value":"normal normal normal 16px/1.4em \"open sans\",sans-serif"},"loadMoreButtonFontColor":{"themeName":"color_15","value":"rgba(43,43,43,1)"},"loadMoreButtonColor":{"themeName":"color_11","value":"rgba(213,213,213,1)"},"loadMoreButtonBorderColor":{"themeName":"color_15","value":"rgba(43,43,43,1)"},"arrowsColor":{"themeName":"color_11","value":"rgba(213,213,213,1)"},"oneColorAnimationColor":{"themeName":"color_11","value":"rgba(213,213,213,1)"},"responsive":false,"targetItemSize":35,"isAccessible":false,"allowLeanGallery":false,"layoutsVersion":2,"selectedLayoutV2":5,"isSlideshowFont":true,"externalInfoHeight":0,"externalInfoWidth":0},"container":{"top":"","bottom":"","left":"","right":"","width":815,"height":613,"position":"","avoidGallerySelfMeasure":true,"galleryWidth":815,"galleryHeight":613,"scrollBase":0}}
Cloud Car Configurator – Interactive 3D realtime
– Runs in a browser
– WebGL to photorealistic raytrace in the Cloud
Perhaps the first webgl interactive photorealistic 3D car configurator with cloud raytracing.
Developed entirely by 4D Pipeline 2014. Lightworks was later acquired by Siemens.
Languages
WebGL, three.js, babylon.js, Javascript, iRay SDK
Platforms
Web, Runs on all browsers. With Cloud backend.
