{"id":2947,"date":"2026-01-30T16:30:40","date_gmt":"2026-01-30T16:30:40","guid":{"rendered":"https:\/\/szmz.hu\/teaching\/?page_id=2947"},"modified":"2026-03-16T14:02:09","modified_gmt":"2026-03-16T14:02:09","slug":"cables-gl-javascript","status":"publish","type":"page","link":"https:\/\/szmz.hu\/teaching\/cables-gl-javascript\/","title":{"rendered":"cables.gl \/ javascript"},"content":{"rendered":"\n<p>cables main website:<br><a href=\"https:\/\/cables.gl\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/cables.gl\/<\/a><\/p>\n\n\n\n<p>All operators: <a href=\"https:\/\/cables.gl\/ops\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/cables.gl\/ops<\/a><\/p>\n\n\n\n<p>Documentation with step by step examples: <a href=\"https:\/\/cables.gl\/docs\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/cables.gl\/docs<\/a>\/<\/p>\n\n\n\n<p>cables.gl beginner tutorial:<br><a href=\"https:\/\/www.youtube.com\/watch?v=EPFNHYah9F4&amp;list=PLYimpE2xWgBveaPOiV_2_42kZEl_1ExB0\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.youtube.com\/watch?v=EPFNHYah9F4&amp;list=PLYimpE2xWgBveaPOiV_2_42kZEl_1ExB0<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>Example projects:<\/p>\n\n\n\n<p><strong>Intro example:<br><\/strong><a href=\"https:\/\/cables.gl\/p\/OzsKN9\" target=\"_blank\" rel=\"noreferrer noopener\">teach01zizispheres<\/a><\/p>\n\n\n\n<p><strong>Texture example:<br><\/strong><a href=\"https:\/\/cables.gl\/p\/VH47Z9\">https:\/\/cables.gl\/p\/VH47Z9<\/a><\/p>\n\n\n\n<p><strong>3d gltf example:<br><\/strong><a href=\"https:\/\/cables.gl\/p\/HD7Mnb\">https:\/\/cables.gl\/p\/HD7Mnb<\/a><br>Cables.gl is optimized to handle BINARY GLTF files, with an extension of .glb. Onshape for same reasons doesn&#8217;l let you save with that extension, so the workaround is to save GLTF file, than use a converter to produce a binary gltf with the extension .GLB.<br>Babylon.js viewer to create glb files (eg. BINARY GLTF=.glb):<br><a href=\"https:\/\/sandbox.babylonjs.com\/?from=3dviewer\" target=\"_blank\" rel=\"noreferrer noopener\">Babylon.js Sandbox<\/a> : click on &#8220;Display Inspector&#8221; in the bottom-right corner then &#8220;Tools&#8221; (wrench icon) on top-right to get the GLB export option<\/p>\n\n\n\n<p><strong>Vertex Displacement example:<br><\/strong><a href=\"https:\/\/cables.gl\/p\/hbIFpb\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/cables.gl\/p\/hbIFpb<br><\/a>based on this tutorial below:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Vertex displacement op - byte size\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/NjG85Qbbl0w?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>Simple audio-panning example:<\/strong><br><a href=\"https:\/\/cables.gl\/p\/8mYR9a\">https:\/\/cables.gl\/p\/8mYR9a<\/a><\/p>\n\n\n\n<p><strong>More advanced audio-pan with soundmixer+recording:<br><\/strong><a href=\"https:\/\/cables.gl\/p\/ymF8Wd\">https:\/\/cables.gl\/p\/ymF8Wd<\/a><\/p>\n\n\n\n<p><strong>String anim example:<\/strong><br><a href=\"https:\/\/cables.gl\/p\/nUkhob\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/cables.gl\/p\/nUkhob<\/a><br>based on this video tutorial:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Random Word Cloud \/ Texture Coordinates Part 1: RandomCluster\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/fHayPTVRH5k?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>cables main website:https:\/\/cables.gl\/ All operators: https:\/\/cables.gl\/ops Documentation with step by step examples: https:\/\/cables.gl\/docs\/ cables.gl beginner tutorial:https:\/\/www.youtube.com\/watch?v=EPFNHYah9F4&amp;list=PLYimpE2xWgBveaPOiV_2_42kZEl_1ExB0 Example projects: Intro example:teach01zizispheres Texture example:https:\/\/cables.gl\/p\/VH47Z9 3d gltf example:https:\/\/cables.gl\/p\/HD7MnbCables.gl is optimized to handle BINARY GLTF files, with an extension of .glb. Onshape for same reasons doesn&#8217;l let you save with that extension, so the workaround is to save GLTF [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2947","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/szmz.hu\/teaching\/wp-json\/wp\/v2\/pages\/2947","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/szmz.hu\/teaching\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/szmz.hu\/teaching\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/szmz.hu\/teaching\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/szmz.hu\/teaching\/wp-json\/wp\/v2\/comments?post=2947"}],"version-history":[{"count":17,"href":"https:\/\/szmz.hu\/teaching\/wp-json\/wp\/v2\/pages\/2947\/revisions"}],"predecessor-version":[{"id":3118,"href":"https:\/\/szmz.hu\/teaching\/wp-json\/wp\/v2\/pages\/2947\/revisions\/3118"}],"wp:attachment":[{"href":"https:\/\/szmz.hu\/teaching\/wp-json\/wp\/v2\/media?parent=2947"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}