# Community Home Home of the Threekit platform guides, documentation, and release notes.
Getting Started/files/8TX9UdjgVP1rqos2EBGV/pages/apX0B4wkbZIcc5zjuZrq
Platform Docs/files/vWS0l6UScB3OB6naJ54c/spaces/knvt0jlDBXmk91mWaWXB
Developer Hub/files/icA5OQIEs7Cus2wdJBuQhttps://developer.threekit.com/
Workflows/files/OaTRnm0Gtssgzvi2F5ck/pages/mla30Xzvp3Y79yln50oP
Platform Release Notes/files/bWAtGsdpzvV7ZEmDdxkx/spaces/Bdhnsg0wyBQ1RrM9wHPt/pages/hta6K6Hb4PmQe0gtdhEn
FAQ/files/PnQOHRqKRaFzN0W6l1vM/pages/MyFK6E9Hl9gzHu504Ety
Training/files/WRYKgH2QyykKe7CrKC0Q/pages/5afS6Sz0ThJHu689gjUl
Support/files/ax8V8ZG1PchMRqMwuY8Nhttps://support.threekit.com/
Forums/files/JvahXfAsBZtUveK7Gn0Hhttps://forum.threekit.com/
# Changelog ### 2026 - April 9 Added a guide for [Plugins](/platform-documentation/project-data/logic/plugins). Updated [Item Details](/platform-documentation/project-data/catalog/items#plugins) to include Plugins. ### 2026 - February 24 Added a guide for [Studio Versioning](/platform-documentation/org-setup/project-settings/studio-versioning). ### 2025 - July 8 Added a [guide to creating smoothly animated Camera transitions](/learn/workflows/camera-transition-animation). ### 2025 - June 24 Added a new version of the Platform Documentation section, titled Catalog 2.0. This represents a new version of the platform UI that is accessible through the [Catalog Version](/platform-documentation/org-setup/project-settings/features#catalog-version) Feature. This includes documentation on the new [Catalog 2.0](/platform-documentation/catalog-2.0-docs/project-data/catalog) as well as the [AI Discovery](/platform-documentation/catalog-2.0-docs/project-data/experiences) feature. Changes were also made to the [Features](/platform-documentation/org-setup/project-settings/features) page to include info about the Catalog Version, Physical Material version, and Vray Version. ### 2025 - May 1 Added the [Asset History](/tools/general-apps/asset-history) app, which allows users to inspect commit history on a given asset, and perform restores to a previous state. ### 2025 - February 24 Added the [Performance Dashboard](/tools/general-apps/performance-dashboard) app, which allows users to test the initial load performance of their webpages with an embedded Threekit player. ### 2024 - September 13 Updated and restructured the [Publishing](/platform-documentation/project-data/catalog/publishing) page with additional details on the topic, including information about caching, migrations, and bulk functionality. ### 2024 - August 7 [Updated the Developer Documentation](https://developer.threekit.com/changelog/updated-rest-api-endpoints). ### 2024 - July 24 Updated the [General Apps](/tools/general-apps) [Composite Asset](https://community.threekit.com/v/platform-documentation/project-data/assets/composites) documentation page with detailed information on all the features, including the newly added features from this week's release - Layer Opacity and Solid Color Layers. ### 2024 - April 4 Updated the [General Apps](/tools/general-apps) section with a new installation link for the apps, along with the introduction of new Apps. ### 2024 - March 26 Updated the [Performance Guidelines](/learn/workflows/best-practices/performance-considerations) page with additional and updated information ### 2024 - February 28 Updated the Org Features doc, and included details for the [Static Publish](/platform-documentation/org-setup/project-settings/features) feature. ### 2024 - January 11 Updated the [Cameras](/platform-documentation/project-data/assets/nodes/cameras#switching-player-camera) doc to include the option to switch player cameras to a camera node inside nested referenced assets.\ Updated the [Template Assets](/learn/workflows/template-assets#color-property-automation) guide to include the recommended workflow for dealing with color attributes in template materials. ### 2023 - November 23 Added the [Model Reference Node](/platform-documentation/project-data/assets/nodes/helpers/model-references) page ### 2023 - November 21 Updated the [Advanced Buyer Analytics](/platform-documentation/org-setup/analytics/advanced-buyer-analytics-reports) page with additional details. ### 2023 - November 17 Added and updated the following articles:\ [Template Assets Guide](/learn/workflows/template-assets)\ [Queries](/platform-documentation/project-data/logic/queries)\ [Metadata Value Query](/platform-documentation/project-data/logic/queries/metadata-value-query)\ [Asset Query](/platform-documentation/project-data/logic/queries/asset-query)\ [Datatable Query](/platform-documentation/project-data/logic/queries/datatable-query)\ [Custom Apps](/tools/general-apps)\ [Apply Metadata Pattern](/tools/general-apps/apply-metadata-pattern) ### 2023 - September 17 Added and updated the following articles in the [Docs ](https://community.threekit.com/platform-documentation/)section:\ [Advanced Buyer Analytics Reports ](/platform-documentation/org-setup/analytics/advanced-buyer-analytics-reports)\ [Gem Material](/platform-documentation/project-data/assets/materials/gem-material)\ [Branching ](/platform-documentation/project-data/basic-concepts/branching)\ [Vray Normals Operator](/platform-documentation/project-data/operators/comp-layer-operators/vray-normals-properties)\ [Vray Bump Normals Operator](/platform-documentation/project-data/operators/comp-layer-operators/vray-bump-normals-properties) # Project Prep # 1. What Should I Expect During Onboarding? **Overview** Whether you're a new Threekit customer or thinking about partnering with us, let's review what you can expect during your onboarding and setup process. New customers are automatically enrolled in our Success Onboarding email cadence, which will introduce you to pre-project planning plus support and training resources. ![](/files/xFwAU4pMIaqPjWICvTrX) [**Getting Ready for Your Threekit Project**](/getting-started/project-prep/2.-getting-ready-for-your-threekit-project) Before you do anything else, we encourage you to review our "Getting Ready Guide". This guide has sections covering everything from prepping your data, to ensuring your materials and models are prepped for your project, and identifying your project team. [**Org Provisioning & Adding Users**](/getting-started/project-prep/3.-org-provisioning-and-adding-users) Your org will be automatically provisioned on the start date of your contract, and an invite will be sent to your designated admin. For security reasons, we ask that your admin add any additional users to your organization. Instructions on how to do so can be found here. [**Support**](/getting-started/project-prep/4.-intro-to-support) Your admin will be sent an invite to our Support community around the time your project kicks off. Make sure to register for the Support portal ASAP, as the link does expire! [**Self-Led Training**](/getting-started/project-prep/5.-training) Prior to signing up for our virtual trainer-led sessions, your admin, 3D artists, and developers should complete our self-led training cadence. This will ensure they get the maximum benefit out of our follow-up Q\&A sessions. [**Requirements Checklist**](/getting-started/project-prep/6.-requirements-checklist) During your onboarding call, we will review your SOW and the dates associated with each one of your deliverables. Please review your SOW and come prepared to discuss your ability to deliver the requirements on the timeline outlined. **Configuration** If configuration rules are a part of your project, you can review our Configuration Workbook [here](https://files.threek.it/training/CommunitySite_Resources/Configuration_Workbook.xlsx). We will answer any of your questions during your onboarding call. # 2. Getting Ready for Your Threekit Project **Overview** Discussions around project readiness, we worked with our Implementation Team to provide you our best practices around preparing your data, models, and project team prior to kickoff and incorporated this into our [*Getting Ready For Your Visualization Project*](https://files.threek.it/training/CommunitySite_Resources/Getting%20Ready%20for%20Your%20Visualization%20Project.pdf), which you can also download at the bottom of this article. We recommend reviewing this information prior to onboarding so you can address any questions with your Customer Success Manager or Implementation Team. ![](/files/6d0xAMCULLEPFXd1C5H8) Continue your "Getting Ready" journey with [Org Provisioning & Adding Users](/getting-started/project-prep/3.-org-provisioning-and-adding-users). This will enable you to add members of your team to your Threekit project environment. # 3. Org Provisioning & Adding Users At the start of your Threekit contract, you will receive two email invitations to sign up for your very own Threekit orgs: a Preview org and an Admin org. Just click the **"Redeem invitation"** link in that email and follow the prompts to set up your account. ***Pro Tip 1:** You will receive 2 emails: one for Preview and one for Admin-FTS. The email subjects will begin with "You have been invited to Threekit".* ***Pro Tip 2:** Make sure to click on the **"Sign up"** and not the "Sign in" option on the redemption screen.* ![](/files/T5rT0NoYdx4mchvQ1Bmn) ### Adding Users Before you can start exploring the Threekit platform, you will need to add any additional users (including partners and Threekit project team members) to your org. To do this, simply click on the **"Settings"** tab in the left side bar, select **"Members"** and then click on the green **"+ Invite new member"** button in the upper right-hand corner. ![](/files/EZB64zqAu3Ct1BjFtqyO) Going forward, you can add and remove any users from this same "Members" tab as necessary. # 4. Intro to Support ### **Setting Up Your Support Community Account** You should have already received an email from us with access to our case-logging system. ![](/files/9jmajm5kwEB1iwf9ZHUT) Please check your spam folder if you have not yet received this email. đŸ€– *If it's still missing, please email our Support team at* [*customersupport@threekit.com*](mailto:success@threekit.com)*.* Click on the link and follow the prompt to sign in. Invites expire after 1 week.
Any time you log in, you will see a list of any cases under your account.
### Threekit Support Overview & Portal Walkthrough The 10-minute video below will walk you through our support SLAs and explain how you can log a case in our system. {% embed url="" %} # 5. Training **Overview** Your org has been provisioned and you've (hopefully) added your first users. Now it's time to learn more about the Threekit platform. ![](/files/2fpE2lrVLVGGGx46SFEa) Our training journey starts with our [self-led training](/learn/training/self-led-training) available here on our documentation site. You can expect to learn about the platform by importing a 3D model, adding attributes and materials to the model, and by using the catalog and asset libraries. # 6. Requirements Checklist **Overview** Once you become a customer, the most important step to prepare for is the project kickoff, which requires that you provide any deliverables as outlined in the statement of work (SOW) you signed with your implementation partner. We highly recommend you perform an SOW review as a first step to ensure the work being performed and the deliverables required to begin are validated across everyone involved. The necessary deliverables can also be referred to as a requirements checklist. These deliverables vary based on your unique SOW, but can often include reference images, 3D models, eCommerce integrations, and so on. We'll provide a high-level overview of some of the terminology below. **Reference Images** Whether you have 3D models already or not, you will likely need to provide reference images prior to 3D work starting on your project. These are important for two reasons: 1. Our team needs to understand how to model each of the materials and angles for the 3D model to accurately reflect the lighting, texture, and configurable components for each. 2. Reference images provide a brand identity that help ensure that model backgrounds and scene lighting work cohesively with your visual brand. You can review the best practices for taking reference images in [**this article**](/learn/workflows/best-practices/reference-image-guidelines). **Physical Swatches** Your SOW will provide a list of physical swatches needed for your project which might include samples of metals, fabrics, woods, and other materials. These will need to be sent in a minimally-specified size (patterns with repeats will need a full repeat of the pattern, for example) to the provided address(es) for 3D scanning. *If your products use exotic materials such as alligator skin, please be aware that there are restrictions on such materials in some locales and additional resources may need to be provided to accommodate the scanning of these materials.* **Configuration Workbook** Our Configuration Workbook provides a template for laying out your configuration-specific rules. Click [**here**](https://files.threek.it/training/CommunitySite_Resources/Configuration_Workbook.xlsx) to download it. **eCommerce Integrations** If your project requires us to integrate with an eCommerce provider like Magento, BigCommerce, WooCommerce, SFDC Commerce Cloud, etc., we will require temporary access to your environment to set up the integration. **UI/UX Support** Whether we are directly implementing your UI/UX experience or you are owning that part of the project and we are consulting with your team on best practices, we will need an understanding of your preferred UI/UX experience. Requirements for this portion of the project may include color hex codes, specific font files, Figma wireframes, and icon libraries. Please review your SOW for more details. # 7. Customer Resources & Onboarding Checklist Whether you’re a new or existing Threekit customer, there are a lot of resources available to you. The purpose of this article is to consolidate all of the resources into a single referenceable location. We’ve also included an onboarding checklist for our new customers, since there can be an overwhelming amount of tasks to be completed in preparation of a project. Have questions about anything written here? **Email the Threekit Customer Success team at** [**success@threekit.com**](mailto:success@threekit.com). ## Threekit Resources [**Threekit Community**](/) Your one-stop-shop for many Threekit resources, including: * [Support Portal](https://support.threekit.com/) * Where you will log and comment on technical support cases for Threekit. Access is generally granted to your admin(s) around the time of your onboarding call. Read more about support [here](/getting-started/project-prep/4.-intro-to-support). * [Release Notes](https://threekit.gitbook.io/community/v/release-notes/) * Stay up-to-date with the latest product release notes and information. * [Community Forum](https://forum.threekit.com/) * Have a quick question about Threekit or something you’re trying to do? Post in our Community forum!\
[**Status Page**](https://status.threekit.com/) Confirm the uptime of the Threekit platform, upcoming maintenance or releases, and subscribe for updates directly to your inbox. [**success@threekit.com**](mailto:success@threekit.com) Reach the Threekit Customer Success team by simply emailing . The team can address any of your non-technical Threekit questions, or help guide you in the right direction. [**Getting Started Guide**](/getting-started/project-prep/1.-what-should-i-expect-during-onboarding) A series of articles that help to provide a comprehensive overview of Threekit projects and topics/resources that you should be familiar with. ## Onboarding Checklist (For New Customers) **☑　Create logins for your Preview and Admin-FTS Threekit environments.**\ You will receive 2 provisioning emails on your contract start date which will be used to set-up the logins. Learn more about the provisioning process, release cadence, and environment best practices [**here**](/platform-documentation/project-data/basic-concepts/environments). **☑　Bookmark your environment URLs for easy accessibility!**\ Preview will be your sandbox where all work and testing is done, and Admin-FTS is your controlled and stable production environment. Once work is done in Preview, it will be migrated to Admin-FTS. Admin-FTS will be the environment that integrates with your live website.\ ă€€ăƒ»Preview: \ ă€€ăƒ»Admin-FTS: **☑　Add team members to your environments so they can access it as well.**\ If you don’t know how to do that, consult the documentation [**here**](/platform-documentation/org-setup/admin-and-security/users-and-permissions/members). To get started, we recommend you add members of your company involved in the project, and any partners you’re working with, to your *Preview* environment. **☑　Confirm receipt of your Threekit subscription invoice.**\ If you haven’t received it, let your Threekit account manager know. Project kickoff is dependent on payment of the invoice. **☑　Complete Threekit self-led training.**\ Complete the [**self-led training**](/learn/training/self-led-training) so that you have a high-level understanding of the platform. **☑　Schedule an SOW review call with your partner.**\ Understanding the scope of your SOW is key to a successful project. Make sure you have a dedicated call with your partner to go through the SOW line-by-line so that you understand the work that is or isn’t covered, what you as the customer need to provide leading up to kick-off, project timeline, and next steps. **☑　Provide reference models/images, project requirements, etc. to your partner.**\ The specifics of what needs to be delivered will be outlined in your SOW. If you have questions, ask your main point of contact for the project. **☑　Schedule a project kickoff with your partner.**\ Once project requirements are delivered, your partner should schedule a project kickoff call to officially begin the project. Use this call as an opportunity to get your weekly project calls scheduled, discuss any project software you will use, how you will communicate, and agree on next steps. If you have certain expectations, such as a weekly project status email, communicate this with your partner! **☑　Bookmark Threekit Community and Threekit Status pages.**\ Check out our Threekit Resources section above for a full list of resources, and be sure to bookmark the **Threekit Community** and **Threekit Status** page. All of the Threekit resources will be helpful for you not only during the project, but also after as well. # Managing Your Implementation # Implementation Design Review ### Statement of Work Review Meeting **Purpose** The purpose of the Statement of Work Review Meeting is to get the team comfortable with the project’s scope (the ‘*What’)*. By reading through each requirement and opening the floor for questions and discussion, participants should think about: * **Gaps in the SOW** - Determine whether further clarification is required from the PM or the customer. * **Important context** - There may be important context that needs to be communicated from the PM to the team derived from project scoping, which may not be explicitly described in the Statement of Work document. * **Project constraints** - Every project is constrained by a budget and a delivery timeline, which should be communicated and understood by all team members as they begin the process of planning. **Key Roles** **Project Manager**: Schedule and lead the meeting, record any unanswered questions **Project Implementers**: Participate in review, ask questions ### Design Brainstorming Session **Purpose** The purpose of the Design Brainstorming Session is for the project implementation team to determine *How* to deliver on the project’s requirements. Prior to the call, the Project Manager should ensure that they have answers to any questions that arose during the Statement of Work Review Meeting. The implementation team should be prepared to share their ideas for: * **Overall Architecture of the Implementation** - Following the meeting, the project’s lead will be tasked with writing a *Project Design Document*. Discussion should focus on gathering the information required to complete this document, and most time should be spent on the aspects of the design that are not straightforward. * **Resource Allocation** - As our teams are cross-functional, determining *Who* should be tasked with \_What \_should be considered. If there are gaps in resource capabilities, the PM should consider amending the team to improve coverage. \*Note: tasking at this stage is high-level and concerned with matching the design with domain-specific skills **Key Roles** **Project Manager**: Schedule and lead the meeting, record any decisions **Project Implementers**: Participate in review, ask questions ### Documenting the Design **Purpose** The purpose of documenting the design is to communicate a concrete vision of the project implementation to all members of the project’s implementation team, the product engineering team, and to management. The design will be presented at the *Design Review Meeting*. The project’s design and architecture should be documented by the project’s lead developer, based on the decisions made in the *Design Brainstorming Session*. They should ensure there is buy-in on the design from all members of the project’s implementation team. The design should answer questions and provide descriptions as laid out in the *Project Design Document* (given below). **Key Roles** **Project Lead Developer:** Create the *Project Design Document* in consultation with the project’s implementation team **Project Implementers:** Consult with the Project’s Lead Developer to to complete the *Project Design Document* ### Design Review Meeting **Purpose** The purpose of the design review meeting is to communicate the intended design for the implementation to the services and engineering teams for scrutiny. Meeting participants should provide constructive feedback on possible design improvements to ensure that best practices are being followed and the product is being used as optimally as possible. As a byproduct, the engineering team will gain a better understanding of how the product is being used in the wild, which can inform their design decisions going forward. Decisions should be recorded and incorporated into the design document by the project's lead architect. **Key Roles** **Project Manager**: Schedule and lead the meeting, record any decisions\ **Project Implementers**: Participate in review, answer questions, make adjustments to the design as needed per decisions arrived at in the meeting\ **Product Engineering Representative(s)**: Review the presented design and provide advice from the perspective of best practices vis-a-vis the current product capabilities. ### Project Design Document (Attached) * [Project Design Document - TEMPLATE.pdf](https://files.threek.it/training/CommunitySite_Resources/Project%20Design%20Document%20-%20TEMPLATE.pdf) # Requirements Traceability Matrix (RTM) [Requirements Traceability Matrix Template](https://docs.google.com/spreadsheets/d/1wsTAI8z9JtQah_6tbzSscUl8bRX8f3LRMra-5QVSzIE/edit#gid=0) Purpose: To track requirements for implementation and assure that they are implemented and that the requirements are tested Fields of the Traceability Matrix:
ColumnDescription
ATraceability Number - Assigned Requirement Number
BRequirement - Description of Requirement formatted as "Ability to..."
CMoSCoW Priority - Must Have, Should Have, Could Have, Won't Have
DImplemented Checkbox
ETest Case ID - ID of Test Case that applies to requirement
FTest Date - Date Test Case was run
GTest Result - Passed or Failed
HNOTES - Pertinent notes related to requirement or testing outcome
* [Requirements Traceability Matrix TEMPLATE.pdf](https://files.threek.it/training/CommunitySite_Resources/Requirements%20Traceability%20Matrix%20TEMPLATE.pdf) # Project Delivery Checklist **Purpose**:\ Step-by-step checklist allowing a project manager to ensure all related project activities have been confirmed complete. **Use**:\ Project Managers should begin confirming completed items on the checklist as soon as a project has been assigned. When a step is completed, check the completed check box, add the date of completion, and notate anything related to the step (if applicable) * [Project Delivery Checklist Template - Project Delivery Checklist.pdf](https://files.threek.it/training/CommunitySite_Resources/Project%20Delivery%20Checklist%20Template%20-%20Project%20Delivery%20Checklist.pdf) # Daily Stand-up Meeting Best Practice: For each project, conduct a daily 15 minute stand-up meeting conducted with all resources.\ GOAL: Establish daily tasks & deliverables for each resource. Confirm delivery timing. * 15 minutes or less. * at least 4x a week. * Project Phase independent. * Facilitated by the PM. Data provided by the consultants. * PM takes notes and distributes to the team **Script** * Did you finish your goals yesterday – yes or no only * if no, what were the roadblocks and what is the recovery plan? * If needed, recovery plan discussion should be taken into a separate meeting (its own scrum) * You may get a “yes and I’m ahead”, if so establish what goals can be pulled in and if it is healthy to do so * What are your goals for today? * Do you have what you need to meet your goals? * What is your time through yesterday? * billable / non-billable * Confirm staffed hours for the day & the week * Roundtable each person – “did I miss any item from your goal list?” NOTE: In extreme cases, script questions can be achieved through digital correspondence. # Status Report Template **Usage Instructions** Completed by the Project Manager\ Delivered weekly at mutually agreed to timing (suggested is Monday or Tuesday) *Steps to complete:* 1. Update project dashboard. 1. Identify high-level project narratives & value items 2. Update project workstream information 1. Project workstream examples are: modeling, configuration, integration, materials 2. Include delivery dates and highlight milestones 3. Call out any individual risks or issues related to each workstream 3. Compile all workstream risks & issues 1. Each risk or issue must have a suggested mitigation plan & estimated completion timing 4. Deliver via email to all project stakeholders 1. Internal and external stakeholders 2. include dashboard screenshot in body of email * [Status Deck TEMPLATE.pdf](https://files.threek.it/training/CommunitySite_Resources/Status%20Deck%20TEMPLATE.pdf) # Stakeholder Meeting **Usage Instructions** Completed by the Project Manager\ Delivered weekly at mutually agreed to timing (suggested is once a month) Steps to complete: Create Meeting Deck containing the following - * Current overall project status * Supporting information for each area (budget/timeline/resources) * Identification of high-level project narratives & value items * Review Project workstream information * Project workstream examples are: modeling, configuration, integration, materials * Call out any individual risks or issues related to each workstream * Review all workstream risks & issues that require stakeholder attention/intervention * Each risk or issue must have a suggested mitigation plan & estimated completion timing * Review Timeline that Includes delivery dates and milestones * Review upcoming phases * Discuss planning for next phases (i.e. UAT) * Open the floor for questions/feedback * [Stakeholder Meeting - TEMPLATE.pdf](https://files.threek.it/training/CommunitySite_Resources/Stakeholder%20Meeting%20-%20TEMPLATE.pdf) # Customer Roles and Responsibilities ![](/files/vIOPv94SIjdUdGzXsH9h) ### **Recommended Project Resources (Customer)** * Program Manager * Project Manager * Subject Matter Experts (SME) * Configuration * Pricing * Integration * Marketing * Sales * IT Management & Support * Stakeholders ### **Roles and Responsibilities** ### Post Production Responsibility *Program (Manager) Owner* * Owner of ThreeKit solution and its long term success * Typically someone who has * Grasp of business needs * Understands high-level architecture * Alignment with management for the long term vision * Examples of Activities * Provide guidance to leadership on areas for improvement and recommended path * Follow through to ensure technical and business are meeting objectives * Ensure elevated issues are resolved *** *Technical Administration* * ThreeKit will require technical resources to administer the platform * Technical Admin duties * Updates, changes and addition of styles, colors & options * Updates, changes, and addition of configuration logic * Implementation of new styles, colors & options * Supporting the transition: * Provide high-level administrative documentation * Documentation shared with and transitioned to customer support & success teams * Assign administrators to initial implementation project *** *Business Administration* * Each functional area interacting with the ThreeKit tools should have a business administrator * Business Admin duties: * Represent business in Customer Advisory Board meetings * Ensure any manual data is kept up to date * Review of changes to system output and signoff prior to production release # Internal QA Prior to moving into a validation or UAT phase, the following items must pass internal quality assurance (QA): **Basic functionality:** * Acceptable load time * Model clearly visible (i.e. not too small initially, can zoom, not cut-off mid-screen) * Rotate model all directions * Material changes are visible * Option changes are visible * Animations work as designed * Vertical drag/swipe has the intended behavior (interact with the player and orbit the view as normal or fall through and scroll the browser page) * Virtual photography images load as expected * All configuration changes can be made on the same screen while simultaneously viewing 3D models * Spellcheck * Pricing * Outputs (email/PDF/other) * Sharing is working (or disabled) * Integration points/data exchange **Test basic functionality on supported browsers:** * Most recent version of Chrome, Firefox, Safari, and Microsoft Edge on desktop device * Most recent version of Chrome and Safari on an iPhone, an Android phone, an iPad, and tablet **Additionally, tests beyond the "happy path" should be conducted to ensure quality prior to handing off to a client** # Customer Support Handoff Doc There are three main things that need to be done after a project is closed and the customer has signed the Certificate of Acceptance to properly hand a project off to support. 1. **Fill out the Support Transition Survey**. The link for this can be found on every Project record in Salesforce. These links are unique to each project, of the form "". This link must be used exactly if you want the results to both be mapped back to Salesforce appropriately and to have the survey be resumable among all members of the team. If anyone clicks the link, they will see any previously-inserted answers prior to hitting submit. Once submit is hit, the answers are saved permanently, and other team members would start a new survey upon clicking the link. 2. **Meet with the Support team** to discuss the survey results and any other concerns about the project. This gives Support a chance to ask questions about the answers provided and ensure that enough information was given. 3. **Schedule a meeting with the customer** to walk them through the support process, how they can reach out to get assistance, and what they can expect when they come to us for help. We'll go over our policies, procedures, and give a quick demonstration of the support portal. # Post Implementation Training Agenda ### Post-Implementation Training Agenda * Overview tour of their site as it exists at Implementation * Walk down left-hand navigation * How catalogue items and assets are organized for the project * Product naming and naming conventions * How catalogue items and assets relate to each other * Existing stages and where they are used (if applicable) * Recommendations for maintenance * What they can maintain * What you recommend they consult on ### Example Walkthrough * List of Catalog Items * Look at Item * Show SKU * Back to catalog * Click on Assets * Click on Item * Click on Stage * Explain what stage does * Show item in Stage * Modify Stage * Naming Conventions * Click on Assets * Click on Item * Launch into Editor * Click through options and show how is set up * Show logic editor * Q\&A * Where is my X? * How do I find Y? * How do I change environment map? * Walk through answers * Go to front end and show how displays on front end * Show shopify/similar side # Managing the Discovery Process **Planning for Discovery**\ During the course of a Threekit visual configuration project, an expectation should be set for discovery. Discovery may occur during the design phase of the project, during the implementation phase of the project, or even during the testing phase of a project. Discovery is a natural occurrence during the course of a project but it needs to be managed properly. Although discovery is encouraged, there are ways to simplify, such as: * Establish guiding principles of delivery & model quality standards * Establish a minimum viable product (MVP) delivery package * Establish a "fairway" concept - identify scope items that reflect the 80% use case At a high level, there are three basic ways discovery can be managed: 1. If the customer desires the new scope to be implemented within the current project, a change order must be issued to cover the additional scope. 2. The new scope can be moved to a later phase for implementation (a separate project) 3. Current scope of approximate equal level of effort can be removed from scope to accommodate the new discovery scope. The client should form a Change Management Board to review all new requests and render a decision as to whether or not the new scope should be included within the current project or should be pushed to a later phase (new project). Following production release, the client's Change Management Board should be responsible for all program updates going forward. # What is a Quality Workshop? **Executive Summary:**\ The Threekit Quality Workshop is a collaborative creative workshop in which We will review and agree with Our Customer to quality control process, quality feedback standards, quality standards to be met by the modeling team, and any other quality control mechanisms. **Workshop Logistics:**\ A quality control brief document, outlining such processes and any additional notes from the workshop. This will be used as the quality standard for all to-be delivered visuals in the scope of an SOW. Customer subject matter experts shall actively participate in the quality workshop and have in attendance every person that will be providing any approvals and reviews of creative deliverables in scope of an SOW. We anticipate that this workshop may be held remotely or onsite at the agreement of respective project managers. This workshop duration is estimated to be 1 to 4 hours. **Resources Required**\ Threekit: Project Manager, Lead Artist, Lead Developer\ Customer: Artistic approver, Product SME, Project stakeholder **A Quality Workshop can consist of the following sessions:** * SOW scope alignment & review * Project plan alignment & review * Build plan alignment & review * Establilsh approximate release plan delivery timing * SME resource availability & role confirmation * Establish roles & responsibilities * Project guiding principles * Status reporting alignment * financial, functional & weekly delivery messaging * Integration deep dive * Approval definition - artistic * Align on approval standards & subjective review process * Establish feedback timing (per SOW) * Use of ThreeKit ASANA tools * Verbal feedback from design meetings * Approval revision notes and process * Establish cadence and credentials in ThreeKit platform approval tool * Establish Visual Presentation standards & cadence * Objective: Obtain live and follow-up feedback to confirm work progress and vector * Presentation of existing assets - focus area driven * Audience is primary project stakeholders from ThreeKit & customer teams * Approval definition - functional * Align on approval standards, functional testing & deployment process * Creation of presentation deck # Project Update/Exam Template **Document Objective** This document is meant to act as a guideline for weekly project examination. *** *Users*: PM (completion & delivery); Delivery Manager (review & examination); Services executive (review & examination); project leads (review) Instructions: * PM to complete all fields once per week (per project) prior to Project Examination meeting * Delivery of document keeps focus on: Project Narrative, Earned Value %, Top risks, needs from the executive team, & action items * Data should align with project status report & financial forecast Roles: * During Project Examination meeting: PM provides project narrative and summary of review items * Delivery Manager & Services executive confirm project direction and next steps * Project leads support PM narrative and delivery * [Project Update TEMPLATE.pdf](https://files.threek.it/training/CommunitySite_Resources/Project%20Update%20TEMPLATE.pdf) # Consulting Methodology - Presentation Consulting Methodology - Presentation Please enjoy the attached presentation. * [Threekit Consulting Methodology - Template.pdf](https://files.threek.it/training/CommunitySite_Resources/Threekit%20Consulting%20Methodology%20-%20Template.pdf) # Task Estimation **Objective**\ Provides guidelines on how to estimate delivery timing for individual tasking. **Why does this matter to you?** * Provides portfolio information for planning and budgeting purposes * All Consultants need to estimate their own tasks * All relevant design and build tasks **Steps:** 1. Create & complete a task within your project planning system (i.e. JIRA), Asana) 2. Estimate and list all build steps 3. Estimate internal Quality Assurance (QA) 4. Estimate internal Peer Review (PR) 5. Estimate validation & testing support 6. Include contingency estimate **Task Estimation Supporting Notes:** * When * Mid-project, New task * Who * Individual Contributor (consultants & designers) * Where * Project Planning System (i.e. JIRA task) * Why * Portfolio information & planning * What * Build or design task **Presenter Notes:** * Confirm Use Case - should be documented via Requirements Traceability Matrix (RTM) and referenced in the Jira task * Add reference images & screen shots * add hours, start date & end date * make as accurate as possible - based on the skill of the resource who will execute * Contingency will vary depending on complexity of the task. # Implementation # UAT Planning ### UAT Planning Recommendation [UAT Planning Deck](https://docs.google.com/presentation/d/1lSmPM4J2Mnjunz4C0nEgVPo0o13ey8gIcb-N35f7CRQ/edit#slide=id.g65b5d01d9f_0_186) # Earned Value The concept of Earned Value is measuring value that a project has earned towards its major goals measured against planned progress and budget consumption. Typically, value is attained based on major tasks within phases. These tasks are given a numerical "weight" as is the phase as a whole. For example, the first build phase could have a total weight for the phase of 10 made up of weights of: * Configuration (4) * 3D modeling (4) * UI/UX, eComm, Outputs (2) The total of all phases weights will equal 100. As each task is fully completed, you will recognize the value for that tasks. There is a correlation between the value earned to date and the budget expended to date. Typically, budget consumed to date should track closely to earned value but there will be times within phases where EV will lag behind budget consumption until the value is recognized once the main tasks are completed. Once value is recognized, EV and Budget should be tracking closely once again. [Earned Value Template](https://docs.google.com/spreadsheets/d/1RUBbcSUa46YNHwpbFZ1pxj1Ry3_KNfjpS-JN9uGJdls/edit?usp=sharing) # User Stories [User Story Template](https://docs.google.com/spreadsheets/d/1dZXRzZVS1uR-zI8pqrPNz8cRzsqUbT2b6LNSIlcxu-o/edit#gid=1080271924)
# Milestone Signoff / Project Acceptance Document Objective: Ensure customer confirmation of milestone/project completion After a project is complete, we must send the customer a PDF via DocuSign agreeing that the milestone/project has been accepted and completed per the SOW. Inform customer that no signature or response after 5 business days will assume milestone/project has been completed. Make a copy of the Acceptance Form TEMPLATE, move the copy to the appropriate Google Drive project folder, and fill in the details in blue. Then make a PDF of the document and send it via Docusign. This document must be sent immediately after written or verbal confirmation that every task in SOW or related change order(s) has been completed. [Milestone Signoff Document](https://docs.google.com/document/d/12Vsezam7oA-VpKhf1TLhl1nrO09gGHrxdnGjNUHdX3k/edit) # Platform Overview Utilizing Threekit, you have the ability to provide a dynamic product visualization experience that updates in real-time with user selections. These experiences can include Virtual Photography, generating photo-quality 2D images of every combination of product options within your catalog, interactive 360-degree viewing of 3D models embedded into your website, and Augmented Reality, to view those same 3D models in the real world. ### Virtual Photography
Present your users photo-quality images of your entire product catalog without having to set up a professional studio shot for each product combination. Virtual photography can be used to present standalone product shots (“silhouettes”), scenes featuring your product (“lifestyle shots”), and configurable experiences (“visual configuration”).
### Interactive 3D Interactive 3D refers to a product presentation within a webpage whereby the customer can interact with the product in a meaningful way, such as spin it around and change options, while seeing live updates to the product. These outputs utilize WebGL, a web technology that enables high quality 3D graphics to be created, then presented, on a webpage. It leads to very fast, rich and engaging interactions.
### Augmented Reality Augmented reality is the ability to view your models in your surroundings, either on the floor in your room, a wall, or even on yourself (e.g. AR try on.) ![](/files/VAg9p0A6sPdLD9YDido9) \ In order to support native AR from web-based eCommerce sites without the need to install mobile apps, the Threekit platform creates glTF (Android) and USDZ files (iPhone). The platform can create these assets on demand or the platform can create all glTF and USDZ needed to represent your products via a bulk process. After a glTF or USDZ file has been generated it is then cached for future re-use to enable faster client experiences as well as to be resource efficient. On demand generation can be triggered via a customer clicking on the “AR” button in the product viewer. # Workflows # Basic Visualization The following steps are required to stand up a product in the Threekit Platform. ### Upload Asset Drag and drop Models and Materials to the Asset Listing or Asset Panel
*** ### Refine Asset Use the Threekit Editor toolset to refine Assets to your liking.
*** ### Create Catalog Item Create a Catalog Item to house all relevant product metadata.
*** ### Associate Asset with Catalog Item Associate uploaded Asset with the newly created Catalog Item and Save.
*** ### Create Public Token [Create a public access token](https://community.threekit.com/hc/en-us/articles/4405748696603) ![](/files/hYeLBilNVek4yZeerAEv) *** ### Publish * **Using the ID from the Catalog Item URL, assetID...** ![](/files/cHeioMFw9h2c6qGC5kjh) * **and the Public Access token, authToken...**
* [Embed the Threekit player**...**](https://developer.threekit.com/reference/embedding-the-threekit-player) ![](/files/JwcywkVld1lcvB2XeQnZ) * **to enjoy your stunning visual...** # Best Practices # General 3D Content Creation In order to facilitate the management of 3D assets at scale, so they can be used in many different contexts without problems or manual conversion effort, it is necessary to follow fairly strict best practices.\ This document outlines a set of basic standards, practices, and details that help achieve higher quality results in an efficient manner. We recommend that all users of the platform follow these guidelines. ### Supported Formats #### ThreeKit Platform Supported Formats The ThreeKit platform has import support for several main 3D asset formats - FBX, OBJ, GLTF/GLB. The typical workflow has the artist export their 3D models from their 3D software of choice as FBX. Currently, this supports only mesh, material, and embedded texture data. Animation, skeleton, and blendShape information is ignored.\ On import, the FBX will generate a 3D asset on the platform. It will also generate Material assets for the associated materials and maintain material assignment. Last, but not least, it will also create Texture assets for embedded textures and maintain their association inside the materials. For FBX imports, the material properties will not fully match the unique properties of the material inside the 3D software from where they were exported. It mainly acts as a starting point or placeholder.\ If you are using a PBR material inside your 3D software, then the best way to export it would be to use GLTF. The GLTF import works similarly to the FBX import, except that it also retains the full PBR material properties stored inside the GLTF. The implementation teams may also require from clients the original 3D files in - 3dsmax, Maya, Blender, Zbrush, etc, as well as FBX exports. In many cases, the FBX export would be sufficient, and this would be made clear at the initial call with the ThreeKit internal art team for a particular project. For material work, it may also be required to provide the original assets in PSD or Substance format in addition to the exported JPG or PNG maps. ### Geometry #### Potential Geometry Issues We recommend that you avoid the following geometry issues: * Isolated vertices - inefficient, can cause issues * Coincident vertices - Mesh smoothing operations may generate undesirable results * Coincident/coplanar faces - leads to z-fighting and subdivision issues * Coincident edges (unwelded seams) * Inverted or Inconsistent face normals - flipped normals from mirroring is a typical example, and it can cause a number of issues. #### Quads over Triangles We prefer quad geometry when possible because it makes it easier to do edits and run subdivision. There are no limitations on the platform as far as triangles or n-gons are concerned. The limits there are mostly that they cause subdivision artefacts the same way as it would in any other 3D software. Triangulated mesh imports are necessary in some instances. These are general real-time considerations. An example would be for applications where normal maps are required on folds and creases, or where the exact triangulation is very important. A typical example is clothing, where the geometry was either sculpted or generated by a tool like Marvellous Designer. Baking normals for such meshes are highly sensitive to the mesh triangulation. Our platform has its own triangulation algorithm that is likely to generate different results than the software that baked the normals. This will cause the normal maps to apply incorrectly. Another example where triangulation would be necessary is with animated meshes that are deformed by a skeleton chain. In some instances, the software needs to decide where to split the quads into triangles when the quads get deformed. If the quad was not pre-triangulated, the effect will show the inside edge being flipped during the animation. #### Polygon Detail We would prefer the models to have as few polygons as possible without sacrificing important details as well as ensuring clean/non-faceted silhouettes. This is a hard judgment call. When a choice has to be made between adding the extra detail through normal maps vs geometry, there are cases where the normal map would require a significantly larger file size than the file size of the additional polygons. This should also be a factor in the decision. The intended target platform for the project is also a consideration. For certain applications like Google or Facebook embeds, the triangle count is very limited (around 10k). We generally aim to stay within 100k triangles on screen at the same time. Most current devices allow smooth performance with millions of triangles, while performance can be seriously impaired on older devices. The main problem with millions of triangles becomes the resulting download size.\ In the end, visual requirements, performance and file size are all deciding factors. The larger the triangle count, the larger the asset file size. For the Virtual Photographer renders using Vray there is no hard limit in terms of polygon count. However, for ease of operation it is advisable to work with medium resolution meshes that will get subdivided at render time. In addition to that, displacement maps can be used to add the additional detail. The platform can easily support millions of triangles in the viewport as long as you have a dedicated video card like an nVidia Geforce or ATi Radeon. A bigger hit to performance while you work with these large assets will actually be the download size, as the assets have to be loaded from the cloud whenever you open them. #### Subdivision Compatible Generally, we would prefer geometry that is compatible with the standard Catmull-Clark material ID and smoothing group/normal aware subdivision surface operator. ### Transforms #### Scale All objects should be created such that they are in real-world scale. This allows for multiple objects to be imported into the same context without scaling issues. It also improves the ease of accurate lighting because it enables lighting based on physical quantities. #### Position Objects should be placed such that its natural base is located at 0,0,0. #### Orientation The object should be oriented so that its natural front is oriented towards the front direction in your tool. ### Scene #### Hierarchy We allow for an internal object hierarchy. It is best if it is logically grouped. Nodes should be in English and have meaningful names. Calling things Box001, Box002, Plane003 is not acceptable as it is meaningless. Meshes that share the same material and do not need to be separately configurable should be combined into a single mesh. #### Node Limits One should aim to only have a sufficient number of nodes but not an excessive amount. 5 to 40 nodes per. ### UVs For WebGL purposes, all objects should have their UVs unwrapped to use the texture space as efficiently as possible. Avoid wasting texture space, as it forces you to use higher resolution textures which require more memory and file size. For objects that are supposed to share the same material, such as different pillows, sofas, and armchairs, make sure to have consistent scaling for the UV shells/islands. This ensures that one material can map the same way across the different objects. The easiest way to achieve this is to use the Texel density feature inside Maya. For AR purposes, please keep in mind that ARKit on iOS has a limitation currently that prevents it from reading more than one UV channel. This means that if your product is using one UV channel for tiling a fabric material, and a second UV channel for a baked AO map or normal map, then only the first UV channel will be read by ARKit. Additional UV channels will affect the file size for the geometry. This can have a significant impact on file size especially for larger triangle counts. If you do not need the additional UV channels, then please avoid exporting them. ### Textures #### Power of 2 Our system will automatically convert textures internally to a power of 2, such as 4096x1024, 1024x1024, 1024x512 or 128x512. To avoid loss of quality by rescaling of textures, it is best to create your textures in a power of 2 size. #### Formats We recommend JPG and PNG texture formats. For WebGL purposes, PNG should only be used for textures that require an alpha channel as it does not compress as well as JPG.\ For the environment maps, we support both HDR and EXR textures. #### Maximum Sizes Real-time applications generally work best with texture sizes less than 3MB in total per model unless the model is uniquely complex. Mobile video memory can also be a limiting factor to texture size. Smartphones have shared video memory with the system memory, and textures get unpacked fully uncompressed into video memory. Thus, a 4k texture may be 1MB on disk, but it will end up being 64MB in video RAM for an RGBA type of texture. Care must be taken for mobile devices that textures and geometry do not overload the video memory. It is recommended that for mobile outputs we limit to 2k textures and less, unless specific testing shows that 4k textures will work on the targeted devices. #### No Procedurals Procedural textures cannot be correctly saved to formats like FBX or GLTF, and thus cannot be transferred to real-time applications. Procedural textures would have to be baked to a texture file before use in Webgl. Virtual Photographer with Vray does offer support for a number of procedural textures, as Vray can export them to vrscenes. #### Workflows **PBRZIP** In order to automate texture import, the platform supports the upload of pre-configured texture files. This is done through the use of a text file with JSON configuration inside it. The JSON file needs to have the same file name as the texture it affects, and have the extension .pbrtex. For example:\ MyTexture\_diffuse.jpg\ MyTexture\_diffuse.pbrtex Upon import, the contents of the JSON file will be automatically applied to the texture asset properties. Currently, these JSON files can be generated automatically through a variety of scripting means inside Windows, MacOS or Linux. The upload process for these textures requires that they are zipped together into a zip file with the file extension changed from .zip to .pbrzip. **Metadata** To further automate texture association with materials, metadata can be used to identify the correct textures to be loaded. Once metadata has been assigned to the texture assets, a template material can load the appropriate textures by using a query rule (currently available only through custom code). ### Materials #### Unpacked Logically Separate Materials should be set up as ONE physical material per mesh. Although we do offer support for Multi-ID materials (multiple materials assigned to different polygons on the same mesh), it is not a recommended workflow generally. #### General workflow WebGL materials are typically created directly on the ThreeKit platform. They could also be imported directly from other tools (such as Substance) through the use of the glTF format. Many of the material attributes include both a factor as well as a map asset. These two work in conjunction with each other, where the factor acts as a multiplier on top of the texture values. For example, if a texture is entered in the Roughness Image Asset slot, and the Roughness Factor is set to 0.25, then the resulting roughness will be only 25% of the texture values. If you wish to utilize just the texture directly, then you would have to use a Roughness Factor of 1. The same applies to a colour map, like the Base Image Asset. If a texture is chosen there, the Base Color will act as a multiplier on top of the texture, tinting the end result. Any of the attributes here can be customized with rules under the Logic section by using the Set Property Action. For additional details on the material properties, please visit the Documentation: [Material Properties](/platform-documentation/project-data/assets/materials/physical-material) Within the ThreeKit PBR material there are some additional features and operators that extend the typical properties of a real-time PBR material beyond what is currently supported by the glTF format. One such example is the Gem operator, which replaces the underlying material with a Gem only shader with some unique attributes. #### Tiling Override The Tiling Override operator is also extremely useful for adjusting the tiling of any of the textures mapped to the material’s properties. This allows the user to apply an overall tiling setting to a number of maps for a particular material, ignoring the existing tiling information stored inside the individual textures. #### Mesh-Specific Maps In a scenario where a model needs to use a generic material that is being shared by other objects, such as a tiling fabric texture, the model may also need to apply its own unique normal map or AO map to the material. The ThreeKit platform supplies functionality for this purpose using a PolyMesh Operator called Map Override. This operator has to be added directly to the mesh. The maps specified in that operator will then get automatically assigned to any material that is applied to this mesh. # Performance Guidelines ## Performance Targets * Overall player load of 5s or less * ThreeKit player bundle should load in 2s or less. A bug should be logged otherwise. * AR load time direct on mobile of under 8s * On a mobile device clicking the **View in Your Space** button, from request to load * Desktop to mobile via QR code load time under 8s ## Troubleshooting Performance The [Performance Dashboard App](/tools/general-apps/performance-dashboard) provides an easy method to quickly and effectively test the performance of your webpages with embedded Threekit players. It provides a set of recommendations to follow based on this document, as well as a set of metrics about the page and player load. ## Catalog Items * Ensure the Catalog Items are Published, to ensure they are getting cached for faster load times * Publishing Items triggers the generation of a new cache key for the item * The item needs to be republished every time changes are made to it or to its underlying assets * Minimize the unnecessary overlap of tags in the options of attributes. * Enable the [Static Publishing](/platform-documentation/org-setup/project-settings/features#static-publish) feature to speed up the evaluation of tags by the client ## Logic Rules * Minimize the number of calls to the server (keep under 20 if possible) * [Asset Queries](/platform-documentation/project-data/logic/queries/asset-query) and [Datatable Queries](/platform-documentation/project-data/logic/queries/datatable-query) take longer to process * Only run rules when necessary (i.e. add proper conditions) ## 3D Assets The total number of assets along with their total download size significantly impact load time. It is best to keep the total number of assets loaded as well as their total size to a minimum while still achieving your desired quality. It is also best to minimize the instances of assets and reuse existing instances. * Very Fast load times will be had when total assets are under 5MB. * Acceptable load times can be had when total assets are under 10MB. * More than 10MB and many users will report the experience as slow. * Use the Mesh Optimizer with the Simplify option where possible ### Materials #### Number of Materials There is a cost to both fetching and compiling each material for the GPU. This can add up to 200 ms per material on low end machines. Thus it is best to avoid unnecessary materials. It is also best to minimize the instances of materials and reuse the existing instances. ### Textures #### Number of Unique Textures There is a cost to fetching each texture and loading it into the GPU. Thus it is best to minimize the number of textures. Threekit only loads a texture once even if it is specified multiple times. Make sure that the textures are all identical and not slightly different versions. #### Texture Download Size All textures must be downloaded. It is best to keep the size of each texture file as small as possible. Preferring to use JPGs instead of PNG unless necessary. #### Texture Resolution Threekit decodes each texture to its original size and then upload this to the GPU. This means that the size of textures matters in terms of their resolution, no matter what their actual download size is. 512x512 is preferable to 1024x1024 or 2048x2048 textures - smaller is always best if you can get away with it. A large number of textures that are large in size can cause mobile devices, in particular iOS-based devices, to crash. Android and desktop machines are more robust in the case of large textures sets. There is an overhead per texture, so 4 2048x2048 textures is preferable to 16 1024x1024 textures even though the total number of pixels is the same. #### Canvases The above point also applies to Canvases, which will need to load into RAM based on the canvas resolution. Try to also limit the total number of concurrent Canvases, especially if they are nested, as this can significantly impact performance. They should be used sparingly. #### Shadow Planes Shadow Planes also rely on texture memory to hold the shadow map. The resolution of the shadow map is going to dictate how much memory is being used. Thus, increasing the amount of unique Shadow Planes can have a significant impact on memory usage. Try to avoid using more than two Shadow Planes concurrently, especially if they are using higher resolutions. ### Meshes #### Number of Elements The size of meshes, their count in faces and vertices, significantly impacts the download size of these meshes. The less faces and vertices the better. The number of UV sets also impacts the file size significantly. The larger the number of vertices, the larger the impact of multiple UV sets, where each additional UV set can add one or more MB to the file size. Note that Threekit does integrate with RapidCompact to optimize assets at scale. Contact us to learn more. #### Number of Distinct Meshes Threekit automatically recognizes when a mesh is used multiple times and it avoids allocating additional memory for the copies. It only does this when the meshes are exactly the same. If you can ensure that you duplicate meshes when possible instead of making slightly different meshes, you’ll save both GPU memory as well as avoid unnecessary downloads. ## Configurators ### Avoid Loading Non-Visible Assets Sometimes configurator are set up to load a number of assets and never display them. This can be a default texture used in a picture frame that is never shown. Or it can be items in a scene that just are never made visible. These items if they are forced to load can significantly slow down a configurator’s load time while serving no use. ### Custom Scripts Because custom scripts can allow for arbitrary operations, often there are slowdowns because of the nature of the options done in the custom scripts. Examples include long queries to Threekit or other services that can add seconds to the load time of a configurator. Be aware of what you are doing in these custom scripts, see if you can rewrite them more efficiently. * `setConfiguration()` triggers all rules to run again * Minimize its use in custom scripts, and consolidate all uses of **setConfiguration** into one call ## Player #### Initialize Player Quickly It is best to initialize the player as soon as possible on the client site. The sooner the player is initialized the sooner it will start to load and also complete loading. Only initialize the player once per page, instead of initializing multiple players. #### Use Cache Keys on Production Site Threekit's player currently supports cache keys that will ensure that everything in the configurator is loaded into the nearby CDN for quickest possible results. Once you have stopped regular editing of your configurator, it is best to start to use a cache key in our implementation. Remember to update the cache key when you make changes, otherwise they will not go live. ```shell { authToken: , assetId: , cache: { maxAge: 31536000, //how aggressive do you want the caching to be scope: 'v1.0' //name it whatever you want } } ``` ShellCopy Or ```shell const api = window.threekitPLayer(... cache:{ maxAge: 500, scope: '1234' }); ``` ShellCopy #### Use Preset or Empty Configuration There is a cost when an empty configuration is loaded and then immediately upon the player being initialized another configuration is loaded. It is best to load a configuration preset or an empty configuration. This is important for Threekit's "asset prefetching" feature that tries to predict the requests to accelerate loading. #### Enable Player Thumbnails Threekit allows for a preview thumbnail to be displayed while the 3D content of the player is loading. While this does not speed up the actual loading of the 3D content, it does make it appear to the user that the player is mostly loaded at a much earlier time. [Learn more about it here](https://docs.threekit.com/v1/docs/202110-january-6-2021). ### 2D Player * If there is no need to switch between the 3D and the 2D player, then make sure you embed the 2D player using the [optimized 2D player bundle](https://developer.threekit.com/reference/embedding-the-threekit-player#optimized-2d-player-bundle). * Ensure you make use of the 2D Player optimization features in the OrgSettings -> Performance settings, to load the images faster using the Base Image Settings on initial load. * Always use the Webp compression here, with 99 or less quality. ## AR * Pre-generate the Android and iOS files ahead of time where possible * Use the Virtual Photographer Render page to pre-generate the USDZ and GLTF files for item configurations ## Other #### Parametric Configuration * Always show a loading graphic when working with parametric configuration, to let the user know there is processing happening in the background #### Draw calls * The number of independent objects. Mobile is much more affected by this than desktop machines. For some mobile devices you have limits around 6000 draw calls per second, thus 200 per frame if you want to achieve 30 fps. * To help deal with this the editor has the ability to automatically merge together objects during import that share the same material. This reduces the number of draw calls required to draw the scene, sometimes significantly. #### Vertex shaders -- number of vertices. * Each vertex needs to be processed by the vertex shader no matter how many resulting pixels the triangles it is part of are rendered. For mobile devices this can be significant. It is best to use as few vertices as possible. * Keeping the vertex count <= 100K is a good guideline to follow. #### Fragment shaders * Our shaders are adaptive and do less work the less lights there are in the scene. The simplest case is to use a single IBL map (discussed later.) * Generally, this should not be an issue unless you have many lights. #### Post effects * The mirror effect, when enabled, does cause the scene to be rendered twice rather than just once. It does it at a lower resolution, thus the fragment shaders will not be a bottleneck, but the vertex shaders and the draw calls can be. * We have the ability to do a number of post effects. Some of the post effects can be costly on mobile devices. Setup tests for performance on such device at the beginning of a project, to determine what is usable and what isn’t. #### Video memory - GPU RAM Limited GPU RAM - particularly on mobile devices. This can be a strong limiting factor to the number of textures and texture resolution used. When textures are loaded into video ram, they get loaded uncompressed. Thus, a 4k texture may be only 1MB in file size compressed, but it gets loaded as 64MB of RAM. On mobile devices, the video memory is typically shared with the system memory. Thus, on devices with just 2GB RAM, the video may end up getting a much smaller amount of memory, and it needs to store the geometry as well. #### Screen resolution and size of rendering region in that screen. * Higher screen resolutions have more pixels, often significantly more. A 4K monitor has 8.3M pixels, where as a Full HD monitor only has 2M. 8.3M pixels will take roughly 4x more time to render than 2M pixels. While many people that have 4K monitors will bre driving them from high end GPUs, that isn’t always the case. Particularly problematic is the current generation mobile phones that have been released with 3K and 4K screens while having underpowered mobile GPUs. * To overcome these issues our viewer technology utilizes the device pixel ratio or device text scaling parameter and it will automatically reduce its render resolution below the screen resolution, thus achieve high performance even on mobile. ### Impacts to visual quality: #### Models **Vertices** Sufficient vertex count. For curved objects you should have enough vertices in order to show that the object is curved and not sharp. The number of vertices generally varies based on the visual prominence and subject-matter importance of the objects. **Faces** * To create surfaces, we need to connect the vertices together into faces. We support polygons natively within the editor and viewer. * We require those polygons to be planar. Non-planar polygons are bad. The reason is that GPUs only render triangles, and thus we need to convert the polygons into triangles to render them. We can not guarantee that our viewer will generate the same triangulation as generated in your design tool and thus you risk our results are likely to look different than yours. * We only support weakly concave polygons. In order to maintain render speed we do not support arbitrarily concave polygons, as concave triangulation schemes are time consuming, these will be triangulated incorrectly. We can support at most a single concave corner. * For subdivision, it is necessary to export polygons to FBX and to avoid pre-triangulation. Pre-triangulation combined with subdivision will lead to artifacts. **Normals** * Normals determine the surface orientation during the shading calculations. * There can be one or more normals per vertex. There can be as many normals at a vertex as there are faces making use of that face. * Normals can be specified in a few different ways. They can either be specified explicitly, they can be implied from the normal map’s topology where hard edges have unique normals per face along an even when positions are shared, normals can be defined by face-based smoothing groups (specific to 3DS Max), or they can be specified by edge hardness weights or booleans (supported by both Maya and 3DS Max.) * We prefer to have explicit normals, and failing that we support face-based smoothing groups from 3DS Max (be sure they are exported in the FBX files.) We are in the process of adding edge hardness weights. NOTE: The new auto-merging FBX importer does not yet support smoothing groups, it only supports explicit normals. **UVs** * We currently support up to 10 UV channels in the editor UI. * Using multiple UV channels allows you to use tiled textures for the diffuse and other attributes, in conjunction with baked lighting such as AO or lightmaps. The only limitation here is that the iOS ArKit unfortunately has a limitation with this feature, as it only allows one UV channel to be exported. #### Lighting * Light has unbounded intensity, because a light bulb can be as bright as the energy it is producing. There is no upper limit. * We use high-dynamic range rendering to achieve the most realistic result. * We use tone mapping combined with exposure controls to bring that back to the standard 0-1 range. By default we have the scene set to use the Filmic tonemapping setting, as it produces a more pleasing result. You can set this in the scene settings. * The typical lighting workflow for WebGL is to use a pre-generated HDR texture inside the Environment Map Asset slot of the scene settings. There are many free as well as paid libraries available out there for such HDR images, but they can also be easily created inside 3D software tools using spherical/panoramic cameras, or with tools such as Lightmap’s HDR Light Studio. * **The Shadow Plane Tool**, available under the Lights button in the toolbar allows you to create a direct planar projection of a shadow. It can be angled and skewed. A scene can contain a combination of several such Planar Shadows. Objects can be ignored by the Planar Shadow tool through the use of the Cast Shadows property on the mesh. #### Special Effects * Mirrors. We support rendering a single mirror surface. This can be enabled in the “Scene > Player > Mirror” settings. You can set its roughness and its fresnel value. This can be a nice visual effect. * Scalable Ambient Occlusion (SAO). SAO allows for the simulation of global illumination effects without any pre-processing. You can enable this in the scene settings. The SAO Post Effect ignores objects that have a material which already uses an AO map. The SAO is also not currently designed to work with transparent surfaces, as it is a depth map based post effect. Additionally, SAO only works with an HDR and does not export to AR. # 3D Asset Naming Conventions There are four separate areas where a naming convention is needed: * Asset names (includes models, textures, materials, etc.) * Node names (mesh, curve, and group / null / locator nodes) * Catalog Item names * Rules and Attributes ### Asset Names Asset names should come primarily from the file names that get uploaded. It would be best if assets are only renamed when necessary to match with a renaming of the actual source files as well, or for other specific purposes. Retaining the same name for both the assets and their source files ensures that assets on the platform can be automatically updated when a file with that name gets drag-and-dropped on that asset folder. The naming convention that can be used with the file names can vary from project to project. Overall, however, we would like to stick with capitalization for the first letter, and a separation of elements by the use of underscores ‘\_’. For example, a chair asset with its associated textures and material can be named as follows: Chair\_Lounge.fbx\ Chair\_Lounge\_MAT\ Chair\_Lounge\_diffuse.jpg\ Chair\_Lounge\_roughness.jpg\ Chair\_Lounge\_specular.jpg\ Chair\_Lounge\_opacity.jpg\ Chair\_Lounge\_metalness.jpg\ Chair\_Lounge\_emissive.jpg\ Chair\_Lounge\_AO.jpg This example will allow us to quickly identify on the platform each of these assets as what they are intended for. The materials need to have the \_MAT suffix, in order to distinguish them from the model asset when we have to select them in the Catalog Item 3D Asset reference dropdown. For the attribute reference on the textures, we stick with lowercase names that match the attribute intended for the texture (ie. \_normal instead of \_Normal). ### Node Names The node names refer to the names of nodes in the scene graph. These nodes can be mesh nodes, NULLs or groups, lights, curves, cameras, etc. The naming convention here would follow a similar pattern as the asset names, although there are fewer restrictions. In general, this would follow the typical naming convention used inside Maya or 3dsmax. It is useful to name nodes with the appropriate suffix that describes the type of node it is. This comes in very handy when selecting the nodes inside rules.\ Take this for example: * Chair\_GRP (the parent group) * Chair\_Legs * Chair\_Back * Chair\_Cushion * Chair\_Legs\_CRV (for curve nodes) * Chair\_Legs\_JNT (for Joint nodes) * Chair\_LIGHT (for Lights) * Chair\_CAM (for Cameras) CameraTarget\_NULL (for Null nodes) ### Catalog Item Names For Catalog Items we need to follow the naming convention provided by the client. This would mean that we would need to pick the same names that the client uses in their system as much as possible. The choice between product codes and their English readable names has to be made on a per-project basis, with the dev and the art team in agreement. Aside from the actual products there will be supporting catalog items that will need to be created, including the main configurator items. For these, the same naming convention as the Asset names could be followed: Chair\_Lounge (or Chair Lounge). It is less important to avoid special characters like spaces or dashes in the catalog item names, since they are not associated with file assets. The special character restrictions on asset names are primarily due to the file and node name restrictions inside different Operating Systems and the 3D applications. For example, Maya does not allow any special characters aside from underscores “\_”. The more important item to consider here is matching names between catalog items and assets as much as possible, to avoid any potential confusion. For example, use names like: **Catalog:** Chair\_Lounge (or Chair Lounge)\ **Asset**: Chair\_Lounge Instead of: **Catalog:** LoungeSeat\ **Asset**: Chair\_Lounge ### Rules and Attributes When it comes to attributes in particular, it is very important to use names that clearly identify the purpose of the attribute and how it is used. Avoiding confusion will be very important. For example, if the cushion on the chair above is configurable with a mix of leathers and fabrics, it would be suitable to create an attribute named **Material**, or\*\* Fabric\*\*, since both terms can be interchangeable in this scenario. It would not be suitable however to name the attribute **Leather**. Within this context, also avoid naming multiple attributes with similar names, such as having two attributes named **Material** and **Fabric**. If the purpose of the Material attribute is to describe the wood choice for the chair, then a more appropriate name for it would be **Wood**, **WoodMaterial**, or **WoodChoice.** Avoid names that are non-descript, such as **x**, or **increment**. Instead, use a more descriptive name such as **spacingIncrement**. Note how in this example we made use of the camelCase naming convention for attributes that are used solely inside Assets for logic purposes. You could also name it **SpacingIncrement**, **Spacing Increment**, **Spacing\_Increment**, as long as you maintain the same convention throughout. Avoid mixing underscores and spaces for attribute names. A similar descriptive logic applies to the Rule names as well, except that rule names should generally be kept more sentence-like. For example, it is preferable to have a rule titled **Apply Material** only on assets with just one material swap. If multiple materials are being swapped in that single rule, then call it **Apply Materials** For rules that are dependent on conditions like ON or OFF, or values like “Blue”, “Red”, “Green”, etc, it is best to clearly identify this on the rule name as well. For example:\ **Load Shirt for Jacket\_OFF Vest\_ON**, or **Apply Material Blue**, **Apply Material Red**, etc. # Usage of Shadows With AO & SSAO Welcome to our series on *3D Best Practices*. In this series, we address the key components of describing the differences and optimal usages of **AO** and **SSAO**. This article focuses on what AO and SSAO are, and how to use them most effectively. Following these simple steps can dramatically improve the visual quality of the configurator output.\
### **What is AO?** *Ambient Occlusion* or AO is a method where shadows are pre-baked into a texture. In 3D this is a shading and rendering technique which calculates the exact area in which ambient light would interfere, thus causing shadowed areas.
### **Why is AO used?** AO is primarily used to greatly improve the visual quality of your scene. You can have AO baked onto your model, the floor beneath it, or the room around it. Essentially anything that is a 3D Mesh can have AO. AO is calculated with consideration of the other objects in the scene, which means some implementations cannot use AO easily. **AO does a few things:**
* Increases the realism of your object by giving it “weight” and grounding it * Reduces blown out areas due to bright lighting, and overall softens the look of the objects it is applied to * Helps with anti-aliasing and having very jagged white edges on the mesh * The most visually appealing method of applying realistic shadows ### **When should AO be used?** AO is a very useful tool to have in your arsenal when it comes to creating visually appealing configurators or renders. AO should definitely be used in simple configurations, especially those that do not have moving or changing physical properties. Basically, any implementation that is material property changes only are perfect for the use of AO, and should *always* be used for maximum visual appeal. ### **When should AO *****not***** be used?** AO is a lot more simple to use when the configuration involved does not have many changing physical parts. The reason for this is because the shadows being baked makes them static, and being static means that if parts move or change, those shadows will remain and look incorrect. The way around this is to bake a different shadow for every possible iteration of the configuration. Sometimes, you can get around this by “exploding” your mesh and baking shadows. What this means is separating all the parts and moving them apart slightly to bake a more general shadow. In any case, it’s quite evident why this can become complicated depending on the implementation. ### **What is SSAO?** *Screen Space Ambient Occlusion* or SSAO is a similar method for utilizing shadows, but has different uses and performance capabilities. The main difference that SSAO provides over AO is real-time shadow enablement. This is highly effective for any configurations that utilize a dynamic scene, as well as those that need to be time efficient. Figuring out whether your configuration is dynamic or static will reveal if you should use SSAO or AO (in most cases). Sometimes you can use AO in dynamic scenes as stated above, but it will take more planning and time to execute properly. The Threekit player has a very good and optimized SSAO setting within the scene.
Here you can see the options available for SSAO within Threekit. These can be found in a Scene asset on the right hand side. SSAO is a fairly optimized option for real-time usage, and should always be used when baked AO can not. It’s the easiest and most time efficient option since it only needs to be enabled, and a few settings adjusted. The caveat here is that it does not look as visually appealing as AO. This reduces the overall appearance of the configurator and lacks the look of real-world shadows. However, it is much better to use than nothing at all. # Camera Set-up Best Practices ### When do I need a Camera and why? Generally speaking, every implementation should include a camera within the scene. The default perspective, or orthographic view comes with some basic settings. These are sometimes sufficient, however updating the camera(s) to match the product being displayed creates a noticeable visual difference in the final product. ### How is the camera matched to the product? When a camera is created, it comes with a focal length of 35mm. This is considered a 'normal lens' which emulates natural human vision. This means the field of view is not too wide and not too long; providing a general basic view. For a better visual experience, this focal length may be changed to better accommodate the product. First, ask yourself how the product being depicted would be viewed and showcased in the real-world. *Is this a small object? A large object?* *Is it an entire room?* *Do I walk around the object or spin it in my hand?* Knowing how an object is commonly interacted with helps create the experience intended by ensuring visual changes from simulated movement mirror that of a real world experience. #### Small Object(s) In this use case, small objects are things like: jewelry, phones, cases, mugs, etc. Essentially, something you can hold in your hand. Generally speaking, the smaller the object, the narrower the lens recommended. A lens width between 50-85mm will give a more accurate view for a small object than the 35mm default. {% hint style="info" %} *NOTE: In photography, a wider lens is denoted by a smaller value in mm, such as 24mm or 18mm*. {% endhint %} Adjusting the *Control Mode* for small objects to be *Node (*[*Turntable*](https://community.threekit.com/hc/en-us/articles/4406960216091)*)* can help simulate reality in the most accurate way by freezing the camera position and rotating the object itself. This completely changes how the object appears visually by adding dynamic reflections of its lighting environment. This is important with small objects because this is how they are seen in reality, whether someone is holding the object in their hand and rotating it or it's on a turntable. #### Large Object(s) For large objects, having a wide lens is crucial so the field of view captures the entire product. Large objects include: automobiles, furniture, rooms, etc. 35mm or lower is best for this. When depicting large spaces such as rooms, 18mm makes the view wider to help visualize the entire space. Since, in real life, you walk around the space/object to experience large objects or rooms, the *Control Mode* should be set to *Orbit (Default)*. This creates a more realistic visual experience by creating a scene where lighting on an object remains stable as the viewer (camera) moves around the space. Returning to our initial questions: ***How is this product displayed in a store or showroom?*** This question helps answer how wide the lens should be. This also helps you decide what kind of High Dynamic Range Image (*HDRI)* you should be using and how your camera settings interact within it. ***Do I walk around the object or am I viewing it in my hand?*** This question helps you answer whether the camera is set to Turntable or Orbit. Now that you've identified which settings let your camera '*see*' the product best, it's time to set up the composition of the view and constraints. ### Taking Composition Into Consideration Setting up the composition of your player requires figuring out where and why to place the object in view. Generally speaking, for product photography, the object will either be in the center (*bullseye)* or slightly below the horizon line. This keeps the product the focus for the viewer. It is important to place the camera so rotating the view never cuts off the mesh (the object) or shadow plane (it's shadow) at the edges of the player. ### Constraints and Zoom Constraints and Zoom distance give the 3D artist the ability to guide the view and ensure the user can't zoom in too close or too far. This is essential because it can ruin the experience of the entire configuration if the user can't see the product properly or can move through the mesh/floor. Constraints work on a Longitude and Latitude scale with values ranging from -360 to 360. When you see a product in real life you are limited by physics and adjusting camera constraints to enforce that experience digitally helps the configurator feel like a more realistic experience. In many use cases, constraints are used so the camera cannot go under the floor, through a wall, etc. This is done by providing a narrowed range in which the camera can travel. The Zoom Distance option on the Camera settings can be adjusted so the user can "walk to” and “walk away" from the product within a set distance. This should always be set so the user can't end up inside the object or so far away the object becomes lost. These are physical restraints which help emulate a realistic showcase and provide a positive user experience. {% hint style="info" %} *NOTE: The minimum/maximum distance offset is calculated in **meters** and is relative to the original position of the camera.* {% endhint %} # Reference Image Guidelines Regardless of whom is chosen to create 3D models, providing good reference material is essential for the creation of high-fidelity visual models. The following are recommended photo orientations for a piece of furniture that does not have a 3D model. 1. Some sample marketing photographs currently used by the customer on their website. This will provide insight into the desired lighting and presentation style for the products. Only a few sample photographs are necessary.\ For example: ![](/files/NKUcG7e9DLeRvCO7h2bo) 2. Additional views that give a good sense of the proportions and how the materials are laid out are important. These do not have to be professionally taken, but straight-on shots and shots that provide both length and width perspectives are helpful.\ For example: ![](/files/ReSNyhFDOb7IhQW4x8Kl) 3. Some additional shots that emphasize intricate detail, these photos also do not need to be professionally taken. Examples here would include screw heads, carvings, legs, handles, studs, etc. ![](/files/fv0vlubimWb2uoRflLpU) 4. Lastly, blueprint diagrams for the large pieces like tables, sofas, armchairs, credenzas, etc., which show dimensions are very helpful. ![](/files/eI7w69iqMvb2Xhbupw9y) # Text Personalization Product personalization provides an added boost to any configuration experience. To create a canvas for text input on a Catalog Item, make use of Operators on the Texture Asset. An example is provided below: 1.) Navigate to Assets, create a new Texture.
2.) From the properties panel, include a '[Canvas](/platform-documentation/project-data/assets/canvases)' Operator.
Adjust the size as necessary. For the purposes of this example, the background will be left black, as this texture will be plugged into the opacity slot of the material used to display the canvas which reads black as fully transparent and white as fully opaque. 3.) From the properties panel, include a '[Canvas Text](/platform-documentation/project-data/operators/image-operators/canvas-text)' Operator.
Since the background was left black in step 2, it is necessary to adjust the text color, which is black by default, to white. This will ensure that the background of the canvas is fully transparent, and the text is black. Within the properties panel, experiment with the positional font settings as preferred. Additionally, custom fonts (.ttf) can be imported and are accessible via the 'Font File' value in the **Font Type** dropdown of the Canvas Text Operator Properties. 4.) Navigate to Logic Mode, create a String Attribute, 'Text Input'
5.) Create a Rule, name it
6.) Create a set property Action
7.) Set the Text property on the Canvas Text operator as the target
8.) Set the toggle to 'Attribute' and ensure the Text Input Attribute is selected
9.) On the relevant Material Asset, create a String Attribute, 'Text Input' ![](/files/617XxeetNWVwESn52QyQ) 10.) Ensure that the Text Input Texture is assigned to the Opacity slot on the Material
11.) On the relevant Model Asset, create a String Attribute, 'Text Input'
12.) Ensure the relevant Material is referenced on the appropriate mesh node
13.) Create the Catalog Item and include a String Attribute, 'Text Input'
14.) Associate the appropriate Model with the Catalog Item
15.) Test # Image Upload Personalization Including an image is a common way to personalize a product. The following steps provide a walk-through of setting up a canvas to accommodate an image uploaded via a configuration attribute. 1.) Navigate to Assets, create a new Texture
2.) From the properties panel, include a '[Canvas Composite](/platform-documentation/project-data/operators/image-operators/canvas-composite)' Operator
3.) From the properties panel, include a '[BlackWhite](/platform-documentation/project-data/operators/image-operators/blackwhite)' Operator
4.) Navigate to Logic Mode, create a Texture Asset Attribute. (It will be named "Logo" for the purposes of this example)
5.) Create a Rule and name it
6.) Create a set property Action
7.) Set the sourceImage property of the Canvas Composite Operator as the target
8.) Set the toggle to 'Attribute' and ensure the Logo Attribute is selected
9.) On the relevant Material Asset, create a Texture Asset Attribute, using the same name as above.
10.) Ensure the Logo Texture is assigned to a slot on the Material (Base Image is used in this example)
11.) On the relevant Model, create a Texture Asset Attribute, using the same name as above
12.) Ensure the relevant Material is referenced on the appropriate mesh node
13.) Create the Catalog Item and include an Image Upload Attribute
14.) Associate the appropriate Model with the Catalog Item
15.) Test # V-Ray Workflow The ThreeKit platform provides extensive support for the use of Vray assets, in order to generate beautiful 2D renders of each configuration.
The use of VRay allows us to produce more photorealistic results than what we could achieve currently in WebGl. This is due primarily to the fact that Vray uses a ray-traced approach to lighting and shaders, which means that it tries to simulate more closely how light behaves in the real world. This leads to better reflections, refractions, shadows, and aliasing. The following set of documents describe the process required for the generation of 2D renders on ThreeKit, using the Vray set of features. To find more information about Vray, please visit the [official documentation](https://docs.chaos.com/category/vray). 1. [Vray Requirements](/learn/workflows/v-ray-workflow/1.-vray-requirements) 2. [Vray Asset Preparation](/learn/workflows/v-ray-workflow/2.-vray-asset-preparation) 3. [Vray Asset Export](/learn/workflows/v-ray-workflow/3.-vray-asset-export) 4. [Vray Scenes](/learn/workflows/v-ray-workflow/4.-vray-scenes) 5. [Vray Models](/learn/workflows/v-ray-workflow/5.-vray-models) 6. [Vray Materials](/learn/workflows/v-ray-workflow/6.-vray-materials) 7. [Vray VFB Presets](/learn/workflows/v-ray-workflow/7.-vray-vfb-presets) 8. [Vray Operators](/learn/workflows/v-ray-workflow/8.-vray-operators) 9. [Vray Light Linking](/learn/workflows/v-ray-workflow/9.-vray-light-linking) 10. [Vray Compositing](/learn/workflows/v-ray-workflow/10.-vray-compositing) 11. Vray Render Workflow (coming soon) 12. Vray Troubleshooting (coming soon) # 1. VRay Requirements This is a list of the requirements and limitations for using Vray with ThreeKit: 1. Versions: ThreeKit currently supports the following Vray versions:\ **Vray 4.30.xx**, **Vray 5.20.20, and Vray 6.2**. Users could certainly upload vrscene files from other versions as well, and the Vray standalone will render them, but there is no guarantee that the render output will look as expected.
2. 3D Software supported: The ThreeKit platform is currently offering explicit support for vrscene files exported from **Maya** and **3dsmax**. The Vray plugin is available for other applications as well, along with vrscene export support. Uploading these vrscene files from other 3D applications will work with ThreeKit, but we can not guarantee that the render output will be as expected.
3. The ThreeKit platform currently supports only the **VRay CPU Production** rendering mode. GPU or Progressive rendering is not currently supported.
4. Color Management: The ThreeKit platform uses linear and sRGB color management exclusively. There is no support at this time for other color management options. This means that it is important to correctly set up the Maya and 3Dsmax color management settings, along with the Vray VFB Display settings, in order to get consistent render results.

Recommended Maya color management settings

Recommended Vray5 VFB Display settings

5. For texture formats we recommend sticking with **PNG**, **JPG** and **EXR** files. Although ThreeKit does support other formats as well for upload, there can be inconsistencies between how these other formats are read between different applications. The TIFF format is particularly sensitive to that, so we do not recommend its use.
6. ThreeKit currently only supports a clean render output with transparency for vrscenes that render on a black background.\ In order for the resulting images to come out looking clean, without edge aliasing artifacts, it is important to understand that ThreeKit only guarantees a clean result on black backgrounds for the renders where there would be transparency. There is no option at this time on ThreeKit to choose the matte color, in order to calculate the edge aliasing correctly. Any color other than black for the transparent pixels will result in visible edge aliasing, which would stand out more or less depending on the background behind the render.
7. ThreeKit does not currently support **UDIM** texture setups. The best way to reproduce this effect on ThreeKit is to split the mesh into the separate components that make use of the separate textures, and use the **Template Override** operator as described in the **Vray Operators** section. # 2. VRay Asset Preparation ## Overview The ThreeKit platform supports Vray assets through the use of **vrscene** file exports, and the VFB file export (**vccglb** from Vray4 only at this time). When the user triggers a Vray render inside Maya or 3dsmax, the Vray plugin generates a vrscene output file that contains all the necessary data for Vray to process the render, excluding the texture data. This means that the camera, render settings, mesh data, materials (with links to the texture assets), and lights are all stored inside the vrscene file. All of these elements can be set up for configuration on ThreeKit, with the most notable exception at this time being the render settings. The following list shows the typical configuration changes in a given project: 1. Swapping models 2. Swapping materials 3. Swapping textures 4. Changing number-based nodes and properties in the shader graph (eg: multipliers) 5. Light properties and light linking ## Naming Convention & Hierarchy With this list in mind, we have to prepare these assets for ease of configuration, especially at scale. This means that naming conventions are very important. A naming convention that is easily understandable, and being used consistently is critical to the success of the project. This applies to all the elements listed above (models, materials, textures, configurable nodes in the shader graph, and lights). Automating configuration of these elements at scale is entirely dependent on a consistent naming convention. This is of particular importance for the models and textures, which may need to be loaded automatically using metadata queries. This means that we could automatically connect textures with materials based on the file naming convention used on the texture (eg. MaterialFamilyName\_FabricName\_diffuse.png). Click here for more information about metadata queries. Clear identification of material names vs model names is also very useful, as the ThreeKit platform has certain dropdown lists where it does not differentiate between model, texture, scene, and material assets. This means that naming a material with the same name as a model is not recommended. Instead, we prefer to use something like ModelName\_MAT for material names. For model hierarchy organization, the ThreeKit platform does support group nodes (NULLs) and dummy/locator objects. These are very useful for organization purposes. However, too much nesting in the hierarchy can also cause issues with the ThreeKit UI, so it is recommended to keep it at a minimum. ## Exposing Nodes For Configuration For configuration of individual shader nodes, this is possible through the use of the TK\_ prefix on shader node names. This is currently supported only on texture file nodes and VrayUser nodes (specifically the VrayUserColor, VrayUserInteger, and VrayUserScalar nodes). Naming one of these nodes with the TK\_ prefix will expose that node for configuration on the ThreeKit platform during the vrscene import process.\ \ In the following example, the TK\_BaseMap and TK\_BaseTint will be exposed for configuration on ThreeKit inside the material asset:
![Maya Material Setup](/files/eZTtijDeyhWEqliL8GwW)

ThreeKit Vray Material Settings

When connecting these nodes with TK\_xxx names to a shader network, please ensure that they are actually being saved in the vrscene file as well. In some cases, Vray does not actually end up saving these nodes in the vrscene file. Instead, it just transfers their values directly to the property in the parent node where they are connected. In Maya, this happens especially when the connection is made to a property that does not have the explicit “checker” icon beside it. To check whether these nodes were properly saved in the vrscene, the user can open the vrscene using a text editor, and perform a simple search there for the name. Be aware, however, that some vrscene files can be very large, and they may crash the typical text editors that do not support opening large files. {% hint style="warning" %} **Warning!** Unfortunately, 3dsmax does not save the custom names of these vrayUser Nodes in the 3dsmax file. Upon reopening the file, 3dsmax will rename these nodes to generic names. {% endhint %} ## Configurable Vray Features The ThreeKit platform offers support for a number of Vray features directly in the ThreeKit UI, which allows their properties to be configurable directly on the platform. These features are the following: * **Vray Displacement/Subdivision** settings * **Vray Material Wrapper** settings (including additional similar settings from geometry meshes that affect primary visibility and Reflect/Refract visibility) * **Vray Rounded Corners** Applying these features on the ThreeKit platform to mesh nodes inside an imported vrscene would typically override these existing features in the vrscene file. The ThreeKit UI does not currently support connecting shader node networks into the properties of these additional features added through the platform, such as the file node in the Vray Displacement operator. If that functionality is needed, it should be baked through the vrscene file, and the models imported with the vrscene file. In that case, the user would not need to add the Vray Displacement operator on the platform on top of it. ![Maya Example](/files/mg8E81lQVa8ZpUovXgF8) ![ThreeKit import](/files/JPCSDRGdYzKHh0uJz5VK) ## Template Materials A good practice with configuration at scale is to think in terms of creating templates, rather than unique assets with exceptions. This applies in particular to materials. A Vray fabric material can be set up simply as a collection of texture nodes connected to a standard Vray material, instead of unique Vray materials for each individual fabric. This one template material can then be reused as a template on ThreeKit, connected to multiple fabric catalog items, with the individual file nodes configurable based on the fabric that requires them. This kind of automation can be achieved in several different ways on ThreeKit, but what they all have in common is the reliance on a consistent naming convention that allows the textures to be matched with their corresponding material. Here is an example of what a simple template fabric material could look like:
Another important advantage of keeping the Vray materials as flat and simple as possible is that often the project requires the product to exist both as a 3D and 2D configurator. This means that the artist would need to be able to reuse the same textures with both the Vray material as well as with the Webgl PBR version. Since the Webgl material is currently a flat structure, without the ability to have a node network, it would be easier to match the look of the material if the Vray version is also kept simple. This essentially requires a workflow that bakes all necessary color corrections directly into the textures, rather than relying on shader nodes. ## Conclusion As a simple rule of thumb, it would be best to keep the setups as simple and straight-forward as possible. It will make the configuration setup on ThreeKit (and in general) a lot simpler, and easier to understand. # 3. VRay Asset Export ## Overview There are several different ways to export the scene assets, and the choice of process depends on the desired configuration setup on ThreeKit. An entire scene can be exported to ThreeKit, through a vrscene export, and ThreeKit will expose the contents in terms of mesh nodes and lights, along with the exposed attributes named with the TK\_ prefix. Vray scene files can be imported into ThreeKit in three different ways: 1. As a scene, which also extracts the camera as a ThreeKit camera in the scene, along with a vrscene node that contains the contents of the scene. 2. As a model asset, which extracts everything into a model asset, except for the camera. 3. As materials only - which extracts each material found in the vrscene as a separate Vray material asset. ## Export Settings To export a vrscene version of the current scene, the user must switch the render output settings from just “**Render**” to “**Export to a vrscene file**”, then hit the Render button to trigger the export. Here is an example from the Maya UI:
Please note that the **Strip Paths** checkbox is set to ON. This is important, because then all of the texture links inside the vrscene will be saved as just the file name, without the full local path. This will enable ThreeKit to find those textures in the same folder as the vrscene. The subsequent checkboxes under that, for writing the data in hex format will just help to keep the file size smaller, particularly in the case where there is a lot of geometry being included. ## The Camera Each vrscene export will only include the camera used to trigger the “render”. A vrscene export is essentially a text file that describes a single image render.
When the vrscene is imported as a scene asset, the ThreeKit import process will generate a scene asset which will also include a camera with the same settings as the ones found inside the vrscene file. If the Vray camera was using a Physical Camera operator on it, those settings will also be exposed on ThreeKit as well. ### Multiple Cameras If you wish to export multiple cameras that require a Vray Physical Camera, then you will need to perform a separate vrscene export from each camera individually, then zip up all these vrscenes together into a single zip file with the extension rename from .zip to .vrscenezip. Then, you can import the vrscenezip file into the platform as a scene asset, which will extract all the cameras into separate camera objects. ## The Lights In a typical configuration, where a set of different products need to be swapped and rendered with the same scene, we would want to export the scene backdrop along with the lights as a vrscene by itself, separate from the product geometry. For this purpose just make sure you hide all product geometry in the scene, leaving only the backdrop geometry and the lights visible. You can choose to export this from the render camera if importing it as a scene directly, or just from a random camera if you plan to use this as a model asset on its own. The advantage to importing the scene elements as a model asset instead of a scene is because it makes it easier to swap and update the lights asset without breaking anything in the scene asset itself. The scene lights asset can be dragged and dropped into a scene, and it can be swapped there through rules as needed. This makes the setup more flexible. The light linking will then be configured directly on ThreeKit. ## The Products The product geometry can be exported separately on its own as a vrscene file, or as FBX files. There are advantages and disadvantages to each option. **Vrscene advantages:** * The export can include special geometry and nodes such as Fur. * Shader networks can be connected into model properties, such as Displacement * A single export to include both the geometry and material assignment, instead of dealing with multiple files when swapping of materials is not needed. * Dense geometry will be displayed as a bounding box only on ThreeKit, which loads much faster in the browser. **Vrscene disadvantages:** * The mesh shape can only be previewed as a bounding box currently, making them unsuitable for dual use as both Webgl and Vray configuration. * The user would not currently be able to apply Polymesh operators on ThreeKit to these Vray mesh nodes. **FBX advantages:** * The meshes can be used for all kinds of configuration - Webgl, Vray renders, as well as AR exports * All polymesh and material operators are applicable to them. **FBX disadvantages:** * The more detailed meshes can take a long time to load into the browser window when using the asset editors. * Doperties. * Requires separate exports for the Vray materials. Does not allow the export of special nodes like Fur, or shader networks connected to mesh properties like Displacement. ## The Materials In order to import each Vray material to the platform as a separate standalone asset, the materials can be simply applied to a box inside your 3D application, without any other assets visible, and rendered to a vrscene that way. That vrscene can then be imported into ThreeKit with the Material option, which will extract all the Vray materials in the scene to separate material assets on ThreeKit. This approach is not strictly required. The vrscenes can contain any geometry and lights, and the import process as Materials will still extract only the material themselves, ignoring the rest of the data. The reason the user may prefer to apply the materials to individual boxes, is to keep the file size as low as possible for the import process. One very important thing to consider when exporting materials in this fashion is to maintain the UV channel assignments. If some of the textures in the shader network are meant to be applied to the second, or third, etc. UV channel, then the box should also have those channels available, and the textures need to be linked to those channels before export. ## The Textures When exporting materials or vrscenes in general, textures are often required in the process. The vrscene files do not embed the texture data directly. Instead, these files contain the path to the file, with the file name. When the file nodes specified in the export are not named with a TK\_ prefix for exposure on ThreeKit, then the texture files should be included with the vrscene file itself for upload. This can be done by zipping together the vrscene file along with the necessary textures, into a ZIP file. The extension of this ZIP file will then need to be changed to .vrscenezip. The ThreeKit platform will automatically recognize this as a vrscene import that contains multiple files. *Example vrscenezip file:*
This approach is only necessary in the scenario where the user does not desired to upload these textures separately to ThreeKit, and link them to TK\_xxx attributes on the uploaded vrscenes. In this case listed above, if these textures are instead uploaded to ThreeKit separately, then there is no need for the vrscenezip file. Dragging and dropping the .vrscene file will be sufficient. ## Packaging Multiple Files There may be instances where you may wish to have multiple vrscenes imported together into one single asset, instead of separate assets. At this time, the only reason for this would be to minimize the number separate assets on the platform. In order to do this, all the necessary vrscenes would need to be packaged together into a single ZIP file, with the extension set to .vrscene zip. *Here is an example of such a zip file:*
Uploading this vrscenezip file to ThreeKit will create a single asset with the name SceneBundle. Inside that asset you will find the two separate vrscene nodes, as shown here:
## Vray Framebuffer Settings Last, but not least, the Vray Framebuffer color correction settings can also be exported by Vray, and imported to ThreeKit. This needs to be done by choosing to save these corrections directly from the Vray Framebuffer as a single file. The Vray 4 framebuffer will export these as a .vccglb file, while the Vray 5 and 6 framebuffer will export these as a .vfbl file. The ThreeKit platform currently supports only the Vray4 .vccglb files, which can be applied to any Vray renders. This screenshot shows all the corrections supported by ThreeKit through these .vccglb files. To save the vccglb file you have to click on the “Globals” button in the Vray4 Framebuffer UI.
ThreeKit will correctly render the **Exposure, White Balance, Hue/Saturation, Color Balance, Levels, Curve, and Background Image** settings. The others shown there - LUT, OCIO, and ICC profiles are not currently supported by ThreeKit. In order for the Background Image feature to export correctly, the path in the image slot needs to include only the image filename, without any local path. While the local path is required for local renders on the user’s machine, they will interfere with the functioning of the ThreeKit platform. When the user is ready to export the vccglb file, simply edit the path out from the text box, leaving only the file name. The image will also need to be included together with the .vccglb file. This can be done by zipping together the two files into a ZIP file, and then renaming the extension from .zip to .vccglbzip. # 4. VRay Scenes ## Overview The import process is probably the simplest and most straightforward step in the workflow. It is essentially very similar to the import process for any other type of assets. There are, however, a few things to keep in mind about re-uploading/updating these assets, to ensure a trouble-free experience. When dragging and dropping the vrscene/vrscenezip files onto the Asset Library on ThreeKit, the user will be presented with the import dialog box. Here, the user can choose what the originating 3D tool was, along with a choice between importing the asset as a Scene, Model, or Material extraction, as shown in the screenshot below: ![](/files/32URXiUdq9b1RbMUeJLe) ## Importing Scene Assets The option to import the vrscene assets as Scenes will automatically create a scene asset for each vrscene or vrscenezip added. In the case where the user uploads a vrscenezip that contains multiple vrscene files, it will create a single Scene asset, with multiple vrscene nodes inside that asset, for each vrscene file included in the zip. The import process will extract the mesh, material, textures, and render settings data into a vrscene node inside the scene asset, while the camera information will be extracted separately into a ThreeKit camera node. Here is an example of the basic output contents of a scene generated through this import process:
On the left side, in the **Nodes** section, you will find the following hierarchy of nodes created automatically by the import process:
NODEDESCRIPTION
Vray Axis System



This is a transform node that accounts for the differences between the transforms of assets in the different 3D applications.
It is required to ensure the Vray components will render in the correct spot with the correct orientation and scale.
ExampleScene










This is the vrscene node that contains all the information about the objects, materials, and lights in the uploaded vrscene.

If it contains lights, then it will also showcase an operator for setting up the light-linking.

If custom nodes were detected with the TK_ prefix in their name, they will also be displayed on this node for configuration.

Under this node you will find the various models and lights that were detected in the vrscene file.
ExampleScene Camera



This camera contains the same transform and focal length as the render camera in the vrscene, along with the Vray Physical Camera properties if those exist. As shown on the Properties panel of the scene node, this camera is also automatically set as the active camera for this scene asset.
For Models






This node contains a scale that will get applied to any children added under this node. It is meant to be used with referenced assets from the Asset Library. Any other models that were imported either through a vrscene Model upload, or FBX uploads can be drag-and-dropped here. This will ensure that they will render at the correct scale with the other vrscene components under the Vray Axis System listed above.
Model






This is a reference node, meant to be assigned a model asset through configuration. This is why the import process also adds a model asset attribute in the Logic section of the scene, titled Asset, along with a rule that sets the model of the node Model to the incoming value on the attribute Asset.


This setup makes this scene essentially ready to be used with a Stage as is, without the need to set up any additional logic.

This does not mean, however, that this setup is set in stone. It is to be considered simply as a starting point. The user can add any number of other model assets to the scene after the import. What is important though, is that in order to keep the transform and scale matching correctly, all additional assets need to be added to the scene under the transform node **For Models**. If added outside of that transform node, they will appear at the wrong scale. ## Recommended Workflow This whole setup makes getting started with a vrscene import easier in many cases. It does, however, come with a downside. When the vrscene needs to be re-imported, due to updates made to the lights or background models, the import process will recreate the whole scene graph, removing any other changes or assets that were added by the user previously. For example, if the user added to this scene some additional Nulls or model assets, those nodes will disappear after a re-import of this vrscene. For this reason, the lights and background scene models may be better imported as separate model assets, instead of importing them altogether as a scene. They can then be added to the scene asset as model references under the node **For Models**. This way, the only reason to ever update the main scene asset with a re-import is if the user wishes to import a new camera or additional cameras, without manually creating them on ThreeKit. ## Working With Cameras If the user has modified the contents of the scene, it would be easier to simply add or modify the existing cameras directly on ThreeKit, rather than importing them again through a vrscene that would overwrite the current setup. Modifying the existing camera transform may prove difficult in some cases, due to significant differences in the transform numbers between ThreeKit and the 3D application. In that scenario, importing the new camera through a separate vrscene would be easier. From there, the user can have two tabs open at the same time, and then copy/paste the transforms from one camera to the other. When working with cameras on ThreeKit, please note that the default behavior will always maintain an upright camera position. This means that the user can’t modify the Z rotation on the camera with the desired effect, without also enabling the “**Allow Roll**” checkbox under the camera’s Constraints, as shown here:
For situations where a Vray Physical Camera may be necessary, the ThreeKit platform provides access to those properties through the **Vray Physical Properties** operator on the camera itself. This operator will get added automatically on import, if these properties are detected inside the vrscene. The user can also add the operator after the import. The properties available under this operator have a direct match with what you would normally find inside the 3D application as well. ## Configurable Custom Properties Any nodes from the vrscene that were named with the TK\_ prefix will be exposed for configuration directly on the parent vrscene node: ![](/files/9Lz7wfVBlDFtXbl50hOx) ## Vray Post Effects In order to apply a VFB preset to a render, the VFB asset will need to be added to the Vray Post Effects slot of the scene used for the render. This is the only location where the VFB asset can be used: The Vray Post Effects subsection under the Scene Properties panel currently represents the only supported Post Effects that apply to Vray renders. The other Post Effects available in the Properties panel only apply to the Webgl 3D player. This slot can also be configured in the Logic panel through the use of the Set Property action inside a rule. This allows the user to swap the VFB preset based on various conditions. ## Dual Use - Vray & WebGl In cases where the product requires to have both a Webgl and a Vray version, the use of a **Scene Proxy** asset would be required. The Scene Proxy asset provides a slot for Vray Scenes, and a slot for Webgl scenes. The appropriate slots would be used depending on whether this Scene Proxy asset gets requested during a Virtual Photographer Render job request, or whether it is requested by the 3D Webgl player. # 5. VRay Models ## Overview The option to import the vrscene assets as Models will automatically create a Model asset for each vrscene or vrscenezip added. In the case where the user uploads a vrscenezip that contains multiple vrscene files, it will create a single Model asset, with multiple vrscene nodes inside that asset, for each vrscene file included in the zip. The structure of the imported Model is very similar to that of Scenes. There will still be a **Vray Axis System** node present, with the vrscene nodes parented to it. It is important to leave this structure intact, without modifying it. This parent node ensures that the Model asset will get referenced into other assets or scenes at the correct scale, with the correct orientation. Here is an example of what the Model asset may look like on import:
Similar to the imported Scenes, any Meshes present in the vrscene will be shown only as bounding boxes, while the supported lights will show up with their appropriate gizmo. ## Nesting Models The user may nest in here other models from the Asset Library, but doing so will introduce the same risks we found with the scene assets. Once the vrscene for this Model gets re-uploaded, the import process will automatically reset the scene graph, and remove any extra nodes. If such nesting is required, it would be better achieved with a third blank Model asset, that would hold all the references together.
# 6. VRay Materials ## Workflow The option to import the vrscene assets as Materials will automatically create a material asset for each Vray material at the top of a hierarchy inside vrscene added. You may have multiple material nodes feed into other material nodes, such as Vray Materials being fed into a Vray Blend material. The top material will be the one that will get extracted as an asset on the platform, and in this case it would be the Blend Material. Here is an example of a Vray material in ThreeKit:
Here we can see the use of the TK\_ prefix in the node names, to denote the fact that these nodes will be exposed for configuration on ThreeKit. This is how this material will import on ThreeKit:
First of all, the name of this material asset is extracted from the name of the material inside the vrscene file. This means that the name of your vrscene file does not actually matter at all when importing the materials. The **Viewport Color** and **Viewport Map** properties will be present on all imported Vray materials, and their effect only applies to the Webgl preview of this material. When rendering this material with Vray, these two properties will have no effect. When configuring some of the custom TK\_ properties on the material, it may be helpful sometimes to also set the Viewport Map and Color of the material in order to confirm that the configuration works correctly, prior to doing render tests. In the example above we are showcasing three different types of nodes that can be exposed for configuration: TK\_Multiplier is a VrayUserScalar/Integer node\ TK\_BaseMap is a texture/bitmap node\ TK\_Tint is a VrayUserColor node Only these types of nodes are supported for configuration when named with the TK\_ prefix inside the 3D application. Naming other types of nodes this way will not expose them on ThreeKit. ## Parameters While the VrayUserScalar and the VrayUserColor are pretty self explanatory, in terms of how they can be used on ThreeKit, the texture nodes come with some additional settings.
Map Asset










This slot allows the user to assign a texture asset from the ThreeKit Asset Library. All texture assets are allowed here, and Vray will render this texture as it was uploaded. The platform does not currently apply any of the modifications applied to that texture asset, such as brightness and gain adjustments.

When no Map Asset is specified for a texture node, ThreeKit will automatically use the texture files included in the vrscenezip (if any files were included for that node). If no file was included in the uploaded vrscene for this material, then it will render with the equivalent of a null texture for that slot.
UV Settings







This setting allows the user to specify which UV tiling settings should be applied to the texture asset.

Map Asset - This option will use the tiling settings specified on ThreeKit inside the texture asset.

Source Material - This option will use the tiling settings specified on this texture node inside the vrscene file.
UV Channel


This allows the user to choose which UV channel this texture node will apply to. When the user first imports this material to the platform, the UV channel will be automatically populated with the UV channel detected inside the vrscene file for this particular node.
## Logic All of the custom properties named with TK\_ can be set through configuration logic using the **Set Property** action in the rules. ![](/files/sVWkt1EKJBghA4zu5Iys) This is necessary for building Template Materials, and will be the typical use of logic inside Vray Materials, or any materials for that matter. # 7. Vray VFB Presets The Vray VFB Presets allow users to add post-processing effects to the Vray renders, primarily in terms of color corrections. These post processing effects are specifically the ones supported by the Vray Framebuffer, as listed here: ## Exceptions - Vray 4 We currently do not support the following Vray4 VFB Layers: Lens Effects, OCIO, LUT, ICC ## Import The user may import a Vray VFB (Vray FrameBuffer) Preset file (vccglb or vccglbzip for Vray4, and .vfbl or .vfblzip for Vray5) by using the drag-and-drop method on the Asset Library. This will automatically create a VFB asset on ThreeKit. Here is how to save out the vccglb file from the Vray4 Framebuffer:
Here is how to save out the vfbl file from the Vray5 Framebuffer:
This asset may then be used directly in the Vray Post Effects slot of a scene:
## Properties The contents of this VFB preset will look like this:
There is effectively just one single option - **Remove Alpha from output**. When this option is checked **OFF**, the alpha channel from the Vray render will be retained as is. This is the default setting. When this option is checked **ON**, the alpha channel from the Vray render will be replaced with a full white alpha channel, essentially removing any transparency altogether. The main scenario where this setting is likely to be set to ON is when the VFB preset includes a Background image. If the alpha channel of the rendered image retains the transparency, then the Background image used in the VFB file will get cut out. Checking this option to ON will ensure that the Background image will always show in the output render on the 2D player. # 8. Vray Operators ## Overview The ThreeKit platform offers a choice of four main operators that are specific to Vray usage: * Template Override * Vray Rounded Edges * Vray Subdiv/Displacement * Vray Material Wrapper These operators are available to apply in multiple locations, each location acting as an override to its children. The Vray parent/child hierarchy on the ThreeKit platform is as follows: 1. Composite Asset - parent of Models 2. Mesh Nodes - parent of Materials 3. Materials - base level This means that if the user adds a Vray Rounded Edges operator on a material, which in turn is also assigned to a mesh that also has the Vray Rounded Edges operator on it, then the only instance of that operator that will take effect is the one on the mesh. The Vray Rounded Edges operator on the material applied to that mesh will be ignored. In turn, if the mesh is added to an Override group inside a Composite Asset layer, and that Override Group also has the Vray Rounded Edges operator applied to it, then that will override the settings on the mesh. ## Template Override The Template Override operator is the only one in this list that can’t be applied to the Composite Asset override Groups. It also makes no sense to apply it to a material, even though it currently shows up in the list of Operators there. This operator is designed to allow the user to override custom TK\_ material attributes, at the mesh level. For example, if a template Fabric material is to be assigned to multiple meshes, each mesh may require its own specific normal map. For this purpose, every mesh would need to have the Template Override operator assigned to it, with a Map-type attribute that has the same name as the TK\_ property on the material that needs to be overridden. Let’s say the material has a property called TK\_NormalMap. Then, each mesh would have a Template Override operator that looks as follows:
The only difference from one mesh to another would be the Map Asset. UDIM texture setups are another example of how this operator can be used. Although ThreeKit does not currently support UDIM texture setups in configuration, the Template Override can offer an alternative. It does require that the mesh is first separated into the different components that require individual textures. Once the individual mesh components are imported to the platform, the Template Override operator can be assigned to each mesh, with the TK\_ attribute set to the individual texture that is supposed to match that mesh. ## Vray Rounded Edges This operator can be used very similarly to the way it would be used inside Maya or 3dsmax. It is available through the Material Operators on either a Vray Material, a mesh node, or a Composite Asset Override Group inside a Layer. For additional information about this feature, please read the Vray documentation for [Maya](https://docs.chaos.com/display/VMAYA/Round+Edges) and [3dsmax](https://docs.chaos.com/display/VMAX/VRayEdgesTex#VRayEdgesTex-Roundedcorners). ## Vray SubDiv/Displacement This operator can be used very similarly to the way it would be used inside Maya or 3dsmax. It is available through the Material Operators on either a Vray Material, a mesh node, or a Composite Asset Override Group inside a Layer. On ThreeKit, this operator combines a few separate features that Vray provides internally. It is a combination of Subdivision and Subdivision Control, as well as Displacement Map Control. Since these features are interdependent and not mutually exclusive, they can be accessed through this one single operator. This means that if the user needs to only add Subdivision control to their mesh/material/override, then all they need to do is to add this operator as is, without assigning a displacement map. The lack of a displacement map asset will simply apply only the Subdivision effect. One feature to note is that the user can only assign texture assets to the Displacement Map. ThreeKit does not currently support the assignment of Vray material assets, or any other kind of shader network from a vrscene. The map used for Displacement will also be always assigned using the RAW/Linear color profile. For additional information about this feature please read the Vray documentation for [Maya](https://docs.chaos.com/display/VMAYA/Displacement+Control) and [3dsmax](https://docs.chaos.com/display/VMAX/VRayDisplacementMod). ## Vray Material Wrapper Similar to the previous two operators, this one can also be used either on Mesh nodes, Vray Materials, or the Override Groups inside the Composite Asset layers. It is a combination of the Vray Material Wrapper along with Vray properties found on meshes. There are many ways in which this can be used, but here are several typical uses for it: * **Primary Visibility** - Prevent a mesh from being rendered in the color channel, but still appearing in the reflections, refractions, shadows, and GI of other objects. * **Matte masking** - use a mesh to mask out parts of the render. * **Matte + Shadow capture** - use a mesh to capture only the shadows of another object. The most often place where this operator will be most useful is on the Override Groups inside a Composite Asset Layer. In that case, it is usually when shadows need to be captured, or a separation of components by layer. The Matte masking feature is key to enable this separation of components by layer. For more information on this operator, please see the [Vray Documentation](https://docs.chaos.com/display/CWVRAY3MAYA/V-Ray+Wrapper+Material). # 9. Vray Light Linking The ThreeKit platform supports light linking for Vray lights only. Upon importing a vrscene as a Model or Scene, the vrscene node will automatically receive a VrsceneLights operator if there are lights detected inside that vrscene. *This is what it may look like:*
The names of the lights will match the names stored inside the vrscene. Each light will have two options for the light linking Mode: * **Exclude** - will allow this light to exclude all nodes specified here * **Include** - will allow this light to only include the nodes specified here In order to specify Nodes that need to be included or excluded, there are two options: * **Nodes** - this is a direct reference to nodes found within the current asset. * **Node Tags** - the user can enter any number of Node Tags, by using the # symbol in front of the node tag name - ie: **#Metal**. The tags need to be entered one at a time, by pressing Enter after each entry. When Node Tags are used in this operator, they will also act recursively through all the nested assets referenced inside this current asset, as well as in the parent of this asset. The evaluation of the Node Tags will take place after everything in a scene has been fully loaded. For example, let’s say we have a Vray asset called Lights, where we set the light linking using the tag #Metal for one of the lights. Then, this asset Lights gets referenced in a separate scene called MainScene. Inside that scene there are other models being referenced, and some of them may contain mesh nodes tagged with the Node Tag #Metal. When the MainScene asset gets rendered, the Lights will affect all the nodes tagged with #Metal that ended up at the scene level. # 10. Vray Compositing ## Overview The configuration workflow for a project that requires Vray renders is very similar to the workflow used by the Webgl setup. The main difference lies in the use of the Template Override operator instead of the Map Override, and the additional configuration that is typically done in the Composite Asset. The Composite Asset can be used with either Webgl renders or Vray renders. This asset is critical in controlling the amount of renders that need to be produced.
## The Goal Layering is the main method for reducing the total render count. For example, let’s say we have a chair that is configurable in three ways: * Fabrics for the cushion - 500 fabrics * Wood type for the frame and legs - 10 different woods * Background setting - 3 different backgrounds Without any layering we would need to render a total of 15000 renders for just this one chair. This can be reduced to a total of just 513 renders if we layer the background image, the wood frame, and the fabric components on their own separate layers. In addition to this reduced count, the end client would also be able to load configuration changes faster, since the wood frame and fabric renders may be a smaller part of the overall image, and would result in significantly smaller file sizes. ## Layers The comp asset is composed primarily of layers. Each individual layer represents an image sequence. The order of the layers is also important, as it determines how these image sequences get layered on top of each other. Here is what the composite asset may look like for the example listed above:
### Features #### Order The order of each layer determines how the resulting images get layered in the 2D player.\ The layer ordering is from top to bottom representing background to foreground. In the example above, the **Backdrop Layer** will be displayed first, then the product **Shadow Layer**, with the **Legs Layer** on top of that, and the **Fabric Layer** displayed on top of the Legs Layer. #### Layer Type There are currently three types of layers available: render layers, image layers and solid color layers * **Render Layers** - This type of layer will use the Vray or Webgl render engine to pre-generate the image sequence with system jobs. * **Image Layers** - An image layer has a Texture target and this allows the user to reference texture assets directly. For example, the user has a photograph that should be used as the background image of a configuration. This layer will take into consideration the alpha channel of the texture asset. * **Solid Color Layers** - Allows the addition of a slid color to the composite asset, which can be blended and masked with the other layers. This opens up the ability to add custom color tinting to the renders presented by the 2D player. #### Attribute Targets Each render layer can be associated with a set of attributes. Image layers do not have this association. An association with an attribute means that a new image will be generated for this layer for every possible value of that attribute. In our scenario, if the **Legs Layer** would be associated only with the **Legs** attribute, then it would generate a total of 11 renders (the 11th is for the case where no value is selected). For every additional attribute that layer is associated with, the number of possible combinations would grow exponentially, as it would need to create unique renders for each combination of attribute values. #### AOV Operators The render layers can be assigned an additional AOV (render pass). The ThreeKit platform currently supports an Ambient Occlusion, Normals and Bump Normals pass.\ \ The AOV pass is available to be added through the Operators button, as the **Vray AOV Properties** operator. The resulting render task will generate a separate image for each pass. {% hint style="warning" %} **Important!** This additional set of images is not currently usable by the composite asset. These images are only available for download, using the Download button available on a render job in the Renders Section. {% endhint %} #### Override Groups Each render layer can also have a practically unlimited number of Override Groups associated with them. These override groups allow the user to specify which items should appear on that layer, and how they should appear. This system is similar to the Collections feature in Maya’s Render Layers. #### Layer Visibility Use the "Render Layer" checkbox to toggle the visibility of a layer in the 2D player. This does not affect the rendering process of render layers. #### Layer Opacity This layer option controls the alpha channel value of the given layer. Very useful to control shadow layer opacity without the need to bake the opacity in the render itself. #### Blending Mode Each layer can have its own blending mode for compositing on top of the previous layers. The list of blending modes currently includes the following operations:
#### Masking The **Mask with Layer** option on Layers allows us to mask a layer with another layer. You are given the option to choose between Alpha and Luminance based masking.\ \ This feature is useful in certain scenarios where isolating a particular object or shape on its own render is impossible without the use of a separate mask. ## Override Groups The Override Groups, as mentioned above, allow the user to specify which objects will be used to render that particular layer. Similarly to the Collection feature in Maya’s Render Layers, the user can specify any number of these Groups, and assign overrides to them. In order to specify which objects should be included in these groups, the users can reference them by **Node Tags**, in the group’s Targets. For example, on the **Legs Layer** we would like to render only the wood components of the chair. However, on the legs mesh we need to ensure that we see shadows and GI cast by the Fabric and Floor components. If the legs go through the floor a little bit, we also need to mask that portion out. For this purpose the Legs Layer has three Override Groups listed under it:
Legs

This group targets all of the objects that should render as normal, with no overrides applied to them. This would be the objects tagged with the tag LEGS, and those tagged LIGHTS
Floor Masking

























This group includes the meshes rendered below the Legs layer. In our case it is everything tagged with the tag FLOOR.
However, in order to mask these meshes out of the Legs, we need to apply a Material Wrapper override to this group with the following settings:
Fabric






























The purpose of this override group is to display the shadows and GI cast by the fabric components on the Leg components. For this purpose, we would target only the objects tagged FABRIC.

The override on this group would also be a Vray Material Wrapper, with the default options, and only the Primary Visibility option set to OFF.
### Capturing Shadows In order to capture shadows, such as on the Shadow Layer listed above, we would need to use the Material Wrapper override on a set of meshes that needs to receive the shadow. In our case it would be the meshes tagged with the FLOOR tag. The override would look like this:
## Assigning Composite Assets to Items In order for the composite asset to take effect, it has to be assigned to Catalog item. In our case above with the Chair, this composite asset could be assigned to the Chair catalog item using the **Default Composite** reference as seen below:
The Composite Asset can be referenced this way by any number of different product items. It will work correctly as long as they pass the same attributes. There could be, for instance, other chair products, or any other furniture products that share the same attributes Fabric, Wood, and Background, and they would all need to be rendered in the same manner, with the three separate layers. A central Composite Asset linked to all of them would make the maintenance of the compositing much simpler. There are also cases where the user needs to ensure that the node-tags entered inside the Override Groups are working correctly with a given Catalog Item. For this purpose, the user can choose to load any Catalog Item directly inside the Composite Asset as shown here:
Once a Catalog Item has been loaded this way, clicking on the individual Layers will preview the objects loaded in all the Override Groups inside that Layer. The Viewport will update the changes only when selecting a different Layer than the currently selected one. ## Layer Logic There will be instances where it becomes necessary to apply different changes in the render setup, based on which layer is currently being rendered. As a simple example, let’s say that we would like to use a different VFB file for the Fabric Layer, as opposed to the Wood Layer. The logic for this cannot exist on the Composite Asset, since there is no direct connection between this and the Scene Asset where the VFB is specified. The Composite asset is only a child of the catalog item, and it receives the 3D assets for rendering. Instead, the logic would currently have to exist on the 3D assets.\ \ We can use the **Layer** condition in our rules, to detect which layer is currently being rendered. This allows us to change properties or swap assets per layer.\ In the example below, we create the Layer condition, and check against the Fabric Layer of our chosen Composite Asset. In this case, we are applying a different set of Vray Post Process corrections for the Fabric layer.
## Additional Info {% hint style="info" %} For more information please visit the [Composites](/platform-documentation/project-data/assets/composites) page in the platform documentation section. {% endhint %} # 11. Vray Render Workflow Coming soon. # 12. Vray Troubleshooting Coming Soon # Template Assets This guide will walk you through the setup of template model and material assets, which enables you to automate configuration setups that require hundreds or thousands of assets. ## Introduction Some projects may require working with hundreds or even thousands of assets. Setting up configuration manually on each of these assets would be very time consuming, and prone to user error. The use of a template asset would enable us to concentrate the logic setup in one single asset, and apply it automatically to all of the uploaded assets. This means that we would get the following benefits: 1. No need to add any logic inside uploaded 3D models to assign materials or swap components 2. No need to add node-tags to specific nodes on uploaded model assets - could use Node-queries with a given naming convention instead 3. No need to create unique materials for every material option 4. Changing the properties of a family of materials (Cotton, Leather, etc.) is easier with a single template asset 5. No need to add tiling information to every uploaded texture - the tiling could exist on the template material in a Tiling Override Operator

Basic Setup without Templates

Scalable Setup With Templates

{% hint style="info" %} Template Setups are highly dependent on a strong and consistent naming convention for filenames and node names. Names that separate elements with underscores will make it easier to automaticaly parse and identify the assets and nodes. {% endhint %} ## Template Materials A Template material is a configurable material that can change some of its properties based on the catalog item that references it. These template materials are very useful for describing either entire material families, or every single material choice. For example, you could have a template cotton material that has unique properties for roughness, specularity, and bump map, while the base map is swapped for every color or pattern choice within that family. Another material family, like Leather, would have its own separate material template.

Material Family Template

In the case of a general material template, you would be swapping all the customizable properties with textures. This is the more typical scenario for scanned materials, which result in unique textures for all the major properties of the material. If tweaks are necessary, the adjustments are baked into the textures directly with a tool like Photoshop.

General Material Template

### Basic Setup With the basic setup we are able to make use of template materials without the need for asset queries using metadata. This setup is suitable for small sets of material choices, as there is some manual work involved. It is also the most performant setup, as asset queries incur a small delay while the search is being processed. In this setup we work with an intermediary [proxy material](/platform-documentation/project-data/assets/materials/proxy-materials) that helps store the unique properties for each material choice:

Basic Material Template Setup with Proxy Materials

In this example, we have a configurable template material where only the Base Color and Base Map properties change based on material choice. The **BaseColor** attribute is of type **color**, and the **DiffuseMap** attribute is of type **asset-texture**. We make use of the Proxy Material asset in order to store the unique values for the **BaseColor** and **DiffuseMap** attributes specifically for the Cotton Red material. This is essentially the equivalent of a Material Instance inside Unreal Engine.

Catalog Item

Material Proxy With Unique Attribute Values

Proxy Material Referencing the Cotton Template

Cotton Template Logic

The Proxy Material can then be duplicated for additional Cotton options, and the only thing that needs to be adjusted are the default values for the configurable attributes **BaseColor** and **DiffuseMap**. Unfortunately, this makes the process partially manual, but it still allows us to keep the material properties all located on a single material asset - **Cotton\_Template\_MAT**.\ Automation with a custom web application can eliminate the manual aspect almost entirely. ### Advanced Setup For a more scalable approach, we need to automate the loading of textures in the material without the need for the intermediary Proxy Material asset. This will require us to rely on metadata field matching between the textures and the corresponding catalog items:

Advanced Material Template Setup

This setup will require that we have metadata fields on both the catalog items and on the texture assets, to identify the two and match them together, and the use of [metadata and asset queries](/platform-documentation/project-data/logic/queries) inside the logic. In the example above we are working with two metadata fields **Name** and **Family**, while the textures may have an additional field called Type which would help us differentiate between different types of textures required by that material (diffuse, roughness, bump, etc.). We would also need to rely on some local attributes inside the Cotton Template material to hold the results of the queries before we can use them. This is what the logic setup would look like:

Catalog Item

Texture Asset

Material Template Logic

Please note that in the rule titled "Find and Assign the Texture Maps" we are performing the query for the texture and assigning it to the Base Map property of the material with a single Set Property Action. ### Color Property Automation In some scenarios it may be needed to include color attributes as well to these template materials, in addition to the asset-texture attributes. This could be for a color tint that gets multiplied with a texture asset inside the template material.\ If you would like to add automation for these color attribute as well, then you have two basic options available: #### Attribute Propagation You could create a color attribute on both the Template Material as well as on every catalog item representing the material choices - let's call it BaseTint. The value of it could be set individually on every catalog item, and it would propagate that value to the template material. The downside of this approach is that practically speaking you would want to avoid doing this manually. The attributes on the catalog items with their values would typically need to be generated automatically from spreadsheet data. #### Data Table Entries This alternative might be the more practical one, as you can store the hex codes for these color entries inside a spreadsheet, and upload that spreadsheet to ThreeKit as a Data Table. You can then make use of datatable queries to read the hex code into a string attribute inside the material template, and convert it to a color attribute using a custom code snippet. [See this example recipe](https://developer.threekit.com/recipes/convert-hex-string-to-color-attribute). ## Template Models The goal of a 3D model setup is to allow us to upload 3D models for either products or components, and have them automatically pulled in by the configurator without the need for manual setup in terms of material assignments or component switching. For this setup we will take the [Advanced Material Template](#advanced-setup) setup listed above, and enhance it with some additional logic to automate material or component assignments.

Template Model Workflow Example

### STEP 1 We start by following the procedure described in the Advanced Material Templates example listed above, by querying the metadata field **itemCode** on the parent Item. This will enable us to find the appropriate model to load in Step 2. ### STEP 2 The **Product\_Template** asset in this example contains a [**Model Reference node**](/platform-documentation/project-data/assets/nodes/helpers/model-references). This node is meant to receive the model queried by the **Asset Query** logic. This can be done in a single step using the **Set Model** action. ### STEP 3 Using[ Node Queries](/platform-documentation/project-data/logic/queries/node-queries) we can find the nodes that start with Fabric\_ in their name from the asset loaded in the Model node. We can then assign the material stored by the Fabric attribute to the result of this query.

Item Setup

STEP 1 - Query Metadata

STEP 2 - Query and Assign Model

STEP 3 - Query Nodes and Assign Materials

## Metadata Management As seen above, both the material and model templates can leverage metadata to automatically load assets into the template. Metadata management would thus be necessary at scale on assets without the need to generate it manually, which is both time-consuming and error prone. The metadata on Catalog Items would ideally be generated during the data import process, when using spreadsheets to generate the catalog items. Currently this can only be achieved through a custom web application that uses the [ThreeKIt Rest APIs](https://developer.threekit.com/reference/available-apis) to manipulate the catalog. For 3D assets, the metadata can be automatically generated based on the asset file names. This requires that file names follow a strict naming convention, as shown in the examples above, where fields are typically separated by underscores. Once the assets are imported into the project's org on ThreeKit, you can make use of a custom web app to assign the metadata automatically based on the asset names. The [Apply Metadata Pattern](/tools/general-apps/apply-metadata-pattern) custom app can be added to your projects for this purpose. # Camera Transition Animation A guide for adding animated camera transitions to your configuration setup

Camera Animation Example

## Overview This guide will walk you through the steps involved in adding smooth camera transitions between camera positions. The Threekit platform does not currently offer an animation toolset through the UI to achieve this effect. Instead, the approach we need to take is to leverage the power of the Player API to build our own camera animation setup. This guide provides you with a ready-to-use script that can be added to your scene asset, and a set of instructions for how to control the animation. ## Configuration Setup

Step by Step Setup

{% stepper %} {% step %} ### Camera Attribute Setup The script expects a camera name attribute of type String, on the scene asset where the script is added. This attribute should store the name of the target camera where you want to animate. If your camera angle attribute is of type Asset/Part Reference, storing Items as options, then you will need to create a separate string attribute that stores the name of the camera nodes from the scene. These string names could be stored as metadata on the items representing each camera option. You would then have to create an additional rule to read that metadata from the camera item and set its value to the camera string attribute. You will then need to set the constant named `cameraAttributeName` in the script to hold the name of your string camera name attribute, as shown below. Ensure that your scene contains a set of cameras corresponding to each of the options on this string attribute, and that their names correspond with the string values. For example, for a `CamAngle` attribute with options of `"Main"`, `"Front"`, and `"Back"` you will need to create a set of three cameras in the scene named `"Main"`, `"Front"`, and `"Back"`. {% endstep %} {% step %} ### Camera Setup The camera settings are important, as the script is currently designed to animate only between position and rotations of the cameras. Other parameters like lens focal length, control mode, or constraints won't get considered. {% hint style="info" %} **The player camera will be set to the same settings as the scene camera corresponding to the default camera option.** \ Ensure that all your cameras are essentially the same as far as focal length, control mode and constraints as the default starting camera, so that there is no confusion. {% endhint %} {% endstep %} {% step %} ### Camera Orbit Target Node Another important element in the animation is the focal point of the camera. When transitioning from one camera angle to another we generally want to ensure that we keep the camera facing at the product. This can be done with the aid of a Null node in the scene, which we can use as our orbit target. Position the Null node where you want the camera to focus during the transition, and then edit the script to provide the name of the null node to the `orbitTargetNodeName` constant listed at the top of the script. {% endstep %} {% step %} ### Animation Time Attribute The third important element in the animation is the duration. This determines how fast the transition takes place from one camera angle to another. The script provides control for this through the use of an attribute on the asset where you have the script added. It expects that you create a number attribute with the name `CamAnimationTime`, and that you give it a value that represents the number of seconds. This can be a floating point value as well, such as 1.25, which would represent a duration of one and a quarter seconds (a total of 1250 milliseconds). If you wish to use a different name for your attribute, then you can edit the script at the top, to set your own custom attribute name on the `cameraAnimationTime` constant. {% endstep %} {% step %} ### Debugging For issues with the above steps, and other animation issues, the script offers the option to display helpful messages in the browser console, that may help you debug the issues. By default the script below has set the debug feature to OFF. To enable it, change the `logDebug` constant to `true` at the top of the script. {% hint style="warning" %} Please remember to switch the debug feature back to `false` once you have finished the debugging, as the console messages do impact the browser performance a little bit. {% endhint %} {% endstep %} {% step %} ### Player Camera You can leave the scene player camera empty, as the script will automatically make a copy at runtime of the camera corresponding to the default value for your `cameraAttributeName`attribute, and set it as the active camera upon player initialization. {% endstep %} {% endstepper %} ## Script Setup Once the required steps listed above have been completed, the script below will need to be added to the scene asset. The script needs to be copied and pasted in a **custom code** action, inside a rule on your scene asset. Once you have pasted it, and every time you make a change, you need to save the changes using the little Disk icon below the script window, in addition to saving the changes to your asset. ```javascript /** * Script for Dynamic Camera Animation in Threekit * * Description: * This script dynamically finds the camera with the same name as the value passed to the attribute specified by cameraAttributeName * It then animates the player camera in a smooth transition from the current position to the selected camera's location and rotation. * * Key Features: * - Reads the camera name from the "cameraAttributeName" attribute in the configurator, * matching it with the scene node name for accurate selection. * - Clones the default camera node and sets it as the active player camera. * - Reads the target node name from the "orbitTargetNodeName" to use as the target for the camera to look at during the animation * - Supports smooth cubic easing animation for camera transitions. * - Reads "cameraAnimationTime" attribute for dynamic control of the animation duration time. * - If the camera orbit target node is not found, the camera will animate to the origin (0, 0, 0) instead. * - The animation will maintain the source and target cameras' offset and distance from the orbit target node. * - Use the "logDebug" variable to log debug information to the console if problems arise. * - Since the script will get executed on every configurator change, it will only animate the camera if the camera attribute has changed. * - The script will also animate the orbit node rotation if the camera control mode is set to Node/Turntable. * * Changelog * - 2025-12-05 by aserghiuta@threekit.com * Added work-around for the setActiveCamera() function not applying the cloned camera's transform on initial load after the player unload() function was used previously. * This is a known issue with the setActiveCamera() function, and it happens when the player is unloaded and then reloaded. * This can happen if you are using the player unload() function to switch between the 2D and 3D modes. * - 2025-11-20 by dsturk@threekit.com * Added work-around for zoom constraints * - added handleZoomConstraints() */ const cameraAttributeName = "CamAngle"; //rename with your string attribute name that represents the camera name to animate to. const cameraAnimationTime = "CamAnimationTime"; //rename with your number attribute name that represents the time in seconds for the animation to complete. const orbitTargetNodeName = "CamTarget"; //rename with your string attribute name that represents the target node name to look at during the animation const logDebug = false; //set to true to log debug information to the console let { Vector3, Quaternion, Euler } = api.THREE; const rotateOrder = "ZYX"; // Function to find a camera node hierarchically async function findNode(cameraName, nodeType) { const node = api.scene.findNode({ from: api.enableApi("player").stageId, hierarchical: true, type: nodeType, name: cameraName, }); return node; } // Function to clone a node, which will be used to duplicate the default camera node, and set it as the active camera function cloneNode({ sourceId, newName }) { const node = api.scene.get({ from: api.enableApi("player").stageId, id: sourceId, }); const { id: _id, children: _children, ...props } = node; const newNodeId = api.scene.addNode( { ...props, name: newName, plugs: Object.fromEntries( Object.entries(node.plugs).map(([k, v]) => [ k, v.map((op) => { const { id: _id, ...props } = op; return props; }), ]) ), }, api.instanceId ); return api.scene.get({ id: newNodeId }); } // Function to set the initial player to the default value of the camera attribute async function setInitialCamera() { const config = api.configurator.getConfiguration(); const selectedCamera = config[cameraAttributeName]; const cameraNode = await findNode(selectedCamera, "Camera"); if (!cameraNode) { console.error(`Initial Camera "${selectedCamera}" not found.`); return; } const clonedCameraNode = await cloneNode({ sourceId: cameraNode, newName: "Initial Camera", }); api.scene.set( [clonedCameraNode.id, "plugs", "Camera", 0, "constraintZoomMode"], 0 ); // disable built-in zoom const initialActiveCameraPosition = api.camera.getPosition(); if (logDebug) { console.log("Cloned Camera Node Position:", clonedCameraNode.plugs.Transform[0]?.translation); console.log("Initial Active Camera Position:", api.camera.getPosition()); } await api.setActiveCamera(clonedCameraNode.id); const newActiveCameraPosition = api.camera.getPosition(); if (logDebug) { console.log("Set the active camera to the cloned camera node. New Active Camera Position:", api.camera.getPosition()); } // If the player unload() function was used previously, then the setActiveCamera() function did not apply the cloned camera's transform. Applying the transform manually. if (!initialActiveCameraPosition.equals(newActiveCameraPosition)) { if (logDebug) { console.log("The setActiveCamera() function did not apply the cloned camera's transform. Applying the transform manually."); } api.camera.setPosition(clonedCameraNode.plugs.Transform[0]?.translation); const targetQuaternion = new Quaternion().setFromEuler( new Euler( (Math.PI * clonedCameraNode.plugs.Transform[0]?.rotation.x) / 180, (Math.PI * clonedCameraNode.plugs.Transform[0]?.rotation.y) / 180, (Math.PI * clonedCameraNode.plugs.Transform[0]?.rotation.z) / 180, rotateOrder ) ); api.camera.setQuaternion(targetQuaternion); } let nodeRotate = false; if (clonedCameraNode.plugs.Camera[0]?.controlsMode === "nodeTurntable") { nodeRotate = true; if (logDebug) { console.log("Camera control mode is set to Node/Turntable"); } } api.cache.nodeRotate = nodeRotate; api.cache.clonedCameraNode = clonedCameraNode; const targetNode = await api.scene.get({ from: api.enableApi("player").stageId, hierarchical: true, id: api.cache.targetNodeId, }); api.cache.targetNodeRotation = targetNode.plugs.Transform[0]?.rotation; if (logDebug) { console.log("Target Node Rotation:", api.cache.targetNodeRotation); } } // Function to animate the camera async function animateCamera(targetCameraId, cameraTargetId, animationTime) { const targetCamera = await api.scene.get({ id: targetCameraId }); if (!targetCamera) { console.error(`Target camera not found with ID: ${targetCameraId}`); return; } const cameraTarget = await api.scene.get({ id: cameraTargetId }); if (!cameraTarget) { console.error( `Camera orbit target not found with ID: ${cameraTargetId}. Using the origin (0, 0, 0) instead.` ); } const targetPosition = targetCamera.plugs.Transform[0]?.translation || { x: 0, y: 0, z: 0, }; const targetRotation = targetCamera.plugs.Transform[0]?.rotation || { x: 0, y: 0, z: 0, }; const orbitPosition = cameraTarget.plugs.Transform[0]?.translation || { x: 0, y: 0, z: 0, }; const targetQuaternion = new Quaternion().setFromEuler( new Euler( (Math.PI * targetRotation.x) / 180, (Math.PI * targetRotation.y) / 180, (Math.PI * targetRotation.z) / 180, rotateOrder ) ); // Get the current camera's position and rotation const currentPosition = api.camera.getPosition(); const currentQuaternion = api.camera.getQuaternion(); const currentOrbitNodeRotation = cameraTarget.plugs.Transform[0] ?.rotation || { x: 0, y: 0, z: 0, }; if (logDebug) { console.log("Animating camera..."); console.log("Current Camera Position:", currentPosition); console.log("Target Camera Position:", targetPosition); console.log("Target Camera Rotation:", targetRotation); console.log("Orbit Position:", orbitPosition); console.log("Target Quaternion:", targetQuaternion); console.log("Current Orbit Node Rotation:", currentOrbitNodeRotation); console.log("Target Orbit Node Rotation:", api.cache.targetNodeRotation); } // Calculate the actual current position vector relative to orbit const currentVector = new Vector3( currentPosition.x - orbitPosition.x, currentPosition.y - orbitPosition.y, currentPosition.z - orbitPosition.z ); // Calculate the actual target position vector relative to orbit const targetVector = new Vector3( targetPosition.x - orbitPosition.x, targetPosition.y - orbitPosition.y, targetPosition.z - orbitPosition.z ); // Calculate what the starting position vector should be in the current camera's coordinate system // We do this by applying the inverse of the current quaternion to the actual current vector const inverseCurrentQuat = currentQuaternion.clone().inverse(); const actualStartPosition = currentVector .clone() .applyQuaternion(inverseCurrentQuat); // Calculate what the target position vector should be in the target camera's coordinate system // We do this by applying the inverse of the target quaternion to the actual target vector const inverseTargetQuat = targetQuaternion.clone().inverse(); const actualTargetPosition = targetVector .clone() .applyQuaternion(inverseTargetQuat); // Easing function for smooth animation const easeInOut = (x) => x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2; // Animation loop let start; function step(timestamp) { if (!start) start = timestamp; const elapsed = timestamp - start; const elapsedPercent = Math.min(elapsed / animationTime, 1); const animPercent = easeInOut(elapsedPercent); // Start from the actual current position and end at the actual target position const interpolatedPosition = actualStartPosition .clone() .lerp(actualTargetPosition, animPercent); const interpolatedQuat = currentQuaternion .clone() .slerp(targetQuaternion, animPercent); const rotatedPosition = interpolatedPosition .clone() .applyQuaternion(interpolatedQuat); const worldPos = orbitPosition.clone().add(rotatedPosition); api.camera.setPosition(worldPos); api.camera.setQuaternion(interpolatedQuat); // If the camera control mode is set to Node/Turntable, we need to interpolate the orbit node rotation if (api.cache.nodeRotate) { // Convert current and target rotations to quaternions const currentOrbitQuat = new Quaternion().setFromEuler( new Euler( (Math.PI * currentOrbitNodeRotation.x) / 180, (Math.PI * currentOrbitNodeRotation.y) / 180, (Math.PI * currentOrbitNodeRotation.z) / 180, rotateOrder ) ); const targetOrbitQuat = new Quaternion().setFromEuler( new Euler( (Math.PI * api.cache.targetNodeRotation.x) / 180, (Math.PI * api.cache.targetNodeRotation.y) / 180, (Math.PI * api.cache.targetNodeRotation.z) / 180, rotateOrder ) ); // Use quaternion slerp for smooth interpolation without gimbal lock const interpolatedOrbitQuat = currentOrbitQuat .clone() .slerp(targetOrbitQuat, animPercent); // Convert back to Euler angles for the scene const interpolatedOrbitEuler = new Euler().setFromQuaternion( interpolatedOrbitQuat, rotateOrder ); const interpolatedOrbitRotation = { x: (interpolatedOrbitEuler.x * 180) / Math.PI, y: (interpolatedOrbitEuler.y * 180) / Math.PI, z: (interpolatedOrbitEuler.z * 180) / Math.PI, }; api.scene.set( { from: api.enableApi("player").stageId, hierarchical: true, id: api.cache.targetNodeId, plug: "Transform", property: "rotation", }, interpolatedOrbitRotation ); } if (elapsed < animationTime) { window.requestAnimationFrame(step); } else { if (logDebug) { console.log("Camera animation complete."); } } } requestAnimationFrame(step); } function handleZoomConstraints(srcCamId, targetId) { function overrideZoom(cb) { api.tools.removeTool("zoom"); // remove built-in zoom tool api.tools.removeTool("custom-zoom"); // remove custom zoom tool, if it exists api.tools.addTool({ key: "custom-zoom", active: true, enabled: true, handlers: { scroll(ev) { cb(ev.delta); return true; // Return true so preventDefault is called and we do not scroll the page }, pinch(ev) { const delta = ev._deltaX / 30 + -ev._deltaY / 30; cb(delta); return true; // Return true so preventDefault is called and we do not scroll the page }, }, }); } const { Vector3 } = api.THREE; const zoomSensitivity = 0.045; const camera = api.scene.get({ id: srcCamId }); const cameraTarget = api.scene.get({ id: targetId }); const { constraintDistanceOffsetMax, constraintDistanceOffsetMin, constraintZoomMode, } = camera.plugs.Camera[0]; const cameraPosition = new Vector3().copy( camera?.plugs.Transform[0].translation || { x: 0, y: 0, z: 0, } ); const orbitPosition = new Vector3().copy( cameraTarget?.plugs.Transform[0].translation || { x: 0, y: 0, z: 0, } ); const defaultCamDist = cameraPosition.distanceTo(orbitPosition); const minDist = defaultCamDist + constraintDistanceOffsetMin; const maxDist = defaultCamDist + constraintDistanceOffsetMax; overrideZoom((delta) => { // convert active camera position to distanceToTarget const currentPos = new Vector3().copy(api.camera.getPosition()); currentPos.sub(orbitPosition); currentPos.applyQuaternion(api.camera.getQuaternion().clone().inverse()); let distanceToTarget = currentPos.z; // adjust distanceToTarget based on user input distanceToTarget *= 10 ** (-delta * zoomSensitivity); if (constraintZoomMode === 1) { distanceToTarget = Math.max(distanceToTarget, minDist); distanceToTarget = Math.min(distanceToTarget, maxDist); } if (currentPos.lengthSq() > 0) { currentPos.normalize().multiplyScalar(distanceToTarget); } // convert distanceToTarget to active camera position currentPos.z = distanceToTarget; currentPos.applyQuaternion(api.camera.getQuaternion().clone()); currentPos.add(orbitPosition); api.camera.setPosition(currentPos); }); } // Main script api.evaluate().then(async () => { if (logDebug) { console.log("Initializing script..."); } // Retrieve configuration const config = api.configurator.getConfiguration(); const selectedCamera = config[cameraAttributeName]; let animationTime = parseFloat(config[cameraAnimationTime]) || 1; // Default to 1 second if (logDebug) { console.log("Selected Camera:", selectedCamera); console.log(`Animation Time: ${animationTime} seconds`); } // Convert time to milliseconds animationTime *= 1000; // Find the camera node hierarchically const cameraNode = await findNode(selectedCamera, "Camera"); if (!cameraNode) { console.error(`Camera "${selectedCamera}" not found.`); return; } // Find the target node const targetNode = await findNode(orbitTargetNodeName); if (!targetNode) { console.error( `Camera Orbit Target node "${orbitTargetNodeName}" not found. Using the origin (0, 0, 0) instead.` ); } if (!api.cache.targetNodeId) { api.cache.targetNodeId = targetNode; } if (logDebug) { console.log("Found Camera Node:", selectedCamera, "with id", cameraNode, "with transform", api.scene.get({ id: cameraNode}).plugs.Transform[0]); if (targetNode) { console.log( "Found Camera Orbit Target Node:", orbitTargetNodeName, "with id", targetNode ); } } // add constraints to zoom tool handleZoomConstraints(cameraNode, targetNode); // Set the initial camera on first load if (!api.cache.prevCamera) { api.cache.prevCamera = selectedCamera; if (logDebug) { console.log("Initial camera load"); } await setInitialCamera(); return; } // Avoid running the animation if the camera attribute has not changed if (api.cache.prevCamera === selectedCamera) { if (logDebug) { console.log("Selected camera is the same as the previous camera"); } return; } api.cache.prevCamera = selectedCamera; // Animate the camera await animateCamera(cameraNode, targetNode, animationTime); }); ``` ## Limitations * The animation curve cannot be controlled without editing the script, but this requires some understanding of the math involved in the easing function. This can be done by editing the following line of code: ```javascript const easeInOut = (x) => x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2; ``` * Only the position and rotation of the cameras will be used during the animation transition. This means that if you have different cameras with different focal lengths, different orbit modes, or different constraints, this information will not currently get applied. * For constraints, you can use the relative mode instead of world mode for Longitude constraints in particular, which would be more general regardless of the camera orientation, but feel free to experiement with different settings to see what works best. # Training The home for all training-related information ## Introduction Implementing projects using the ThreeKit platform requires an understanding of the fundamental concepts and building blocks of our system. Our clients choose ThreeKit for its flexibility and scalability in dealing with lots of product data and complex configuration requirements. Understanding how to implement such projects will require careful study of ThreeKit's Org, Catalog, Asset, and Logic Systems at a minimum. The training material presented here is intended to introduce new implementation users to these concepts. We currently have only a basic set of pre-recorded videos and articles, but we are actively working on generating a new set of up-to-date training videos to cover the topics outlined here. ## Self-Led Training This content forms the basic fundamentals of working with ThreeKit. We are currently working on revamping this material to bring it up to speed, and re-organizing it for a more streamlined experience. {% content-ref url="/pages/V7grlGTIgpJI0zUR87hG" %} [Self-Led Training](/learn/training/self-led-training) {% endcontent-ref %} ### Training Videos Outline On this page you can find the list of topics that will be covered by the upcoming new set of self-led training videos. {% content-ref url="/pages/D4JiPeymeewk0q5o89Qt" %} [Upcoming Training Videos Outline](/learn/training/self-led-training/upcoming-training-videos-outline) {% endcontent-ref %} ## Guided Training Live guided training sessions are available on a scheduled basis, depending on interest. These live sessions go in depth through the implementation process, teaching participants how to leverage the tools of the Threekit Platform to build visual configuration experiences. Visit the [Guided Training page](/learn/training/guided-training) for detailed information. # Self-Led Training This document is intended to walk through the self-led training process for the Threekit Platform. You must have access to the platform in order to follow along. Access should be provided by your organization or by enrolling in Threekit Training through your Threekit representative. **Step 0:** If you are new to Threekit, follow the e-mailed link and directions for accessing the Threekit Preview site. **Step 1:** Download the assets to your computer and unzip - [TrainingAssets.zip](https://storage.googleapis.com/files.threek.it/training/CommunitySite_Resources/TrainingAssets.zip) **Step 2:** Open the training PDF - [Threekit Platform Self-Guided Training.pdf](https://storage.googleapis.com/files.threek.it/training/CommunitySite_Resources/Threekit%20Platform%20Self-Guided%20Training.pdf) **Step 3:** Watch the video segments below for each skill required to complete the training examples in the Instructions PDF. **Note:** Each topic is covered only once, you will need to follow the PDF to ensure you create all appropriate pieces for functional examples. *\*\*Non-English transcript translations were created with Google Translate and may not be accurate. Words in **bold** will appear in the software in **English**. (Attached below.)\*\** ### [Single Video Version](https://www.youtube.com/watch?v=TubX4IFNkuc) ### The BIG Picture: Threekit Navigation and Terminology {% embed url="" %} ### Create a Catalog Item {% embed url="" %} {% hint style="info" %} **NOTE:** The instructions below utilize local attributes for purposes of demonstration. In practice, the use of **Global Attributes** is strongly recommended. {% endhint %} ### Add a "String" Attribute to a Catalog Item {% embed url="" %} ### Add a "Number" Attribute to a Catalog Item {% embed url="" %} ### Create a "Model" Asset {% embed url="" %} ### Add a Default Box in the 3D Editor {% embed url="" %} ### Adding "String" Attributes in the 3D Asset Logic Editor {% embed url="" %} ### Adding "Number" Attributes in the 3D Asset Logic Editor {% embed url="" %} ### Adding a Simple On/Off Visibility Rule in the Logic Editor {% embed url="" %} {% hint style="info" %} **Note:**\ **The check box for true/false options has been replaced with a slider.**\ **True:** ![Screen\_Shot\_2021-07-28\_at\_10.55.57\_AM.png](/files/uNyVE7imLbjkzb4U4Xv4) **False:** ![Screen\_Shot\_2021-07-28\_at\_10.55.16\_AM.png](/files/aZRrTD7aBplkgQPU94xx) {% endhint %} ### ### Associate a 3D Asset to a Catalog Item {% embed url="" %} ### Importing Assets {% embed url="" %} {% hint style="info" %} WARNING:ZIP file limitations: * Uploading ZIP files will not show an import dialog box. The contents will get automatically uploaded to ThreeKit. * In case of duplicate assets with the same name, the uploader will create new copies with an incremental number, instead of updating the existing assets * ZIP files are not allowed to contain multiple 3D model files (FBX, glTF, etc.). Only one single 3D model file is allowed per ZIP, along with supporting textures These limitations are only specifically for files that end with the .zip extension. They do not apply to files like .vrscenezip, .pbrzip, etc. {% endhint %} ### Add a "Part Reference" Attribute to a Catalog Item **NOTE: When using global attributes, for `Part Reference/Asset` Attributes, setting the `Asset Type` at the creation step insures Item-to-Asset compatibility.**
{% embed url="" %} ### Add Tags to a Catalog Item {% embed url="" %} ### Using Tags for Attribute Values {% embed url="" %} ### Searching for Imported Assets {% embed url="" %} ### Adding "Material" Attributes in the 3D Asset Logic Editor {% embed url="" %} ### Adding a Variable Asset Visibility Rule in the Logic Editor {% embed url="" %} ### Adding Components and Configuring Properties in the 3D Editor {% embed url="" %} ### Adding Rules in the Catalog Item {% embed url="" %} # Basic Renders In the left-hand menu, click "Renders." In the upper right, click "New render job" ![](/files/rfraCXOYK91uepuX02TD) Select the desired tags or items from the drop down menu. ![](/files/V6FWgFfa42uSwnCYNNXv) Select the desired configuration values.

Limit to ...

Exclude

If desired, you may click the "expand tags" option and deselect specific items from the tag groups. ![](/files/UKFnMyYx8aiYv8Gloukr) NOTE: Leaving the selections blank will render all possible permutations. Select the desired stages from the drop down menu. Give the render job a descriptive name and select the desired image types. ![](/files/2VwP4pX6a5OqeoFJSmHY) {% hint style="info" %} NOTE: 1K, 2K, and 4K presets for rendering are 1024, 2048, and 4096 pixels respectively. {% endhint %} **Extended Render Presets** allow you to save every selection on the render screen so that you can easily re-render jobs with preset Item selection, Item Attribute selection, Composite Layer selection, Stage selection, and Stage Attribute selection: Existing presets can be modified and updated: Click "Render" to begin the job. You will automatically be taken to the "[Jobs](https://docs.threekit.com/docs/jobs)" area to see the progress of your renders. {% hint style="info" %} UPDATE: Render progress may be viewed from any page by clicking the jobs icon in the upper right corner. {% endhint %} From within the Jobs window you are taken to, you will find the list of items created by this render job. ![](/files/m4rCqGmCCiCSJfQdePci) Clicking on an item will take you to a detailed list of information about that particular render: 1. Coded parameters
2. Information about all attempted runs and their status.
Notice you may click on the final image or the logs from within this status to download the listed file. ### **Viewing Renders** **The best location to view render results is within the "Renders" section.** Results are shown in this area as they come in. **Render Previews** have been improved to include a configurator in the preview panel for a better and more accurate preview experience. ![](/files/ElGxqubae2oLOaw8rzjq) You can select individual renders in the listing table or configure both the Item and Stage in the preview panel. ### Video {% embed url="" %} # Adding Pricing In the left-hand menu under "Settings" select "Pricebooks."
Click the "New Pricebook" button in the upper right.
Add an appropriate name and select your desired currency.
If desired, add additional currencies.
Click "Done." Your Pricebook should now be listed.
Open the item in your catalog where you wish to add pricing.\ Locate the "Pricing" section in the lower right-hand corner.\ From the dropdown menu, select the pricebook you created.
Add appropriate values for each currency. Click "Save item."
{% hint style="info" %} NOTE: If your configurator includes item selections with an additional cost, those are calculated in the preview window. {% endhint %}

Base Price

### Video {% embed url="" %} # Adding Additional Languages In the left-hand menu, under "Settings" select "Languages"
Click "Add Language" in the upper right-hand corner.
For each language, add the name and abbreviation.
These will be added to the list.
Click the "Export" Button to export a CSV file with all of your item names.
In the spreadsheet, add the translation for each term in the appropriate column.
Click "Import" and select the appropriate file.
Navigate to your catalog and verify the items now show your language options.
### Video {% embed url="" %} # Rules ### What are Rules? Rules are used for refining configurator options, adjusting asset values, and manipulating the user interface. NOTE: * Rules may be created without conditions or with multiple conditions. * Rules may trigger a single action or multiple actions. Rule Order * All rules are triggered from top to bottom. * All conditions and actions are triggered from top to bottom. ### Adding Rules & Setting Conditions in Catalog Enter edit mode for the catalog item. Scroll to the bottom left and locate "Rules." Click "Add Rule." ![](/files/B7qlGlYegB9ixpBycVK0) Click on the "New rule" line to open the rule options. ![](/files/QHySTtCZJm5uX2hs2Ml9) Give the rule a descriptive name. Click the "+" to the right side of "Conditions" to add a condition.
Select from the list of existing attributes on the catalog item. Operator value options will vary by the attribute type.

String Attribute

Select an appropriate operator and type or select the desired value in the right-hand field. ![](/files/ifPL94DgjJ4hfWgepztp) ### Adding Rules & Setting Conditions in Assets In the asset editor, click the "layout" tab.
Add any relevant attributes in the Attributes Tab. Click the "Rules" tab and add a new rule. Give the rule a descriptive name.
Click the "+" to add new conditions if desired. Operator value options will vary by the attribute type. In addition to those above, the following are asset specific.
### Actions Note Some actions are only available in the asset editor mode. Typically only those actions necessary for 3D asset modification are placed on the asset. All other actions are created on rules within the catalog item. ### Actions: "set attribute visible" This action hides or shows attribute values in the configurator. If an attribute is hidden from the end user, it will retain its default value. Click the "+" icon to the right of the "Actions" and select "set attribute visible."
Select the desired attribute to change from the dropdown.
Toggle the slider to the desired setting.
![](/files/2r59EYU1Sx3bDnH95LwC) ### Actions: "set attribute enabled" This action disables or enables the attribute within the configurator. If an attribute is disabled, the value will no longer affect the preview or renders. NOTE: Disabling an attribute does not hide it in the configurator. Click the "+" icon to the right of the "Actions" and select "set attribute visible."
Select the desired attribute from the dropdown menu.
Toggle the slider to the desired setting.
![](/files/QxIW1LCvAwnuLRrdvCcn) ### Actions: "set attribute value" This action changes the current value of the selected attribute. The new value will persist until changed by a user or another rule action. Click the "+" icon to the right of the "Actions" and select "set attribute value."
Select the desired attribute.
Select where the new value will originate. Options will vary by attribute type. ![](/files/CX5MUKEiXIv3a5kkni58) Value will allow the attribute to be set to a specific static value. ![](/files/zxLXUUVAwfy4XPxlN1eU) The attribute will take the same value as another attribute of the same type. ![](/files/4FPL48jUXyzbwW5wI81k) Database Query will pull values from an existing data table.
Values may also be pulled using metadata.
### Actions: "set attribute value visibility" This action allows attributes with multiple predefined values to show or hide specific value options in the configurator based upon rule conditions. Hidden values may still be utilized by other rules. Click the "+" icon to the right of the "Actions" and select "set attribute value visibility."
### Actions: "set attribute value enabled" This action allows attributes with multiple predefined values to enable or disable specific value options in the configurator based upon rule conditions. Disabled values are not passed on and no longer affect the preview or renders. {% hint style="info" %} NOTE: Disabling an attribute value does not hide it from the user in the configurator. {% endhint %} Click the "+" icon to the right of the "Actions" and select "set attribute value enabled."
### Actions: "custom script" Custom script should be used with caution as it may change the behavior of other features within Threekit in unexpected ways. Click the "+" icon to the right of the "Actions" and select Custom script is coded in JS. ![](/files/iAwXf3hDn6Mocob4ADMY) ### Actions: "set visibility" This action changes hides or shows the selected node on the 3D asset when utilized in preview or for renders. Click the "+" icon to the right of the "Actions" and select "set visibility." Set the first dropdown to the appropriate node. Select how the node visibility will be manipulated. Most often this is with "attribute." Select the attribute. NOTE: The attribute type must be boolean (true/false) and exist on the 3D asset. ### Actions: "set material" This action allows material to be dynamically changed, often by manipulating attributes in the configurator. Click the "+" icon to the right of the "Actions" and select "set material." Set the first dropdown to the appropriate node(s). Select how the node(s) will receive values. Most often this is "attribute." Select the attribute from the dropdown. NOTE: The attribute must be of type "material" and exist on the 3D asset. ### Actions: "set model" This action allows the model to be dynamically changed, often by manipulating attributes in the configurator. Click the "+" icon to the right of the "Actions" and select "set model." Select the desired node from the dropdown. Select how the node will be changed. Most often this is "attribute." Select the attribute from the list. NOTE: The attribute must be of type "model" and exist on the 3D asset. ### Actions: "set property" This action allows properties of the 3D asset node to be dynamically changed, often by manipulating attributes with rules in the configurator. NOTE: This can manipulate any property in the asset Properties panel in the Editor mode. Click the "+" icon to the right of the "Actions" and select "set property." Follow the node path selections to choose the desired property. ![](/files/0byL0Jh8GTKeO4E3MI9H) Options will vary depending on property type. Common options are static values or linking to attributes. NOTE: When linking to attributes, the attribute must be exist on the 3D asset. ![](/files/ZXq2svXuLjyLDcLPQcjk) ### Actions: "set active camera" This action allows selection of camera to be dynamically changed, often by manipulating attributes with rules in the configurator. Click the "+" icon to the right of the "Actions" and select "set active camera." Select from the available cameras. ### What is that chain option? ![](/files/XZ8iLwxUAlULbu5mViie) The "chain" icon provides the ability to choose between using the incoming attribute instance or to create a new instance. Typically the incoming instance is used, however there are instances when you will wish to unlink the nodes so a single instance may be manipulated. For example, if you assign one material to 4 parts but you want to override a property of the material on one of the parts. You unlink it and then can modify that one instance. ### Complex Rules Rule Order * All rules are triggered from top to bottom. * All conditions and actions are triggered from top to bottom. When multiple changes need made based upon the same condition(s), a single rule may be implemented.\ Click the "+" icon to add additional conditions and/or actions as desired. ![](/files/yWQkTm0r8HVKWiYjGD9W) REMEMBER: * ALL conditions must be true for actions to trigger. * ALL actions will trigger if the conditions are met. # Data Tables {% hint style="info" %} UPDATE: Data Tables is now a sub-menu item of Catalog. For more information, please see the release notes. {% endhint %} ### What are Data Tables? Data tables are CSV files uploaded to Threekit and converted into a database. Data tables are useful for storing all data for the configurator, logic, and so forth within the Threekit system, eliminating the need for external tools or connections. VERIFY: Your CSV file must be of a "UTF-8 CSV" type to import properly. ### Adding a Data Table Ensure the top row of your CSV file is the column header information before uploading. Click "Data tables" in the left-hand menu.
In the upper right corner click "Import Table."
Select the proper file from the popup window. In the new table window, name the table and select the appropriate data type for each column. Click "Create." The newly created data table will appear in the list.
Click on the table name to verify the information. ![](/files/aRsv3Nc3GepdSwM2iQRZ) From this window,\ Click the "Rename" button to rename the table -- this does not modify the table data.
Click "Download" to download a CSV copy of the table for editing.
Click "Update" to upload a new file with adjusted information. NOTE: Any file may be used to update information, the file name does not need to match that of the previously uploaded file.
New columns will be added to the column list. Adjust the data type as needed. Removed columns will be noted with a warning message in red at the bottom. Click update when finished. ### Using Data Tables in Catalog In the catalog item edit screen, rules may use data table values as a source for attribute values. Add a rule to pull information from the database into the attribute value. Set the rule name and conditions as usual. Click the "+" to add a "set attribute" action. Select the desired attribute from the drop down menu. (In this case SKU).\ Select "Database query."\ Select the desired data table.\ In "Select the first value from" choose the column name from the data table.\ Click "+ Add parameter." for each attribute whose value will originate from the data table. Choose the desired column from the data table in the left-hand drop down. Select whether you want the value equal (=) or not equal (!=) to that found in the column. In the right-hand drop down, select the attribute on the item whose value will be set.
![](/files/A3ezjhnNkHXIcLjlclwt) NOTE: The columns in your table may or may not match the names of your attributes. Name matching is not required. Click "Done." Don't forget to "Save Item!" Test your configurator to ensure the value is properly updating.
### Video {% embed url="" %} **Data Tables trash** - you can now delete data tables you no longer need.
You can `Go to trash` and restore deleted Data Tables:
# Dimension Annotations **Dimension annotations** can be added to Interactive 3D and Virtual Photography experiences! ![](/files/8P7IowI4SlQHFQPfA8uC) Threekit can measure models in realtime and display measurements in a variety of units or can refer to imported Catalog metadata for the measurement value. They an be displayed conditionally using Attributes like any other product option. To add Dimensions to either your model or scene assets, use either the new `Box Dimensions` or `Line Dimensions` annotations:
#### Box Dimensions **Box Dimensions** can be used to display the overal dimensions of one or more products in a stage. For example, you can measure one sofa, the size of a modular sofa as it's configured, or the overall floor space needed for a living room arrangement:
Use `Target Nodes` to select what you want to measure, either by node names or node tags. Note that node tags can be used to measure tagged nodes within an asset reference. For example, a scene can measure between tagged nodes within a model placed in a scene. You can configure the unit type and rounding. You can also select which dimensions to measure: `Width`, `Height`, and `Length`. Within each dimension, you can select the annotaiton placement, use a custom label, and control the annotation offset. #### Line Dimensions **Line Dimensions** can be used to measure any two points. For example, you can measure the seat depth of a sofa, the arm width, or the clearance of one part to another:
Use `Start Node` and `End Node` to select what you want to measure, either by node names or node tags. Note that node tags can be used to measure tagged nodes within an asset reference. For example, a scene can measure between tagged nodes within a model placed in a scene. #### Dimension Styling Dimension annotation styling includes color, font, line thickness, and font size:
Note that you can upload Fonts to Threekit as Assets and use those with annotations. #### Virtual Photography Dimension annotations will render as you see them in the player with no additional set up. Adding dimensions at scale to virtual photography is as easy as adding Dimensions to a `Scene`, selecting the associated `Stage` at render time along with the `Items` you'd like to measure: ![](/files/Hevd4k0tPYR7hVBm3uZ3) Render results can then be fetched using the Threekit API or downloaded from the Render results page:
**Dimension Annotations** now have more styling options to replicate technical drawings. From: ![](/files/V6z9l7pafFWYr6Ut7jU2) To: ![](/files/TKJkRgXCOCRclOxIZ0hR) New Dimension Annotation styling options include: * Start Endcape Shape * End Endocarp Shape * Endcap Size * Line Style * Label Vertical * Label Horizontal * Label Rotation * Label Orientation ![](/files/HmgCpcSlwsWe9VvxSUIq) ### Video {% embed url="" %} # Stages ### What are stages? Stages allow: 1. Various experiences, including backgrounds, settings, and interaction. 2. Different lighting and camera angles. 3. Control of user experience in the player. Note: Stages work for Virtual Photography and 3D, not AR; in AR the real world is your stage! ### Create a Stage {% hint style="info" %} Pro-tip: The most efficient workflow is to create a global "Asset" attribute *before* creating your stage(s) and scene(s). {% endhint %} Click "Stages" in the left hand menu.
Click "Add stage" in the upper right.
Give the stage an appropriate name and description.
Click "Save". The stage will be listed in the Stages area.
### Create a Scene Asset for your Stage \ Click on "Assets" in the left-hand menu. Click "Create Asset" in the upper right. Give your asset a name and select the "scene" type. click "Save Asset." Select an object from the "Assets" pane at the bottom to act as a placeholder. ![](/files/nRCFwGR3lj3L4TGhFOCC) In the "Logic" tab, add an asset with the name "Asset" of type "Model." (Either a global or local attribute will work.) {% hint style="info" %} Warning: You MUST include an asset with the exact name "Asset" or your scene will not show as available in the dropdown menu elsewhere. {% endhint %} Click on "Rules" and add a rule to change the placeholder object based upon the asset attribute. ![](/files/pVdxbBBMUHPHIywlZajf) NOTE: This process may cause the asset image to 'disappear' from the "Layout" view. If so, simply click on the placeholder object and select an appropriate model from the dropdown for "Asset Asset" under the "-Null" field in the right-hand properties window. ![](/files/oWTWcbjIZUIPIuU0Q4Ai) NOTE: When working in the nodes area, the check box to the upper right of the scene name will allow you do multi-select node components.
### Adding Lighting \ In the "Layout" tab of the asset editor, click the lightbulb icon at the top of the screen. Select the type of lighting you wish to add. Adjust the location of the lighting by clicking on icons at the top, then manipulating the directional adjustements in the image.
With the light selected, adjust the lighting properties in the right-hand menu as desired. ![](/files/aZv2DbNtaAp2fJRkpqUk) ### Adding Cameras \ Click the camera icon to add a camera. ![](/files/jeffHtC8o25cokf7Wzhd) Adjust the camera location and angle by clicking on the icons at the top, then manipulating the directional adjustements in the image.
Click the camera icon again to add additional cameras. To see the view from the perspective of any given camera, click the "Perspective Camera" button and select the desired camera from the dropdown.
Click the camera button and select "Perspective Camera" to return to the default view. Set the default camera by clicking on the scene name at the top of the nodes tree. In the right-hand column locate "Player". Select the appropriate camera from the drop-down menu.
### Adding Backgrounds \ Click the scene name in your node tree, then scroll down to locate "Background" in the Properties menu on the right hand side. Select the desired background option.
"Environment" background allows you to utilize an environment map as selected in the "Environment" section just above the "Background" menu. Environments are utilized when there is a desire to "reflect" preset surroundings on the object. Notice how the parking lot is reflected in this metalic object.
A solid colored background may be selected by choosing "color" from the drop down menu.
![](/files/iUJrjU8i47GB6GJrTDIK) ### ### Adding Props From the Assets window at the bottom, drag in additional prop items as desired and drop them on the stage name. They will appear at the bottom of the list. Adjust the location of each item and set the item properties. These items will not change as you swap assets. ![](/files/1i5JKj9lDO77OTJSbRi3) ### Controlling User Experience Adjusting the properties of these stage features (camera, lighting, etc) may be used to control the user experience. For example, to constrain the user's ability to zoom by adjusting the camera properties of the default camera select the camera from the nodes list. In the right-hand menu, scroll down to locate "Constraints." In the "Zoom Distance" menu, select "Enabled (Relative Distance)." Adjust the min and max as desired.\ NOTE: The minimum will be a negative number. Adjusting the Longitude and Latitude will constrain the up-down spin and left-right spin respectively. The "Allow Roll" check will allow rotation on the z-axis:
### Connect your "Scene" to your "Stage" Click on "Stages" in the left-hand menu. Click on your stage. Click "Edit." In the "Visualization" dropdown on the right, select your "scene" asset. Click "Save stage." ### Alternative Scene Creation: Using Imported Models Go to the edit area of the model you wish to use for scene creation. In the layout tab, under nodes, right-click on the node name and select "clone to scene." The clone will automatically open in a new tab. From there, you may add scene components (lighting, cameras, etc...) or modify scene properties as desired. ### Stage Previews **Stage previews** have been added to Catalog Items so that you can preview products in different Stages within the platform. Use the `Stage` tab in the player preview to see the list of available Stages and swap them in real time:
If Stages have attributes, they will be displayed so you can configure the `Stage`:
`Stages` allow you to preview Items by using the `Items` tab. If the Item has attributes, they will be displayed: ![](/files/t2SbhoP4fKfSxLovT71Q) The `Stage` preview can also be displayed when the player is embeded. ### Video {% embed url="" %} # Metadata ### What is Metadata? \ Metadata are properties of items that cannot be changed by the end user which may be used within the system for: * Enhancing user experiences * Allow the properties of a product to manipulate the visuals ### Add Metadata in Catalog Open the catalog item and enter the edit mode. Locate the Metadata Window and click "Add Metadata" Select either "String" or "Number" Naming Metadata When naming your metadata be sure to avoid operator, precedence, and delimiter-style characters such as:\ , . “ ‘ ? ; : & \* ( ) - = \_ + \[ ] \ { } | ( ) # @ ! < > String metadata allows for alphanumeric characters as well as special characters in the "Value" field. ![](/files/gXeqrIqkuUuHF4yFDKC9) Number metadata only allows numeric characters in the "Value" field. ![](/files/bALtKDeGoprgsf886IfW) NOTE: At this time, all metadata is "Local." ### Metadata in Rules: Conditions In the catalog, metadata may be used for selecting which part referenced items are modified by a rule. * Create a new rule * Add a condition using a part reference attribute where the items referenced contain metadata. * Select "metadata" from the dropdown. * Click "+ parameter." * Type in the name of the metadata on the part reference. * Select an appropriate operator. * Type in the desired value. ![](/files/S8TVTAsUTpT35w4BtQx4) ### Metadata in Rules: Actions This action allows metadata information to be passed from part referenced items into attribute values in a higher level configurator. * Create a new rule * Add an action of "set attribute value." * Select the attribute that will change values * Select "metadata" from the dropdown. * Select "item" * Type in the name of the metadata ![](/files/JGIOMeyUfT0qHwsX4E82) Metadata values are case sensitive. Be sure to check the name if your rule does not behave as expected. ### Using Metadata to Modify 3D Assets In the catalog item AND asset editor, ensure an attribute (global attributes are recommended) exists for each component to be adjusted based on metadata. ![](/files/vhwldDSJveycootN2AbH) In the asset editor rules tab, select a condition for the attribute with a type of "metadata" and select whether the metadata exists on the item or the asset. ![](/files/dJKggxqso48APCPnd8wO) Click "Parameter" to list which metadata will be utilized. ![](/files/31RZr17KlGd3X6gwJPAM) Click the + icon for each action and select the type of value you wish to modify.
Multiple values may be modified on a single rule. For example, the camera, visibility of stage props, and lighting may be modified based upon item size metadata. ![](/files/X7iS3xdmJhZOK63cvOla) ### Video {% embed url="" %} # Proxy Materials ### What are Proxy Materials? Proxy materials allow material assets tobe automatically switched based on the type of output image desired -- virtual photography (vray), 3D (webGL), or AR (Android \[glTF] or Apple \[UDSZ]). ### How To Create Proxy Materials A new proxy material may be created by selecting the option from the dropdown beside "Physical Material" on the "Add Asset" screen. **OR** Any existing material may be converted into a proxy material. Locate the desired material and enter the asset editor mode. In the upper right, under properties, click "Convert to Proxy Material." In the popup window, select "Convert." A copy of the material will be created with the word proxy after the name. This new proxy material is created in the same folder location as the original material. NOTE: Any model assets previously assigned the original material will automatically be assigned the new proxy material upon creation. The editor will automatically change to show the newly created proxy material. Under Properties, under Material, there will now be a sequence of dropdowns to select the desired material to be used for each type of experience. TIP: When naming materials it is always good to include a label such as "proxy" to make them easier to locate in the dropdown menu. Similarly, label uploaded materials for each of the proxy settings with their material type -- "vray", "webgl", etc. ### Using Proxy Materials After the proxy material is created, open the model asset. Select the appropriate node where the proxy material will be linked. In the right-hand Properties sidebar, scroll down to "Material" and select the proxy material from the dropdown. NOTE: When a proxy material is modified, all connections to that material will be modified automatically. ### Proxy Logic Proxy Materials may have rules the same as any other material asset. For example, a rule may be created to select different finish materials for virtual photography and for AR. In addition, logic may be used to passed information between proxy materials and standard materials, such that the proxy material acts as the parent of the standard material. ### Video {% embed url="" %} # Image Annotations **Image annotations** can be used to highlight product features in the 3D Player. Annotations can be opened and closed and will always face the camera. ![](/files/SNgzmXUiy8HwH8SqxzWX) To add a text or image annotation, select Annotation from the Editor toolbar: To set the annotation to only display an image, set \`Custom Text\` and set the text value to empty. Then select an image from your Asset library: Your can configure annotation properties, like image size, angle, etc. ### 🎛 **Annotations** can be toggled to display conditionally in Logic to highlight product features as users configure a product. ![](/files/MleSaLapppJZkF2qenCr) Using the new "**set annotation**" action, you can toggle Annotations: ![](/files/dlzHwV1B4QI1RMxwhBma) # Upcoming Training Videos Outline This list contains the set of topics that will be covered by the upcoming set of training videos. ## Platform Basics ### **Basic Concepts** 1. Platform Introduction (covers the structure of the ThreeKit platform) 2. Orgs and Platform admin * Introduction * User Management * Support Access 3. Environments and Data Migrations 4. Basic configuration example and description of the basic components: * Catalog Items * Assets * Stages * Attributes * Metadata * Tagging * Asset IDs * Players (2D and 3D) ### **Basic Project Architecture** * Catalog system * Products, Components, Options, Materials, Collections as Items * Importance of Asset/PartReference attributes vs String/Number/Boolean/Color attributes * Asset system and workflows * Attribute propagation * Basic project architecture with diagrams and examples ### **Setup a Basic Example Configurator Prototype** 1. Illustrates the basic concepts and shows how quickly a prototype can be built to verify the workflow, without waiting for visual assets 2. Includes step by step instructions so users can follow along 3. Includes the following: * 2 Product Items + Model Asset for each (Simple but fun models we build using Boxes) * 6 Material Choice Items + Material Assets for Each * 1 Collection Item * 1 Stage + 1 Scene 4. As the example is built, we walk through the relevant aspects of the UI, in terms of how it is used to build the example * Creating attributes, Items, tags, and assets * Filtering the list * Using the Quick View and Edit * Basics of using the Asset Editor, which includes selecting and moving/transforming objects in the 3D view *** ## Logic and Assets ### **ThreeKit 3D Basics** 1. Working with Assets * Organizing, Importing/Exporting and the Job system * Naming Conventions 2. Models * The Asset SceneGraph * Nulls and Model References 3. Materials 4. Textures 5. Operators 6. Scenes 7. Cameras 8. Lighting * HDR Environments * Shadow Lights * Realtime Lights 9. Proxies ### **ThreeKit Logic** 1. Logic Editor 2. Product Rules vs Asset Rules 3. Product Rules 4. Cover Actions and Conditions typical on the Items 5. Asset Rules 6. Cover specifics of Asset Conditions and Actions 7. Importance of Attribute and Rule order in the current system *** ## Workflows ### **Advanced Configuration** 1. Text Personalization - Configurable text input 2. Image Upload 3. Dimensions 4. Modular Configuration 5. Layout Container + Connectors + Physics 6. Parametric Configuration ### **Performance optimization and troubleshooting** 1. Basic optimization requirements - * Polygon count * Node count * Texture sizes * Mobile vs desktop RAM requirements * Overall download size * Custom Code optimization * Avoiding Area Lights * Number of Materials * Player Size 2. Mesh Optimization options 3. Texture optimization options 4. Publishing and Caching 5. How the size of the player affects the performance, especially in terms of post process effects 6. Troubleshooting the player load using Chrome Network Tab ### **AR Workflow** 1. Android vs iOS 2. Setup 3. Basic AR Limitations *** ## Automation and Development ### **Automation Workflows** 1. Catalog Data Automation * Importing data using Apps and Spreadsheets/Data Tables * Setting up for automation using tags and metadata * Custom Apps to automate a sequence of tasks * Webhooks vs Custom Apps * Attribute dependencies * Item Templates 2. Asset Setup Automation * Node Tags * Queries * Material Templates * Model Templates ### **ThreeKit Development and Front-End Integration** 1. Tokens 2. Player embedding and form-building 3. JavaScript Player API resources * Initializing the Player * Player API * Configurator API * Scene API * Custom Scripts 4. Treble 5. Server/REST API * Basic requirements * Catalog management * Layer API * Export API 6. Building a Prototype without worrying about the visuals 7. Workflows specific for the front-end (attribute ordering, thumbnails, SKU information) *** ## Virtual Photographer 1. The concept of renders and 2D vs 3D 2. VRay Integration 3. Layering and Compositing 4. The Render Dialog page 5. The 2D Player and its options # Guided Training ## THE GOAL To provide users with a clear, concise, and thorough onboarding experience to the ThreeKit platform. The courses are designed to impart an understanding of what the ThreeKit platform is, what it can do, the building blocks and how they relate to each other, and the main recommended workflows. ## TARGET AUDIENCE New ThreeKit users that plan to implement or maintain projects using the platform. The target audience would consist primarily of artists, developers, and project managers. ## FORMAT The training runs over the course of five weeks in total, typically on Wednesday and Friday mornings (New York timezone). We adjust the schedule in some cases to account for holidays.The information is presented as a series of concepts in slide format, with supporting diagrams, examples, and hands-on exercises. The step-by-step guides are more limited in terms of technical information.The primary goal is to expose new users to these concepts, so they know what is possible and what we recommend as standard workflows. Additional technical detail can then be obtained through supporting documentation, ThreeKit support system, Forums, Slack channels, and Consulting hours. | **WEEK 1** | **WEEK 2** | **WEEK 3** | **WEEK 4** | **WEEK 5** | | ----------------------------------------------------------------------------- | -------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------ | -------------------- | |

Basic Concepts

Project Architecture

Building a Prototype

|

Threekit 3D Basics

Logic

|

Advanced Configuration

Performance & Optimization

Augmented Reality

|

Automation

Development & Front-End Integration

| Virtual Photographer | [**Here is a detailed view of the training outline.**](/learn/training/guided-training/training-outline) ## PLANS & PRICING There are a total of three options for the type of training that can be purchased: 1. **Basic** - for implementation project managers and customer admins interested in some self service 2. **Advanced** (Basic + Development & Automation) - for users with development skills 3. **Virtual Photographer** (Advanced + Virtual Photographer) - for users with development skills and for VRay projects | | **BASIC** | **ADVANCED** | **VIRTUAL PHOTOGRAPHER** | | ---------- | ----------------- | ------------------ | ------------------------ | | **WEEK 1** | ✅ | ✅ | ✅ | | **WEEK 2** | ✅ | ✅ | ✅ | | **WEEK 3** | ✅ | ✅ | ✅ | | **WEEK 4** | ❌ | ✅ | ✅ | | **WEEK 5** | ❌ | ❌ | ✅ | | **PRICE** | **$900 / PERSON** | **$1200 / PERSON** | **$1500 / PERSON** | ## SIGNUP PROCESS There is no scheduled training taking place at this time. If you are interested in attending the live training, please email with your details. # Training Outline ## Week 1 - Platform Basics 1. **Basic Concepts - 3h - 15min break** 1. Goals and expectations for the training 2. Additional help and reference material 3. Platform concept and structure, including various uses (CMS, 3D, 2D, AR, personalization, manufacturing output options) 4. Orgs and Platform admin * Introduction * User Management * Support Access 5. Publishing and ThreeKit Environments 6. Basic configuration example and description of the basic components: * Catalog Items * Assets * Stages * Attributes * Metadata * Tagging * Asset IDs * Players (2D and 3D)\
2. **Basic Project Architecture - 1h** * Basic project architecture with diagrams and examples * Catalog system * Products, Components, Options, Materials, Collections as Items * Importance of Asset attributes vs String/Number/Boolean/Color attributes * Asset system and relationships * Attribute propagation 3. **Set up Basic Example Configurator Prototype - 3.5h - 15min break** 1. Illustrates the basic concepts and shows how quickly a prototype can be built to verify the workflow, without waiting for visual assets 2. Includes step by step instructions in the slides, so users can follow along 3. Includes the following: * 2 Product Items + Model Asset for each (Simple but fun models we build using Boxes) * 6 Material Choice Items + Material Assets for Each * 1 Collection Item * 1 Stage + 1 Scene 4. As the example is built, we walk through the relevant aspects of the UI, in terms of how it is used to build the example * Creating attributes, Items, tags, and assets * Filtering the list * Using the Quick View and Edit * Basics of using the Asset Editor, which includes selecting and moving/transforming objects in the 3D view\
## Week 2 - Logic and Assets
1. **ThreeKit 3D Basics - 5h - 1h break** 1. Working with Assets * Organizing, Importing/Exporting and the Job system * Naming Conventions 2. Models * The Asset SceneGraph * Nulls and Model References 3. Materials 4. Textures 5. Operators 6. Scenes 7. Cameras 8. Lighting * HDR Environments * Shadow Lights * Realtime Lights 9. Proxies\
2. **ThreeKit Logic - 2.5h - 15mim break** 1. Logic Editor 2. Product Rules vs Asset Rules 3. Product Rules 4. Cover Actions and Conditions typical on the Items 5. Asset Rules 6. Cover specifics of Asset Conditions and Actions 7. Importance of Attribute and Rule order in the current system ## Week 3 - Workflows 1. **Advanced Configuration - 4h - 1h break** 1. Text Personalization - Configurable text input 2. Image Upload 3. Dimensions 4. Modular Configuration 5. Layout Container + Connectors + Physics 6. Parametric Configuration 7. Basic Material Templates\
2. **Performance optimization and troubleshooting - 1.5h** 1. Basic optimization requirements - * Polygon count * Node count * Texture sizes * Mobile vs desktop RAM requirements * Overall download size * Custom Code optimization * Avoiding Area Lights * Number of Materials * Player Size 2. Mesh Optimization options 3. Texture optimization options 4. How the size of the player affects the performance, especially in terms of post process effects 5. Caching 6. Troubleshooting the player load using Chrome Network Tab and Performance Dashboard 3. **AR Workflow - 1h** 1. Android vs iOS 2. Setup 3. Basic AR Limitations ## Week 4 - Automation and Development
1. **Automation Workflows - 3h - 15min break** 1. Catalog Data Automation * Importing data using Apps and Spreadsheets/Data Tables * Setting up for automation using tags and metadata * Custom Apps to automate a sequence of tasks * Webhooks vs Custom Apps * Attribute dependencies * Item Templates 2. Asset Setup Automation * Node Tags * Queries * Model Templates * Material Template\
2. **ThreeKit Development and Front-End Integration - 3h - 15min break** 1. Tokens 2. Player embedding and form-building 3. JavaScript Player API resources * Initializing the Player * Player API * Configurator API * Scene API * Custom Scripts 4. Treble 5. Server/REST API * Basic requirements * Catalog management * Layer API * Export API ## Week 5 - Virtual Photographer 1. **Virtual Photographer - 6h - split over two days in two 3h sessions.** 1. The concept of renders and 2D vs 3D 2. VRay Integration 3. Layering and Compositing 4. The Virtual Photographer Render Dialog page 5. The 2D Player and its options # FAQ # General FAQ ### **When it comes to Threekit, what does it mean to self-maintain? What needs to be maintained?** Self-maintenance encompasses the activities you might undertake with your project after initial implementation and delivery by Threekit. There is no action needed to “keep things running”, but you may want to make modifications to aspects of your implementation, such as: * Adding new products * Changing the options available for existing products * Tweaking visual assets for improved quality or performance * Adding access tokens for embedding configurators on additional domains * Exploring/testing new platform features which you might consider augmenting your implementation with * Etc. These are often small-scale, documented and/or exploratory efforts that don’t necessarily warrant engaging professional services to do for you. ### **What skills or expertise are necessary for a customer to self-maintain Threekit?** The community knowledge base will help admins get their bearings and understand a lot of the basic tasks involved in setting up product configurations and visuals. Beyond that, what skillsets are required depend on what needs to be maintained. For example, if there is ongoing work on visual assets, a 3D artist background would be ideal. And if you need to make frontend integration changes to align with changes you make to your catalog and visual assets in the Threekit platform (ex. adding a new UI component connecting to a new product option, or embedding your existing product configurator in a new website), then you'd want someone with a web development background. ### **If a customer does not want to or feel they can self-maintain, what are their options for making changes or if issues arise in the future?** Threekit has a growing network of implementation partners with the expertise and flexibility to support our customers’ various needs across various engagements. Feel free to browse our partner list at [**https://partners.threekit.com/**](https://partners.threekit.com/), and speak with your Threekit account team for recommendations and introductions. ### **What are important things to consider before/during implementation that may affect ability to self-maintain?** Knowing what will need to be self-maintained, and how, can affect some decision-making during the design and implementation of a project. Often there are things that could be designed/built in several different ways, and a need for self-maintenance can affect that decision. Thus, it is important for the project team to be aware of and discuss the need for self-maintenance and the trade-offs. For an oversimplified example, if you have a product that has an option for its paint color, and you need to easily modify the set of colors available from time to time in the future, you'd want to ensure a design and workflow that makes those changes simple. On the other hand, if you know the set of colors will never change, that might lend itself to a faster, simplified implementation. If you do have plans for self-maintaining post-implementation, you would want to make sure you have sufficient discussions and/or handoff documentation from the implementation team regarding any specific workflows to make your desired changes (ex. "to add another product in a given product category, take the following steps..."). ### **Could you share some general best practices for managing changes in a post-launch environment?** The general development workflow we recommend is to make and test out changes on your preview org ([**https://preview.threekit.com**](https://preview.threekit.com/)). For testing integrations, you can set up an integration environment that points to this preview org, for example to confirm your platform changes are coming through correctly in your website, or to build out new integration code/UI to go along with changes you make in your org. Once happy with your changes, you can initiate an **org migration** to copy those changes over to your production org ([**https://admin-fts.threekit.com**](https://admin-fts.threekit.com/)). Keep in mind that migrations can take some time and updates will incrementally appear in the destination org. You would want to work with your initial implementation team to align on the considerations and workflow for safe and effective migrations into your production environment. This may involve bringing your site down for maintenance until migration and smoke testing are complete, or approaches that involve migrating new copies/versions of catalog items and assets, and only switching your integrations over to pull these new versions once everything is migrated and smoke tested. ### **How does a customer make sure they’re always aware of, and utilizing, the newest features released by Threekit?** Although larger features are delivered on a quarterly release cycle, bug fixes and minor enhancements still occur from time to time throughout the year. To track various feature and bugfix releases, you can refer to release notes - you can check in periodically, review recent changes, and see if anything catches your eye that may benefit your setup or workflow. Upcoming releases and maintenance windows can also be found at our [**Threekit Status**](https://status.threekit.com/) page. Lastly, platform updates are visible in the notifications area of your org (the "?" in the upper right - see image below). You can click on the notification and Select “Product Updates” to see recent platform updates: ### **If a customer is encountering issues and needs technical support, what steps should they take for a smooth and timely resolution?**
David: Depending on the nature of the issue, there are a few resources available: * Issue with platform service availability: [**Threekit Status**](https://status.threekit.com/) * Sign up to receive notifications directly to your inbox regarding platform availability or issues, upcoming maintenance, and new releases. * Problems with the Threekit platform: [**Threekit Support**](https://threekit.force.com/) * Support access is required. If you can’t login and password reset doesn’t work, contact the customer success team at [**success@threekit.com**](mailto:success@threekit.com). * Unsure how to accomplish certain tasks or how to use parts of the platform: Visit the ThreeKit Community site where there are various guides, tutorials, and the platform documentation.\ You also have access to the [Community Forums](https://forum.threekit.com/) to ask specific questions. ### **Customers may want to pull analytics to see how things are going and adjust their strategy - is that possible?** It is in a limited capacity. At the time of this interview, it’s possible to pull player views as well as render usage by heading to the "Analytics" section:
We’ve also been listening to customer feedback and understand customers want more. Threekit is looking to provide detailed self-service metrics in the coming releases. We encourage you to keep an eye out for the latest product release info in your inbox and in the **Threekit Community**. # Threekit Glossary [#](https://community.threekit.com/hc/en-us/articles/4405626000155-Threekit-Glossary#h_01FDT1XPHB58E1T25PQ2QZYXS9) [A](https://community.threekit.com/hc/en-us/articles/4405626000155-Threekit-Glossary#a) [B](https://community.threekit.com/hc/en-us/articles/4405626000155-Threekit-Glossary#b) [C](https://community.threekit.com/hc/en-us/articles/4405626000155-Threekit-Glossary#c) [D](https://community.threekit.com/hc/en-us/articles/4405626000155-Threekit-Glossary#d) [E](https://community.threekit.com/hc/en-us/articles/4405626000155-Threekit-Glossary#h_01FDT1ZBSHHNRD6SSWTQNP5057) [F](https://community.threekit.com/hc/en-us/articles/4405626000155-Threekit-Glossary#f) [G](https://community.threekit.com/hc/en-us/articles/4405626000155-Threekit-Glossary#g) [H](https://community.threekit.com/hc/en-us/articles/4405626000155-Threekit-Glossary#h) [I](https://community.threekit.com/hc/en-us/articles/4405626000155-Threekit-Glossary#i) [J](https://community.threekit.com/hc/en-us/articles/4405626000155-Threekit-Glossary#j) [K](https://community.threekit.com/hc/en-us/articles/4405626000155-Threekit-Glossary#k) [L](https://community.threekit.com/hc/en-us/articles/4405626000155-Threekit-Glossary#l) [M](https://community.threekit.com/hc/en-us/articles/4405626000155-Threekit-Glossary#m) [N](https://community.threekit.com/hc/en-us/articles/4405626000155-Threekit-Glossary#N) [O](https://community.threekit.com/hc/en-us/articles/4405626000155-Threekit-Glossary#o) [P](https://community.threekit.com/hc/en-us/articles/4405626000155-Threekit-Glossary#p) [Q](https://community.threekit.com/hc/en-us/articles/4405626000155-Threekit-Glossary#q) [R](https://community.threekit.com/hc/en-us/articles/4405626000155-Threekit-Glossary#r) [S](https://community.threekit.com/hc/en-us/articles/4405626000155-Threekit-Glossary#s) [T](https://community.threekit.com/hc/en-us/articles/4405626000155-Threekit-Glossary#t) [U](https://community.threekit.com/hc/en-us/articles/4405626000155-Threekit-Glossary#u) [V](https://community.threekit.com/hc/en-us/articles/4405626000155-Threekit-Glossary#v) [W](https://community.threekit.com/hc/en-us/articles/4405626000155-Threekit-Glossary#w) [X](https://community.threekit.com/hc/en-us/articles/4405626000155-Threekit-Glossary#x) [Y](https://community.threekit.com/hc/en-us/articles/4405626000155-Threekit-Glossary#y) [Z](https://community.threekit.com/hc/en-us/articles/4405626000155-Threekit-Glossary#z) [Click Here for 3D and Graphics Glossary](https://community.threekit.com/hc/en-us/articles/4405634442779) ### \# **360 Render** Render that spins usually 12 frames. Usually a whitesweep. \ **3D** In Threekit, 3D images refer to 3-dimensional models displayed through the web browser in predetermined settings (**stages**).\ For image overlay on a live camera view, see **AR**. ### A **Aliasing** The term used to describe a rendering result of edges looking jagged instead of smooth or a moirĂ© pattern. **Alpha map (Grayscale)** A texture asset that defines the transparency of pixels. Threekit platform calls this an Opacity Map. **Ambient occlusion map (Grayscale)** Ambient occlusion map is a predefined texture that determines how much ambient light a surface will receive, creating a shadowing effect. For example, underneath a sofa will be much darker than the top of the sofa. **Animation** An animation is a sequence of movements of either models, lights, or cameras over time. Animations can be used in real-time in response to user triggers, can be preset, or can be rendered as a series of images and then turned into a video clip. Our software supports the creation of animations. Examples of animations could be a product explode, a car door opening, a camera movement. **API (Application Programming Interface)** Code used for passing data between two software applications with different programatic needs. **AR (Augmented Reality)** Images generated to be overlayed "inside" a real-world environment by utilizing a hand held or head mounted device with a live camera image. **Aspect Ratio** The ratio of the width and height of the viewport, image or render. **Assets** All the component pieces used to generate or define graphical properties of visual images. These can be from outside sources or created in the Threekit Platform. Currently supported assets are: Model, Material, Texture, Item, Upload, Vector and LUT. **Attributes** Represent the configurable qualities of a Product or Asset. **Axis** An axis is one of the primary directions used to define the coordinate system. An axis describes the position of objects in 3D space along one of three cardinal directions, which are X, Y and Z. The Threekit platform uses a Y-Up axes system. ### B **Baking** The mechanism of computing a time-consuming calculation and transferring details into a texture asset. A way to improve efficiency and performance. **Bump maps (Grayscale)** Bump maps are grayscale maps that help define depth of surface. The pixels of the texture influence the height of the surface normals of an object without modifying its geometry. ### C \ **Canvas Operators** Act as a layering system on top of the Texture asset. **Camera** A light measuring device modeled on physical real-world cameras. Our virtual cameras have position, orientation as well as other properties like film size, aperture, and focal length. We can simulate any real world camera effect accurately. **Catalog** A list containing all Products and their building blocks, reflecting the structure of the Product Catalog and its supporting bill of materials. **Clipping planes Near & Far** Clipping planes are imaginary planes that are always perpendicular to each other and cut away parts of objects, surfaces and structures. Clipping planes improve performance by limiting the area that the camera evaluates and renders while working. **Clone** Creates an exact copy of the item in the catalog. **Composite**\ Allow for segmentation of a product to make the rendering process more efficient **Configurable Render** Render that has a piece that is configurable and changes by selection. Typically one angle, or combined with 360. **Configurator** The interface where users select design options to be rendered in the player. ### D **Diffuse Maps (Color)** The diffuse map contains the color information of the surface but its missing reflectance values like the base color map in metal/roughness workflow. The raw metal in diffuse map will be black as metal doesn’t have a diffuse color. **Displacement Maps (Grayscale)** Displacement are similar to bump maps that store height information but also can modify and displace actual geometry when rendering which can modify the silhouette also. (Not available on the platform) ### E **Edge** The side of a polygon. An edge connects two vertices. An edge is also the border between two adjacent polygons. ### F **Face** In the context of computer graphics, a face is often realized as a single polygon. A polygon mesh is composed of a series of faces. For example, cube is composed of 6 faces, one for each side. A face is usually flat, but not always. **Field of View ( FOV )** Field of view is the extent of the observable scene through the camera. It can be horizontal or vertical FOV. The FOV changes based on aspect ratio and render resolution. **Focal Length** The focal length of a lens is the distance from the center of the lens to the film plane. The focal length is used to control angle of view. Increased focal length zooms in and increases the size of the objects and vice versa. The focal length of the camera is measured in mm. ### G **Glossiness Map** Glossiness map is that opposite of roughness map. Glossiness map describes if the surface is smooth or rough. White represents smooth surface and blakc represents rough surface. ### H **Height maps (Grayscale)** Height maps are used to deform and elevate surface geometry, which can create large bumps and protrusions without changing the silhouette of the model. (Not available on the platform) ### I **Interactive 3D** Interactive 3D occurs when software renders a new image 30 times or more per second in response to user feedback. This occurs when we create an interactive 3D product display in a web page, or when using an AR or VR experience. These types of displays are responsive and interactive. **Item** Represent each variable component or product in the catalog. ### J ### K \ **Keywords** Used externally for such things as Search-Engine Optimization (SEO). ### L \ **Layers** Individual components of an image stacked on top of each other during rendering to produce a complete image with lower processing requirements. **Light** A light in computer graphics is an entity that has a location and emits light energy into the virtual world. This light energy then interacts with the materials on models in the scene and eventually makes its way to the camera where it is captured. **Lifestyle Render** An image that showcases a product inside a home, office or outdoor environment. ### M \ **Material** A material in computer graphics refers to the properties on the surface of a model that determine how it interacts with light. It does not refer to the shape of the model. Birch wood, or brushed aluminum, or red glazed ceramic are examples of materials in computer graphics. **Material Parameters** In order to define how light interacts with materials, there are a series of material parameters that need to be specified. These are often specified by 3D artists that understand how to quantify physical materials into these parameters. It is relatively technical. Example parameters are roughness, metalness, albedo, clear coat, transparency, sheen, normal map. **Meshes** Define the geometric shape used to render the product's structure and texture. **Metadata** Non-end user information about an item which may be used internally for configuration or transferred externally. **Metallic (Grayscale)** Metallic maps are used to define which areas are raw metal. White denoting metallic surface and black representing non metallic surfaces. **Models** The digital representation of a shape, composed of edges, faces, and vertices. ### N \ **Nodes** Constituent parts of a model in the 3D assets editor. **Normal maps (Color)** Normal maps are color maps that provide more detailed surface texture than bump maps as they can also represent height and curvature per pixel of the surface. ### O **Orthographic Camera** The scene is represented in two dimensional manner when viewing through this camera. ### P **Physically Based Rendering (PBR) or Physically Based Shading (PBS)** A collection rendering and shading technique that represents or closely matches how light interacts with objects in the physical world. Advantages of using these techniques PBR reduces a lot of guesswork when creating materials, since algorithms that drive these techniques are based on physically accurate formulas. PBR makes it easier to create realistic materials. All the assets made with PBR workflow look accurate in all lighting conditions. Assets remain consistent between artists and teams. There are two PBR workflows : \* Metal / Roughness Workflow \* Specular / Glossiness Workflow **Perspective Camera** The perspective view simulates what your scene would like from a camera’s point of view. The scene is represented in three-dimensional manner when viewing through this camera. \ **Player**\ The segment of software used to display images and configuration options to end users. **Polygon** A polygon is a realization of a face. A polygon is a closed flat plane with 3 or more sides. A single polygon is referred to as a face. A polygon is always flat and never curved. Also named a **Face.** **Polygon Mesh** Often abbreviated to just polymesh or mesh. A polymesh is a surface created by a series of connected polygons. These shapes are hollow on the inside like a balloon. Poly meshes are a form of model. **Product** Any item in the catalog representing a real-world product or design ready to be displayed to users. ### Q ### R \ **Renders** The final images (2D, 3D, or AR) generated by Threekit software. **Roughness (Grayscale)** The map basically defines if a surface is smooth or rough, black representing smooth and white representing rough surfaces. This is done through control over the sharpness of the reflections. This map represents surface irregularities. **Rules** Used to control visiblity and set default values. ### S \ **Scene** A predetermined background/environment to place the item into for generating images. The default stage in Threekit is "whitesweep." **Scene Graph** The scene graph refers to the arrangement of the models, lights, and camera in the scene. These components are conceptually organized into a hierarchy that sort of mimics how things are arranged in reality. For example a desk model is placed on the floor. And then a vase model is placed on the desk. This arrangement of placement is the scene graph. **Silhouette shots (“silos”)** Images containing only the desired product, typically on a white background. **Specular** The specular map defines the reflectance values of metal and non metallic surfaces. **Stage** A stage is the background, lighting, and camera placement of a scene behind the product or focus of the scene. The creation of a professional looking stage is key to creating great results. It takes a photographer’s eye to create the best stages that make a product look amazing. ### T **Tags** Used to organize Catalog Items in line with the architecture of a given Product Catalog. **Texture** Image files are most commonly used as maps within the texturing pipeline, or as environment maps to light a scene. **Token** A piece of code used to validate authorized access between software systems to allow data transfer between them. **Transform** Properties manipulated to change the orientation of the viewable object. **Transparency maps (Grayscale)** Transparency maps, also known as opacity maps, these maps can be used to target specific sections of the asset or used for alpha blending. For example : grass, fire, smoke, water or decals etc. ### U ### V **Vector Displacement maps (Color)** Vector displacement is an extension of height map but can transform or deform geometry in any axis. (Not available on the platform) \ **Vertex** The corner of a polygon. In order to mathematically define a polygon, you first have to define the positions of its corners, its vertices. Thus a polygon mesh has a list of vertices that are the corners of all of its constituent polygons. **Virtual Photography** Prerendered high quality 2D images. **Visual Assets** All the component pieces used to generate visual images. ### W **WebGL** Realtime rendering (The 3d in the browser we see. The "I just want to see it spin." One asset needed.) **Whitesweep Render** Render with white background or simple floor shadow. Can be called an outline also. ### X ### Y ### Z # What are the different types of Visualization? We offer "virtual photography" (which is mass production of images by computers), "interactive 3D", "VR" and "AR" solutions. ### Virtual Photography Virtual photography is the process of creating images that look real but they are made completely by computer graphics via the act of rendering. We use our Hollywood Visual Effects experience in order to make perfect looking images for our clients. **Value Proposition:** Cheaper than real photography by a factor of 1000x.\ Prototyping - creating images prior to the manufacture of the actual products.\ Fidelity of virtual photos is high, looks even better than reality. “Virtual photography” results can be perfect because we create these images ahead of time, utilizing as much computer power as necessary. Virtual photos are also easier to adopt by ecommerce sellers because they are already used to putting images on their websites. We give them the ability to have images for every possible combination, which was not financially feasible in the past. **Goes Great with Augmented Reality** Virtual Photography is optimally combined with Augmented Reality. Thus, you have beautiful pictures of the highest quality on the website and then you can jump into an in-room experience with augmented reality. **Limitations** Because of the pre-rendered nature of Virtual Photography, not all forms of personalization or extreme configurability can be achieved, such as room planning by arranging multiple pieces of configurable furniture together. If the customer requires this type of configuration experience, we recommend using Interactive 3D instead because it dynamically generates the images live, thus it is more flexible. ### Interactive 3D Interactive 3D means when there is a 3D item rendering in the webpage with which you can interact. For example, there is an "interactive 3D" watch [a bit down this page](https://www.threekit.com/), try moving it around. Interactive 3D in a web page is made possible by a technology called WebGL. Interactive 3D is a form of computer graphics and the process of making each image is called rendering. Interactive 3D, because it has to generate a series of images per second on the consumer device, cannot be quite as high fidelity as the “virtual photography” results. **Great for Personalization and Room Planning** Interactive 3D is great when you want to create a completely personal and unique result. You can add personal touches and they show up instantly with the live interactive 3D rendering. If you are room planning, such as arranging multiple pieces of furniture in a room, interactive 3D lets you see the results immediately. **Limitations** There are scene complexity limits imposed on interactive 3D because all of the 3D data has to be downloaded to the client device. This data is necessarily larger than a final image from our “virtual photography” solution. ### Augmented Reality (AR) Augmented reality (AR) is when you use your camera and see the world with some additions like glasses or furniture layered on top. The layering on top process is called "augmenting", thus "augmented reality." Augmented reality is easy to adopt because: 1. It works on just about any smartphone. 2. Google Android and Apple iOS now come with it built in. 3. You are not isolating yourself from everyone else. Combining Augmented Reality with Virtual Photography is often the best approach. This allows for perfect visuals on the webpage, and the ability to see the object in a room. Augmented Reality, like Interactive 3D, has more limits on it than “virtual photography” because it has to be downloaded to a client device (which can take time) and rendered in real-time (which imposes limitations of visual fidelity and complexity.) Regardless, individual items can still be of sufficient quality to be impressive to a client. **Great for Furniture** The easiest and most value use of augmented reality at the moment is furniture. Augmented reality is perfect to figure out if your new sofa will fit in your living room and look great against your existing wall paint and carpet. **Games** The first mainstream successful AR game was Pokemon Go. **Virtual Try Ons** The emerging use for augmented reality is trying on things like makeup, jewelry, glasses, hats and soon clothing. These are more challenging than just putting something on the floor, but it is growing with some niches already seeing widespread adoption. In the makeup industry, there is already a very dominant player, YouCam, with more than 100 million app installs and partnerships with many different makeup companies. There are many in-store deployments of [the technology](https://www.businesswire.com/news/home/20190301005008/en/YouCam-Introduces-In-Store-AR-Try-on-Solution-Beauty). **Interesting Fact: USDZ is Inefficient** Apple has adopted Pixar’s USDZ format for its AR efforts. While USDZ is a great format and well designed, it isn’t intended for fast transfer over the internet. Rather it is intended for use inside of an animation or visual effects studio where quality is paramount and file sizes / transfer times do not matter. Because it favors visual quality over size, USDZ files tend on average to be larger than glTF file sizes, the competing AR format. It was a strategic mistake on Apple’s part to adopt USDZ. Unfortunately, the USDZ file is the only format supported for native AR experience on iOS thus we have to use it. ### Virtual Reality (VR) Virtual reality is when you put on goggles and you no longer see any of the real world. You are in a "virtual" space that is not reality. **Limitations** Virtual reality has not been that successful for a number of reasons: 1. most people do not currently have headsets/goggles. VR requires specialized equipment that is hard to carry around. 2. to get around that some companies that provide VR goggles in their stores. But people do not like putting things on their faces that others have put on their faces -- it feels unhygienic. 3. Some people do not want to put on the goggles because it can mess up foundation/makeup. 4. The VR user, once they have on the goggles, is isolated from the world around them, and this loss of control or potential for not being aware of one's true surrounds, especially in public is prohibitive to adoption. **Will Oculus Quest allow VR to go Mainstream?** There is a brand new VR headset released just in May called the Oculus Quest. It is uniquely cost effective and convenient because it utilizes inside out tracking and does not require a companion computer to use. It is quite impressive from a technology standpoint. It may be a game changer than allows for VR to go mainstream. But it is currently too early to tell. We should have sales numbers and adoption trend lines by the end of 2019 to know if the Oculus Quest changes things. # What are Material Scans? Material scans require a specific method of scanning, using specialized equipment. This scanning process outputs a series of different texture files dedicated to various material properties. These are necessary in order to create photorealistic CG materials that look as close as possible to their real counterpart. In the example below, this suit lining fabric scan is expressed in terms of the following set of texture maps:\ \ **DIFFUSE ROUGHNESS METALNESS SPECULARITY NORMALS** ![](/files/pxn0b5JZFVX4vpf97Iuw) ![](/files/8YkkU5RHPJNOmLZkVsJA) Together, these maps help form the full lining material for this particular color. In the example below, you can see how these different maps come together by connecting them to the corresponding properties on the material template. In addition to the texture maps, the scanning process should also output a text file that represents the tiling information for these maps. In the example below, the text file gives us the horizontal and vertical tiling expressed in terms of centimeters. ![](/files/wzHORxQbklnhauURGTWv) Once the materials have been scanned, they will need to be prepared for tiling. In the example above, the textures were properly prepared so that the end result does not show any visible seams in the tiling. In the example below you can see how an improperly tiled version might look:\
All of this information needs to be prepared properly, with a consistent naming convention, prior to upload on ThreeKit. The specific project requirements will dictate the various maps, texture resolutions and tiling information needed. The ThreeKit Webgl and Vray materials can accommodate a variety of mapped properties, but the ones listed above should be considered as the baseline starting point. # What is Layered Rendering? Layered Rendering provides a means to limit combinatorial explosion for highly configurable products with many options. Great, what is combinatorial explosion? When products are highly configurable, containing a number of unique combinations of configurable attributes upwards of several thousand, or even into the millions, it is not practical (or scaleable) to retain (and maintain) an equivalent number of renders. For example, here we have a sofa.
This sofa is offered in 6 colors, the Accent Pillows are offered in 6 colors, there are 5 leg types, and an optional skirt. In sum, there are 360 unique combinations of the 4 attributes listed. Without layered rendering, it would be necessary to retain 360 unique renders to serve up on-demand, based on a given customer's configuration. However, Layered Rendering provides a path to limiting the number of required renders. Separating the product on the basis of its configurable, component parts allows for defining said layers. In this case, the model is decomposed into the 4 layers below. ![](/files/TbelwQvXhua1sppvuqrV) Now the options for each of these layers can be rendered independently, decreasing the number of required renders from 360 to just 23. #### Some Assembly Required Once individual renders exist, the [Layers Service](https://community.threekit.com/hc/en-us/articles/4405859546395) retrieves the requested images, per the configuration, and the final render is assembled and produced. ![](/files/ljDTWYucrLdYZSuDJfTS) #### Re-Configure, Retain Performance In the context of a live 2D configuration experience when the Threekit Player is initialized, the product retains a default configuration. When the shopper changes an attribute to a different option, all elements of the model not affected by that change will remain static. This allows for very performant configuration experiences. # Trio Talks # October 20, 2022 - Augmented Reality {% embed url="" %} # September 15, 2022 - Order of Operations {% embed url="" %} # August 18, 2022 - Performance & Model Optimization {% embed url="" %} # July 21, 2022 - Collision Detection & Drag and Drop {% embed url="" %} # June 16, 2022 - Virtual Photography {% embed url="" %} # May 2022: Conquering APIs: 10 Useful API Options You May Not Know About {% embed url="" %} # April 21, 2022: Adding Bling: Falloff, Glass, Iridescence, Bloom {% embed url="" %} # March 17, 2022 - Treble {% embed url="" %} # January 20, 2022 - Modular Configuration {% embed url="" %} # General Apps This is a set of web applications that help to fill in gaps with the standard platform functionality. They can be added and used within your projects as needed. ## Installation These general apps can be added to your projects using the apps section inside the project org. Simply click the **Install App** button as indicated, and enter your desired name, along with the following URL: #### ****
{% hint style="info" %} Support for the functionality of these apps is provided only through the Community Forums in the [General Apps category](https://forum.threekit.com/c/tools/14). {% endhint %} ## Apps List ### [Republish Items](#republish-items) Republish the catalog items or publish them all with a single click, avoiding going through them page by page using the platform UI. ### [Apply Metadata Pattern](/tools/general-apps/apply-metadata-pattern) Automatically apply custom metadata to uploaded assets, with a given pattern based on the file names. ### [Render to vrscene](#render-to-vrscene) Retrieve the vrscene output for a given Vray render. ### [Filter Saved Configurations](#filter-saved-configurations) Search and filter through the Saved Configurations page, with a statistics summary and spreadsheet output. ### [Performance Dashboard](/tools/general-apps/performance-dashboard) Analyze the load performance of web pages with an embedded Threekit player. ## Writing Your Own Custom Apps The Threekit platform offers a comprehensive [REST API](https://developer.threekit.com/reference/rest-api), which enables users to interact with the assets and certain features. You can make use of these API endpoints to write your own web applications, similar to the examples shown here. Visit the [Custom Apps Guide](https://developer.threekit.com/docs/custom-apps) if you would like more information about writing these custom apps for your projects. # Republish Items Republish the catalog items or publish them all with a single click, avoiding going through them page by page using the platform UI. The platform UI does not currently allow us to apply changes in bulk to the entire catalog or search results across multiple pages. You can therefore use this app to publish all items or republish the already published items in the catalog. ## Installation To install this app please follow the instructions as directed in the [Custom Apps instructions](/tools/general-apps). ## Usage
Pressing the **PUBLISH** button will publish ALL of the items in the catalog. Pressing the **REPUBLISH ONLY** button will republish only the items that are currently already published, ignoring the items in Draft mode. {% hint style="info" %} Please note that due to random network glitches on the ThreeKit platform, sometimes the attempt to publish or republish some items may fail. A notification will pop up if this happens. You can retry the process if this occurs. {% endhint %} # Apply Metadata Pattern Automatically apply custom metadata to uploaded assets, with a given pattern based on the file names. ## Installation To install this app please follow the instructions as directed in the [Custom Apps instructions](/tools/general-apps). {% hint style="info" %} Support for the functionality of this app is only provided through the Community Forums in the [Tools category](https://forum.threekit.com/c/tools/14). {% endhint %} ## **Usage**

Apply Metadata Pattern Steps

### STEP 1 Read the Usage instructions at the top of the app page ### STEP 2 Make sure you tag your newly uploaded assets with a unique tag that can be used for this app. Enter the tag in the app and choose the separator. ### STEP 3 Define your groupings, metadata names, and metadata value styling. ### STEP 4 Save the setup as a template for later use with other uploads that follow the same convention. ### STEP 5 Apply the metadata changes to the assets. # Render to vrscene Retrieve the vrscene output for a given Vray render. This app enables users to troubleshoot Vray render issues more easily, by generating the vrscene file for a given render job. This vrscene file is the result of all vrscene elements that combine through the configuration setup to generate the final image. Inspecting this final vrscene file may provide some insight into what could have caused the render to look different than expected. ## Installation To install this app please follow the instructions as directed in the [General Apps instructions](/tools/general-apps). ## Usage
You need to have an existing render job first, because this app needs to read the configuration options from that render task in order to generate a vrscene for the exact same configuration options. It is not necessary for the existing render job to have completed successfully or at all. 1. A render taskId is required in order to generate the vrscene for that render. 2. The task Id can be found at the end of the URL for that particular render task, after /tasks/\ For example, if the URL of the render task is `https://preview.threekit.com/o/andreise/branches/main/jobs/d4848545-8c23-4733-ae9a-0f83bad85347/tasks/cf0a8d90-77af-44aa-a052-eb4680437b3a` the render task ID will be `cf0a8d90-77af-44aa-a052-eb4680437b3a` 3. On pressing the Export Vrscene button, a new job will be generated in the org. Upon completion, this job's output will be the vrscene file. This job is not re-attempt to render the original image. 4. A link will be provided to the render task. Please check it regularly until the platform finishes the task and provides the result file. # Filter Saved Configurations Search and filter through the Saved Configurations page, with a statistics summary and spreadsheet output. This app allows you to search through the Saved Configurations and receive a summary of the results in the UI along with a spreadsheet of filtered entries through a download link. ## Installation To install this app please follow the instructions as directed in the [Custom Apps instructions](/tools/general-apps). ## Usage
1. In order to initiate a search, you must first specify a range of dates. 2. Initiating a search without any of the search fields filled out will result in a general list of all saved configurations found within the given dates. 3. Filling out the Product field will filter the results to only the saved configurations for that specific product. 4. Attribute and Metadata fields are also optional and can be used to further filter the results for a given Product, or for all saved configurations if no Product is specified 1. The Attribute field refers to the variant options of the saved configurations. 2. You can search only for entries that contain the given attribute when no value is entered 3. The metadata field refers specifically to the metadata of the saved configurations, instead of product or product option metadata {% hint style="warning" %} Performing a search through hundreds of thousands or millions of saved configurations may take minutes or hours, depending on the date range queried. {% endhint %} ## Results
* The results will display a summary of statistics for the search, including the date range provided. * In case where all dates were searched, the results will show the first and last date of the entries found. * The entries for Unique Products and Unique Variants is dependent on the search criteria. For example, if a Product ID was entered, then only that product will show up in the Unique Products results, and only variants for that Product will show in the Unique Variants and Top Variants lists. * Each entry under the Top Products and Top Variants column includes a link to the product. For the variants, this is a link to the product and configuration listed. {% hint style="warning" %} Please note that the downloadable spreadsheet will be limited to a total of 10,000 entries, to avoid performance issues. {% endhint %} # Performance Dashboard Test embedded Threekit players for performance issues and metrics. This app allows users to test a webpage with an embedded Threekit player, for performance issues. If any issues are found, the results will display a set of recommendations. In addition to this, you can also get a set of very useful metrics about the performance of the page and the player. {% hint style="info" %} The app is currently designed to analyze only the initial page load. Please avoid clicking on buttons or changing the configuration past the initial page load, as the additional requests will skew the results. {% endhint %} {% embed url="" %} Performance Dashboard Usage {% endembed %} ## Installation This particular app is available either in standalone mode from the following URL: Or available directly through the [General Apps dashboard](/tools/general-apps). ## Usage ### Requirements The Performance Analysis should only be done on a webpage with the Threekit player embedded. This means that you shouldn't use URLs of items or assets directly from the platform, as it would significantly skew the metrics.\ \ If you do not yet have a staging site with the player embedded, then you can make use of the generic Threekit viewer available through this link: In order to set up a page using this viewer, you will need to enter the following key pieces of information: 1. assetId of the Item you wish to embed. 2. A public token from your org for pointing to the `https://exocortex.github.io` domain. 3. stageId if your Item does not have a default stage, or if you want to embed it with a different stage than its default stage. 4. Environment - choose between `preview`, `admin-fts`, etc. ### Workflow **Required Steps:** 1. **Collect a HAR file:** Use your browser's developer tools to generate a HAR file once the page has finished loading. The HAR file should contain all the requests made by the page and the Threekit player. 2. **Upload the HAR file:** Click the "Select File" button and select the HAR file you generated. 3. **Process the HAR file:** Click the "Process" button to analyze the file and get the performance metrics. **Steps to generate the HAR file:** 1. **Open Developer Tools:** Press F12 or right-click anywhere on the page and select "Inspect". 2. **Open Network Tab:** In the developer tools, go to the "Network" tab. 3. **Disable Cache:** Make sure the "Disable cache" option is checked. This will ensure that all requests are captured (For a cleaner recording, leave the **Disable Cache unchecked**, and instead **Right-Click** on the browser Reload button and choose **Empty Cache and Hard Reload**) 4. **Step 1 - Start Recording:** Click the "Record" button to start recording network activity and then refresh the page (can use Ctrl+R or F5) 5. **Step 2 - Clear Filters:** Once the page finished loading, ensure you clear any filters applied to the network tab, as only the filtered requests will be saved in the HAR file. 6. **Step 3 - Save the HAR file:** Click the **Export HAR** button to save the file.
{% hint style="warning" %} If the Threekit player is hidden behind a button click, then either record the whole page load from the beginning then click the button to reveal the player, or clear the request history and record only from the moment the Customize button is clicked. Keep in mind that RAM usage will count the whole entire page contents. {% endhint %} ## Metrics Here is a list of the metrics that will be provided: * **Total Page Load Time**: Total Page Load Time calculated from first and last request in the HAR file. * **Page Only Load Time**: Total time taken by the initial page-only elements to load, excluding the requests made by the player. * **Player Load Time**: Total time taken by the ThreeKit player to initialize, from first request until the (Player Is Loaded) event. * **Player Bundle Start Time**: Request start time for the threekit player bundles. * **Player Initialization Start Time**: The time when the player is initialized relative to the page start time. * **Total Network Requests**: Total number of requests stored in the HAR file. * **Player Total Requests**: Total number of requests made to the threekit API. These can be made either by the player during initialization or by fetch requests. Does not include the player bundle requests. * **Total Page Transferred File Size**: Total transfer size of all requests in the HAR file. * **Total Player Transferred File Size**: Total transfer size of all requests made to the threekit domain. * **Static Publish Enabled**: Indicator of whether the Static Publish feature is enabled in the org where the threekit player receives requests. * **Unpublished Items**: Threekit Items that are still in Draft mode instead of Published. * **Unchached Requests**: Total number of threekit requests that are uncached. * **Significant Processing Gaps**: Total number of processing gaps during the page load that exceed 200 ms. These are gaps where no requests are being handled. * **Estimated RAM Required**: A rough estimate of the total memory required to load the page. This is important especially for mobile devices. * **Threekit Item Requests**: Total number of Catalog Item requests made by the player. * **Threekit CAS Requests**: Total number of CAS service requests made by the player, representing queries made to the threekit database for supporting information like attributes and metadata. * **Threekit Mesh Requests**: Total number of scene graph node requests made by the player, which includes meshes but also group nodes. * **Threekit Texture Requests**: Total number of texture requests made by the player. * **Threekit Thumbnail Image Requests**: Total number of image requests made to the threekit file service, separate from the player requests. * **Threekit Datatable Queries**: Total number of datatable queries made by logic or custom scripts. * **Threekit Other Queries**: Total number of other requests made to the threekit domain, which includes asset queries based on metadata, analytics, translations, and pricing requests. * **Requests with Issues**: Requests with large file sizes or long processing times * **Page Image Requests**: Image file requests made by the web page, independent of Threekit ## Limitations Since the app is only able to analyze the browser requests saved inside the HAR file, there are several limitations in terms of data that won't be considered in the analysis:
1. Total page memory usage is currently unavailable. The current RAM usage is only able to estimate it based on texture and image load for the page that shows up in the requests. This means that scripts, Threekit canvases, shadow maps, etc loaded by the player will not be considered in the calculation. 2. Configuration changes cannot currently be analyzed as part of a HAR file including the initial load. They would need to be recorded separately, as one configuration change per HAR file. This can be done by clearing the Network requests in the browser, performing a configuration change, then saving the HAR file for the new requests that show up in the list. 3. There is no feature currently to save the analysis, but you can always save the HAR file and re-analyze it at any point. # Asset History View a History of changes to a given asset, and restore to a previous commit. ## Installation To install this app please follow the instructions as directed in the [Custom Apps instructions](/tools/general-apps). ## Usage Start by choosing the asset you want to view the history of.
### Loading History Clicking the Load History button will load and display the most recent 20 commits. These commits have been created each time an asset was modified through the Save or Autosave button in the platform to save the edits. The history will be displayed in the order of the most recent commit to the oldest. Each commit will show a set of important details: * A checkbox to select the commit for a restore action * A colored circle to indicate the commit belongs to a branch of other commits that share the same color. The earliest commit in a branch will also have a message indicating the commit ID of the restore point used to initiate that branch. * The date and time the commit was created * The commit ID * The author of the commit * A set of basic changes made in the commit, listing the objects that were affected ### Restoring to a Commit Clicking the Restore button will restore the asset to the selected commit. This will restore the asset to the state it was in at the time of the selected commit. Performing a restore will set the Head Commit to be the commit that was chosen as the restore point, and will give the opportunity to start a new branch of changes. {% hint style="warning" %} **Any commits after the restored commit will be retained and marked as grey when the history is reloaded. These can be restored back at any time. They greyed out state simply helps to indicate which commit represents the current state of the asset.** {% endhint %} ### Commit Branches Making new saves to the asset after a restore will create new commits, which will start a new branch of changes. Every new branch will be marked with a different circle color in the history. The new saves after a restore point will also move the current state of the asset back to the top of the history, to the most recent commit.
# Want to give us feedback on the Threekit Community? Click Here! {% embed url="" %} # Platform Documentation This section contains the technical documentation for the platform features that are available directly through the platform UI.
GuidesBack to the Guides section/files/E3g5U88oES2l9pqcUMSO/spaces/8N1IA5a0lqRClKT5eQQ7
Release NotesSwitch to the Release Notes section/files/T80o5erd9xS2tv8efujo/spaces/Bdhnsg0wyBQ1RrM9wHPt
Platform Landing PageOverview of the platform landing page UI/files/nbiNSAWudhW7iV5jlWyz/pages/J2IpVjArN1Ap6C5Y7OkZ
## Project Data
BASIC CONCEPTSBuilding blocks of every ThreeKit project/pages/FIVBVpu8du9gGLObttg3
CATALOGStoring Product Data/pages/aspb1CPgRiqfsBYtPWuV
ASSETSWorking with 3D assets/pages/H16GbDuKVV1g0QNwCev8
OPERATORSModifiers to the 3D Assets/pages/PgzzcVa09WtkORaoFRi9
STAGESShareable environments across multiple Items/pages/GzTHPMmHqMmNY2tgeaU1
LOGICBuilding Rules to setup configuration/pages/nLiedb9JfALkzR9Uz4i9
VIRTUAL PHOTOGRAPHYGenerating pre-rendered 2D images/pages/9JWRfMWDPUssBpR1aeDA
AUGMENTED REALITYWorking with AR assets/pages/6ruBB51wOG6YiyzHFWCx
## Org Setup
ADMIN & SECURITYManaging Org Members, Tokens, and Migrations/pages/TknYOCg0F8Eb690FImof
JOBS SYSTEMOverview of the Jobs page/pages/32SWGYp0tk4pHPpuEJnm
ORDERSWorking with Orders and Saved Configurations/pages/lFAhm9p3tVYHzWW5rT2A
PROJECT SETTINGSGlobal settings affecting the entire org/pages/IsE4YwSABA8wOpZRUQJz
# Platform Landing Page Upon logging into Threekit, the user is greeted with the following page: ![](/files/5ZoHsLVI5B4pnfwysVDP) **Threekit Environment** - a visual indicator of which Threekit Environment the user is currently in **Main Navigation Panel** * Product Catalog - contains all Catalog Items including all product and part information * [Catalog Items](/platform-documentation/project-data/catalog/items) - contains a list of all Products, their building blocks, and part information * [Attributes](/platform-documentation/project-data/basic-concepts/attributes) - contains the configurator qualities of a Product * Categories - contains a list of all Categories used in Items * [Tags](/platform-documentation/project-data/basic-concepts/tagging) - contains a list of all tags used in Items and Assets * [Data tables](/platform-documentation/project-data/catalog/data-tables) - contains a list of all Data Tables used * [Assets](/platform-documentation/project-data/assets) - contains a list of all 3D Assets and visual collaterals * [Stages](/platform-documentation/project-data/stages) - contains a list of all Stages * [Renders](/platform-documentation/project-data/virtual-photographer/view-renders) - contains a listing of all Render Jobs * Orders - provides visibility on placed orders from an eCommerce system * [Orders](/platform-documentation/org-setup/orders) - contains purchases/orders from an eCommerce site * [Configurations](/platform-documentation/org-setup/orders/configurations) - contains specific Product configurations captured from a defined user interaction * Apps - * Analytics - contains all Platform-specific metrics * [Player views](/platform-documentation/org-setup/analytics/player-views) - contains a summary of player views * Render usage - contains a summary of render hours used **Settings Panel** * [Organizational Profile](/platform-documentation/org-setup/admin-and-security/org-profile) - contains an overview of the Org profile * [Members](/platform-documentation/org-setup/admin-and-security/users-and-permissions/members) - contains a list of current members and pending invites to the Threekit org, and the ability to add new members * [Features](/platform-documentation/org-setup/project-settings/features) - contains details of the current subscription and available Platform features * Player Settings - * Performance - * [Data Transfer](/platform-documentation/org-setup/admin-and-security/org-migration-data-transfer) - used to migrate all or some of your data between Orgs on the same or different environments * [Languages](/platform-documentation/org-setup/project-settings/languages) - contains a list of language files uploaded to the Platform * [Tokens](/platform-documentation/org-setup/admin-and-security/tokens) - Interface for creating Access tokens used for external system integration * Webhooks - * Pricebooks - * [Jobs](/platform-documentation/org-setup/jobs-system) - contains a listing of all jobs, providing relevant information for all imports, exports, and renders **Organizational Switcher** - contains a list of Recently-accessed orgs and All orgs of which the user is a part **Header Actions** * Job Listing Button - Provides visibility on the status for the most recently-queued jobs and a path to the Jobs tab * Resource Center - contains a list of all Threekit documentation and resources * Knowledge base - search within the Platform knowledge base while remaining inside the Platform * [Product updates](https://threekit.gitbook.io/community/v/release-notes/) - a summary of the latest releases and link to release notes * [Getting started](/getting-started/project-prep/1.-what-should-i-expect-during-onboarding) - a link to a comprehensive guide to your Threekit project implementation * [Support](https://threekit.force.com/) - an external link to the Threekit Support portal where you can submit and view support cases (requires separate invite and login) * [Community](https://forum.threekit.com/) - an external link to the Threekit Forums where a user can ask questions and review documentation * User - provides access to current [User Profile Settings](/platform-documentation/org-setup/admin-and-security/users-and-permissions/user-profile) and Sign-out # Basic Concepts --- [Next Page](/llms-full.txt/1)