[{"data":1,"prerenderedAt":443},["ShallowReactive",2],{"{\"resolve_relations\":\"reference.source\",\"version\":\"published\"}developers/labs/digital-whiteboard":3},{"data":4,"headers":420},{"story":5,"cv":402,"rels":403,"links":419},{"name":6,"created_at":7,"published_at":8,"updated_at":9,"id":10,"uuid":11,"content":12,"slug":394,"full_slug":395,"sort_by_date":30,"position":396,"tag_list":397,"is_startpage":244,"parent_id":398,"meta_data":30,"group_id":399,"first_published_at":400,"release_id":30,"lang":355,"path":30,"alternates":401,"default_full_slug":30,"translated_slugs":30},"Digital Whiteboard","2026-03-25T17:57:04.735Z","2026-04-23T12:28:56.055Z","2026-04-23T12:28:56.107Z",158809394160810,"ab59c286-edfd-4be5-b7ea-d6fb1984a166",{"_uid":13,"body":14,"date":300,"fold":301,"intro":358,"title":365,"gallery":366,"category":379,"metadata":382,"component":385,"demo_link":386,"thumbnail":388,"github_link":390,"last_updated":391,"open_graph_image":392,"include_open_graph":46,"block_search_engines":244},"f50d366a-d67c-4a10-86a7-4b5fc5c9f54e",[15,291],{"gap":16,"_uid":17,"align":16,"count":18,"width":19,"columns":20,"component":290,"remove_padding":46},"","f6f97b29-f4c1-4242-863b-a4543a5a2bbc","column-one","width-full",[21,47,51,93,125,199,233,274],{"_uid":22,"body":23,"alignment":44,"component":45,"is_full_width":46},"eaf1cee4-00f1-47d0-b05c-869d32df7dcc",{"type":24,"content":25},"doc",[26,38],{"type":27,"attrs":28,"content":31},"heading",{"level":29,"textAlign":30},2,null,[32],{"text":33,"type":34,"marks":35},"Overview","text",[36],{"type":37},"bold",{"type":39,"attrs":40,"content":41},"paragraph",{"textAlign":30},[42],{"text":43,"type":34},"Digital Whiteboards are used more and more in many companies to sketch out ideas and aid in collaboration, particularly for teams scattered in different locations. They have become even more relevant as the global pandemic has forced many employees to work remotely. This demo combines the concept of a 2D Digital Whiteboard with 3D, allowing the user to place actual mechanical or architectural CAD data alongside text, images, PDF’s, and other elements.","align-left","copy",true,{"_uid":48,"code":49,"component":50},"341b0037-f278-4683-a306-78c4c3c5d412","\u003Ciframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/gn3hmigfOSE?si=b9jX09me2wh6mG7u\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen>\u003C/iframe>","code",{"_uid":52,"body":53,"alignment":44,"component":45,"is_full_width":46},"8de28e62-2cac-49b9-8930-9b99335e2e43",{"type":24,"content":54},[55,62,88],{"type":27,"attrs":56,"content":57},{"level":29,"textAlign":30},[58],{"text":59,"type":34,"marks":60},"Technical Details",[61],{"type":37},{"type":39,"attrs":63,"content":64},{"textAlign":30},[65,67,77,79,86],{"text":66,"type":34},"The demo uses the ",{"text":68,"type":34,"marks":69},"HOOPS Exchange",[70],{"type":71,"attrs":72},"link",{"href":73,"uuid":74,"anchor":30,"target":75,"linktype":76},"/developers/products/hoops-exchange","6bb4085d-b926-4852-81a8-7a02c45f5abc","_self","story",{"text":78,"type":34}," and ",{"text":80,"type":34,"marks":81},"HOOPS Visualize",[82],{"type":71,"attrs":83},{"href":84,"uuid":85,"anchor":30,"target":75,"linktype":76},"/developers/products/hoops-visualize","b5115ad7-8d04-4a41-ae62-0680605c897d",{"text":87,"type":34}," to import and render complex 3D models and an HTML canvas element to display the Whiteboard itself. When a given model is deactivated, it is turned into a canvas image. This conserves resources as only one 3D Web Viewer is active at a time. Each 3D Model is cached on the client, ensuring that once a model is loaded, it reactivates quickly.",{"type":39,"attrs":89,"content":90},{"textAlign":30},[91],{"text":92,"type":34},"For simplicity, this demo has no backend. All elements, including the 3D models, are loaded via HTML requests. A backend could be easily implemented to allow for multi-user interaction and saving and loading whiteboard configurations.",{"_uid":94,"body":95,"alignment":44,"component":45,"is_full_width":46},"f543c157-d41b-4cc3-bfb5-8a8e65bf10d5",{"type":24,"content":96},[97,103,112,117],{"type":27,"attrs":98,"content":100},{"level":99,"textAlign":30},3,[101],{"text":102,"type":34},"Live application:",{"type":39,"attrs":104,"content":105},{"textAlign":30},[106],{"text":107,"type":34,"marks":108},"https://techsoft3d.github.io/HC_WhiteboardDemo/",[109],{"type":71,"attrs":110},{"href":107,"uuid":30,"anchor":30,"target":30,"linktype":111},"url",{"type":27,"attrs":113,"content":114},{"level":99,"textAlign":30},[115],{"text":116,"type":34},"GitHub repository:",{"type":39,"attrs":118,"content":119},{"textAlign":30},[120],{"text":121,"type":34,"marks":122},"https://github.com/techsoft3d/HC_WhiteboardDemo",[123],{"type":71,"attrs":124},{"href":121,"uuid":30,"anchor":30,"target":30,"linktype":111},{"_uid":126,"body":127,"alignment":44,"component":45,"is_full_width":46},"3db68134-7b3a-4873-98b3-16972e7ab12a",{"type":24,"content":128},[129,140],{"type":27,"attrs":130,"content":131},{"level":29,"textAlign":30},[132,134],{"text":133,"type":34},"Learn more about ",{"text":135,"type":34,"marks":136},"HOOPS Visualize for Web (formerly HOOPS Communicator)",[137],{"type":71,"attrs":138},{"href":139,"uuid":30,"anchor":30,"target":30,"linktype":111},"https://www.techsoft3d.com/products/hoops/communicator",{"type":141,"content":142},"bullet_list",[143,159,173,186],{"type":144,"content":145},"list_item",[146],{"type":39,"attrs":147,"content":148},{"textAlign":30},[149,151,157],{"text":150,"type":34},"Reference the HOOPS Visualize for Web (formerly HOOPS Communicator) ",{"text":152,"type":34,"marks":153},"Documentation",[154],{"type":71,"attrs":155},{"href":156,"uuid":30,"anchor":30,"target":30,"linktype":111},"https://docs.techsoft3d.com/communicator/latest/",{"text":158,"type":34},".",{"type":144,"content":160},[161],{"type":39,"attrs":162,"content":163},{"textAlign":30},[164,166,172],{"text":165,"type":34},"Sign up for a free ",{"text":167,"type":34,"marks":168},"evaluation",[169],{"type":71,"attrs":170},{"href":171,"uuid":30,"anchor":30,"target":30,"linktype":111},"https://manage.techsoft3d.com/signup?product=communicator",{"text":158,"type":34},{"type":144,"content":174},[175],{"type":39,"attrs":176,"content":177},{"textAlign":30},[178,180],{"text":179,"type":34},"Jump straight into coding with the ",{"text":181,"type":34,"marks":182},"3D Sandbox",[183],{"type":71,"attrs":184},{"href":185,"uuid":30,"anchor":30,"target":30,"linktype":111},"https://3dsandbox.techsoft3d.com/",{"type":144,"content":187},[188],{"type":39,"attrs":189,"content":190},{"textAlign":30},[191,193],{"text":192,"type":34},"Join our ",{"text":194,"type":34,"marks":195},"Community Forum",[196],{"type":71,"attrs":197},{"href":198,"uuid":30,"anchor":30,"target":30,"linktype":111},"https://forum.techsoft3d.com/",{"_uid":200,"body":201,"alignment":44,"component":45,"is_full_width":46},"49bfa3fe-caaf-40b4-8123-f5361a510401",{"type":24,"content":202},[203,210,222],{"type":27,"attrs":204,"content":205},{"level":29,"textAlign":30},[206],{"text":207,"type":34,"marks":208},"Questions or Feedback?",[209],{"type":37},{"type":39,"attrs":211,"content":212},{"textAlign":30},[213,215,221],{"text":214,"type":34},"We are looking for feedback and how this toolkit can be improved to meet your needs! Please connect in our ",{"text":216,"type":34,"marks":217},"forum",[218],{"type":71,"attrs":219},{"href":198,"uuid":30,"anchor":30,"target":220,"linktype":111},"_blank",{"text":158,"type":34},{"type":39,"attrs":223,"content":224},{"textAlign":30},[225,227],{"text":226,"type":34},"You can also sign up for a 60-day trial of ",{"text":228,"type":34,"marks":229},"HOOPS Visualize. ",[230],{"type":71,"attrs":231},{"href":232,"uuid":30,"anchor":30,"target":75,"linktype":111},"https://developer.techsoft3d.com/hoops/visualize",{"_uid":234,"messages":235,"component":268,"background":269,"remove_padding":46,"is_verticalized":244},"2517b691-8590-46b2-b1a0-c989536a3b36",[236],{"_uid":237,"icon":16,"buttons":238,"content":249,"headline":256,"link_url":16,"metadata":263,"component":266,"icon_size":16,"link_label":16,"headline_heading":267},"1f7a4845-55d4-4520-b973-efe814118e45",[239],{"_uid":240,"href":16,"color":241,"label":242,"action":243,"new_tab":244,"outline":46,"alignment":16,"component":245,"text_link":244,"destination":246},"e25f6918-ec5e-43c9-9ad6-5e4bcf39b279","light","Subscribe","action-modal",false,"element-button",{"id":16,"url":247,"linktype":111,"fieldtype":248,"cached_url":247},"subscribe","multilink",{"type":24,"content":250},[251],{"type":39,"attrs":252,"content":253},{"textAlign":30},[254],{"text":255,"type":34},"We’ll notify you as soon as new projects are available.",{"type":24,"content":257},[258],{"type":39,"attrs":259,"content":260},{"textAlign":30},[261],{"text":262,"type":34},"Be the first to know about new projects",{"_uid":264,"title":16,"plugin":265,"description":16},"0fa59fa4-a396-48fd-8878-1ce90fb5c07c","meta-fields","element-callout-child","heading-h3","element-callout",{"id":270,"alt":16,"name":16,"focus":16,"title":16,"source":16,"filename":271,"copyright":16,"fieldtype":272,"meta_data":273,"is_external_url":244},72383172008371,"https://a-us.storyblok.com/f/1023536/1350x901/98f768d3c7/mosiac.jpg","asset",{},{"_uid":275,"body":276,"alignment":44,"component":45,"is_full_width":46},"ed21b4a6-d00f-4e0d-a54d-08aa82d4d29d",{"type":24,"content":277},[278],{"type":39,"attrs":279,"content":280},{"textAlign":30},[281,283,289],{"text":282,"type":34},"Need to contact us? Email us at ",{"text":284,"type":34,"marks":285},"labs@techsoft3d.com",[286],{"type":71,"attrs":287},{"href":284,"uuid":30,"anchor":30,"target":75,"linktype":288},"email",{"text":158,"type":34},"columns",{"id":247,"_uid":292,"items":293,"component":299},"ca556064-0fa5-4110-8395-86e3f005ea32",[294],{"id":295,"_uid":296,"component":297,"business_unit":298},"dbdcd35d-8954-4b0d-9902-999e4cd25928","f78173e1-09c9-45b4-92d3-445b190c5ada","hubspot-form","toolkits","modal","2021-04-25 00:00",[302],{"_uid":303,"source":304,"component":357},"de63215b-57cd-4411-a03f-a0fc1f53addf",{"name":305,"created_at":306,"published_at":307,"updated_at":308,"id":309,"uuid":310,"content":311,"slug":348,"full_slug":349,"sort_by_date":30,"position":350,"tag_list":351,"is_startpage":244,"parent_id":352,"meta_data":30,"group_id":353,"first_published_at":354,"release_id":30,"lang":355,"path":30,"alternates":356,"default_full_slug":30,"translated_slugs":30,"_stopResolving":46},"Main Navigation","2025-04-09T14:04:01.876Z","2026-03-10T15:15:52.184Z","2026-04-14T21:06:12.239Z",27565407,"c5f4a23f-ca2c-41d7-946b-6822d34565a0",{"_uid":312,"items":313,"component":347},"8915070e-32eb-476d-b215-1c92ebdad15c",[314,329],{"_uid":315,"left_nav":16,"messages":316,"component":328,"right_nav":16},"fe7818a3-2c19-410c-adfd-6166e04c9bf0",[317,323],{"_uid":318,"icon":319,"link":320,"target":16,"message":321,"component":322},"87585227-383a-48e2-a5e5-1541d3b4b65a","tdesign:user-talk-1","/contact","Have questions about our SDKs or enterprise applications? Talk to a Tech Soft 3D expert","element-notice-child",{"_uid":324,"icon":325,"link":326,"target":16,"message":327,"component":322},"45ffc4c7-d6cf-4d3c-9606-ec4154852aef","hugeicons:artificial-intelligence-04","/developers/products/hoops-ai","Check out our newest SDK, HOOPS AI, a framework for preparing CAD data for ML workflows","element-notice",{"_uid":330,"menu":331,"component":346,"has_notice":46},"192904e7-cc6e-44e5-95a7-187c8ef72d1e",[332,337,340,343],{"url":333,"_uid":334,"label":335,"new_tab":244,"component":336},"#","eada60f3-c50f-41c1-8c50-4ffedd119483","SDKs for Developers","top-menu-child",{"url":333,"_uid":338,"label":339,"new_tab":244,"component":336,"style_as_button":244},"e80ecf91-c6c8-4e7a-a5b7-10ec4e05ada0","Apps for Businesses",{"url":333,"_uid":341,"label":342,"new_tab":244,"component":336,"style_as_button":244},"b3d091d9-83d1-4b72-bb8d-0f4be140beaa","Company",{"url":333,"_uid":344,"label":345,"new_tab":244,"component":336,"style_as_button":46},"f2040cd1-8c5b-4dcf-8ee1-5b56049d0fe2","Support","top","global","main-navigation","global/main-navigation",-30,[],27501948,"998e76b0-7b0e-4635-8abf-c9db0f0bf29c","2025-04-09T15:16:40.189Z","default",[],"reference",{"type":24,"content":359},[360],{"type":39,"attrs":361,"content":362},{"textAlign":30},[363],{"text":364,"type":34},"This demo combines the concept of a 2D Digital Whiteboard with 3D, allowing the user to place actual mechanical or architectural CAD data alongside text, images, PDFs, and other elements. ","Digital Whiteboard Demo",[367,373],{"id":368,"alt":369,"name":16,"focus":16,"title":370,"source":16,"filename":371,"copyright":16,"fieldtype":272,"meta_data":372},158822717636279,"A 3D model overlayed on a 2D background","Digital Whiteboard Overlay","https://a-us.storyblok.com/f/1023536/1917x966/e63476b948/digital-whiteboard-overlay.jpg",{"alt":369,"title":370,"source":16,"copyright":16},{"id":374,"alt":375,"name":16,"focus":16,"title":376,"source":16,"filename":377,"copyright":16,"fieldtype":272,"meta_data":378},158823561313993,"Collection of different 3D scene views for the digital whiteboard demo","Digital Whiteboard Multi-View","https://a-us.storyblok.com/f/1023536/1919x1040/42e30d59a7/digital-whiteboard-multi-view.jpg",{"alt":375,"title":376,"source":16,"copyright":16},[380,381],"hoopsExchange","hoopsVisualize",{"_uid":383,"title":384,"plugin":265,"description":364},"b8d090aa-ffb9-4705-8c8e-8bcddf1c13d8","Digital Whiteboard | Tech Soft 3D Labs","lab",{"id":16,"url":387,"linktype":111,"fieldtype":248,"cached_url":387},"https://techsoft3d.github.io/HC_WhiteboardDemo/?_gl=1*i9rpaz*_gcl_aw*R0NMLjE3NzM0MjMzMjguQ2p3S0NBanc2ODdOQmhCNEVpd0FRNjQ1ZGdXcHBjWEFxLS1iY3VqSnBITlpFOHhYYUZrMDJERDRCNlA2VTgtOVVJSnpsRVJKaC1zcDV4b0NmZTRRQXZEX0J3RQ..*_gcl_au*MTg2OTY2NDcwMi4xNzcwNjc2MjUyLjg5NjcyNjQzMC4xNzc0Mjk1NzQwLjE3NzQyOTY4MDg.*_ga*NDE0MjI1MTQ3LjE3NTUxMDU4MDY.*_ga_CPK350S2W0*czE3NzQ0NjA3MTIkbzIyMyRnMSR0MTc3NDQ2MTg4NCRqNDIkbDAkaDQ0NDYyNzExNw..",{"id":368,"alt":369,"name":16,"focus":16,"title":370,"source":16,"filename":371,"copyright":16,"fieldtype":272,"meta_data":389,"is_external_url":244},{"alt":369,"title":370,"source":16,"copyright":16},{"id":16,"url":121,"linktype":111,"fieldtype":248,"cached_url":121},"Sunday, April 25, 2021",{"id":368,"alt":369,"name":16,"focus":16,"title":370,"source":16,"filename":371,"copyright":16,"fieldtype":272,"meta_data":393,"is_external_url":244},{"alt":369,"title":370,"source":16,"copyright":16},"digital-whiteboard","developers/labs/digital-whiteboard",-150,[],99359039112762,"ba56cb9a-6249-413c-8e9d-36e06166ce7a","2026-04-03T18:44:13.443Z",[],1776956007,[404],{"name":305,"created_at":306,"published_at":307,"updated_at":308,"id":309,"uuid":310,"content":405,"slug":348,"full_slug":349,"sort_by_date":30,"position":350,"tag_list":417,"is_startpage":244,"parent_id":352,"meta_data":30,"group_id":353,"first_published_at":354,"release_id":30,"lang":355,"path":30,"alternates":418,"default_full_slug":30,"translated_slugs":30},{"_uid":312,"items":406,"component":347},[407,411],{"_uid":315,"left_nav":16,"messages":408,"component":328,"right_nav":16},[409,410],{"_uid":318,"icon":319,"link":320,"target":16,"message":321,"component":322},{"_uid":324,"icon":325,"link":326,"target":16,"message":327,"component":322},{"_uid":330,"menu":412,"component":346,"has_notice":46},[413,414,415,416],{"url":333,"_uid":334,"label":335,"new_tab":244,"component":336},{"url":333,"_uid":338,"label":339,"new_tab":244,"component":336,"style_as_button":244},{"url":333,"_uid":341,"label":342,"new_tab":244,"component":336,"style_as_button":244},{"url":333,"_uid":344,"label":345,"new_tab":244,"component":336,"style_as_button":46},[],[],[],{"cache-control":421,"connection":422,"content-encoding":423,"content-type":424,"date":425,"etag":426,"referrer-policy":427,"sb-be-version":428,"server":429,"strict-transport-security":430,"transfer-encoding":431,"vary":432,"via":433,"x-amz-cf-id":434,"x-amz-cf-pop":435,"x-cache":436,"x-content-type-options":437,"x-frame-options":438,"x-permitted-cross-domain-policies":439,"x-request-id":440,"x-runtime":441,"x-xss-protection":442},"max-age=0, public, s-maxage=604800, stale-if-error=3600","keep-alive","gzip","application/json; charset=utf-8","Thu, 23 Apr 2026 14:54:02 GMT","W/\"99330d9b6c081082ea8ade02edb3e226\"","strict-origin-when-cross-origin","5.764.0","nginx/1.29.1","max-age=31536000","chunked","Origin,Accept-Encoding, Origin","1.1 57cb281e5423af1daf1086071d6858a4.cloudfront.net (CloudFront)","XD469cprt3mvBTON5NrXd5ci_o_vgWK4XpBGbPL5xiTw0XDjPRC1rw==","CMH68-P3","Miss from cloudfront","nosniff","SAMEORIGIN","none","c28fb152-441d-41ad-b5b8-dadd0bba010b","0.021037","0",1776956042072]