NVIDIA RTX™ platform | NVIDIA Developer

<!DOCTYPE html> <html lang='en' class='h-100'> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="YJywQT0Z61wE_qcZyFow-ShSWm_OUXJ1Uio76-CtOMxj5iwGw5eFxWgM6EnTnEilCbIvAxc4W2-PzxhuH9mJ0A" /> <meta name="csp-nonce" /> <title>NVIDIA RTX™ platform | NVIDIA Developer</title> <link rel="canonical" href="https://developer.nvidia.com/rtx"> <link rel="alternate" href="https://developer.nvidia.com/rtx" hreflang="x-default"> <link rel="alternate" href="https://developer.nvidia.com/rtx" hreflang="en-us"> <link rel="alternate" href="https://developer.nvidia.cn/rtx" hreflang="zh-cn"> <meta property="og:site_name" content="NVIDIA Developer"> <meta property="og:title" content="NVIDIA RTX™ platform"> <meta property="og:type" content="website"> <meta property="og:image" content="https://developer.download.nvidia.com/images/og-default.jpg"> <meta property="og:url" content="https://developer.nvidia.com/rtx"> <meta name="twitter:title" content="NVIDIA RTX™ platform"> <meta name="twitter:image" content="https://developer.download.nvidia.com/images/og-default.jpg"> <meta name="twitter:site" content="@NVIDIA"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:creator" content="@NVIDIA"> <link rel="stylesheet" href="https://dirms4qsy6412.cloudfront.net/assets/application-20e4331ce584aa91c3d892a51dfb1df7e8d671c1f40c0359c457c5748972351a.css" media="all" /> <link rel="stylesheet" href="https://dirms4qsy6412.cloudfront.net/assets/one-trust-bea625cf16a072ce5fdb0707a19f2645daf63c05eb1a016db72773eba008fc07.css" /> <script src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js" data-document-language="true" type="text/javascript" charset="UTF-8" data-domain-script="3e2b62ff-7ae7-4ac5-87c8-d5949ecafff5"></script> <script src="https://dirms4qsy6412.cloudfront.net/assets/onetrust-overrides-v2-9d7d1399c432d702a5bf32a31067737e10c123fdbe5ffef8ae83a34cf2d680ee.js"></script> <script> function OptanonWrapper() { let event = new Event('bannerLoaded'); window.dispatchEvent(event); if (window.OnetrustActiveGroups && window.OnetrustActiveGroups.includes("C0002")) { window.DD_RUM && window.DD_RUM.init({ clientToken: 'pub0430c74fae5d2b467bcb8d48b13e5b32', applicationId: '9fc963c7-14e6-403d-bdec-ee671550bb7f', site: 'datadoghq.com', service: 'devzone', env: 'production', version: '', sessionSampleRate: 10, sessionReplaySampleRate: 5, trackUserInteractions: true, trackResources: true, trackLongTasks: true, defaultPrivacyLevel: 'mask-user-input', }); } } </script> <link rel="stylesheet" href="https://dirms4qsy6412.cloudfront.net/assets/devzone3/vars-cd3a0769a3c2f2d9ea6b83ac53ce86bceef4c719e4dbd22ed41d48d01f200901.css" media="all" /> <link rel="stylesheet" href="https://dirms4qsy6412.cloudfront.net/assets/devzone3/old/fonts-910bdb814ac830981904d69eea803431bc3a5b00aac30ffc85d12983c6511741.css" media="all" /> <link rel="stylesheet" href="https://dirms4qsy6412.cloudfront.net/assets/devzone3/old/ballistiq-twitterfeed-61a757e5494e5598582c3610822f4cc0d00c0f1c3d70d478b0004dcebebf2368.css" media="all" /> <link rel="stylesheet" href="https://dirms4qsy6412.cloudfront.net/assets/devzone3/old/application-a780279f5932e2d3fe01da14ba98d5c320956ec365747dfca2719798ce778ae6.css" media="all" /> <link rel="stylesheet" href="https://dirms4qsy6412.cloudfront.net/assets/devzone3/old/embedded/embedded-bde5659f6ab1dd4f9edcf851e8c12fb3c44ed2de1542a3bd9131d207afdb0d7d.css" media="all" /> <link rel="stylesheet" href="https://dirms4qsy6412.cloudfront.net/assets/devzone3/old/overrides-cbc02aeca05448d7c77b2b63dc1faa3f5e58c17afd5afe4a5122591949c5d734.css" media="all" /> <link rel="stylesheet" href="https://dirms4qsy6412.cloudfront.net/assets/devzone3/old/new-styles-37d9681cbab3b14d1c92fc036ceb563d8fc93f75cebcbc61a56cbeddc83154d7.css" media="all" /> <link rel="stylesheet" href="https://dirms4qsy6412.cloudfront.net/assets/feed-aggregator/feed-aggregator-9ace7521871242143cb35fa86d5be702c4dacb409600041fa6a5b14fa2a71dde.css" media="all" /> <link rel="stylesheet" href="https://dirms4qsy6412.cloudfront.net/assets/devzone3/old/bootstrap-glyphicons-fe132ea5867b21620f37b392a53d872fb240e34ad8b477db370b6f867ccd102f.css" media="all" /> <script src="https://dirms4qsy6412.cloudfront.net/assets/horizontal-chart/d3.v4.min-41cfecdf7c41476e805de7afacf4aacdd1a4be6947fbecf95217e947ebc2faf5.js"></script> <script src="https://dirms4qsy6412.cloudfront.net/assets/horizontal-chart/visualize-d-06443fdef48364af6635f0d1d3535da26910671f6f6a680c531eff0e54ed595f.js"></script> <script src="https://dirms4qsy6412.cloudfront.net/assets/devzone3/old/js.cookie.min-bd09df6e81cb21935c4e92d9631a162285611f17c6eaee720cafcc6ddef3f7dc.js"></script> <link rel="stylesheet" href="https://dirms4qsy6412.cloudfront.net/assets/sf-validation/sf-validation-805362e079494cd052f713be5f91a44eb602f545c342f794abbd4a8050c0acb3.css" /> <link rel="stylesheet" href="https://dirms4qsy6412.cloudfront.net/assets/tablefilter/tablefilter-ad35ad42b6d4f1068765cf691a0dcb4214ba7925ea4e28b9a1ce48a0ddb3d489.css" media="all" /> <link rel="stylesheet" href="https://dirms4qsy6412.cloudfront.net/assets/tablefilter/filtered-table-891467932064f1f3e379852c0697e014d6c0f99a6d423b4468e55ae59d159adf.css" media="all" /> <script src="https://assets.adobedtm.com/5d4962a43b79/c1061d2c5e7b/launch-191c2462b890.min.js" data-ot-ignore="true"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://api-prod.nvidia.com/search/nvidia-gallery-widget.js"></script> <script src="https://dirms4qsy6412.cloudfront.net/assets/devzone3/modules/nvidia_editor/nod_widgets-8c38a7d04ed3c3acd9117aa126bf76d7902d3c57c72b76dbf3c281c96ed09975.js"></script> <link rel="icon" type="image/x-icon" href="https://dirms4qsy6412.cloudfront.net/assets/favicon-81bff16cada05fcff11e5711f7e6212bdc2e0a32ee57cd640a8cf66c87a6cbe6.ico" /> </head> <body class='d-flex flex-column h-100' data-theme='devzone3_old'> <div id='header'></div> <div id="wrapper" class="page-rtx" data-id="391"> <div id="content-background" class=""> <div class="separator"></div> <div id="content" class="container"> <div class="row"> <section class="dz3-main-section dz-old-theme node field-name-body"> <a id="main-content"></a> <br> <center> <h1 class="h--large">NVIDIA RTX™ platform</h1> </center> <br> <hr> <div class="row"> <div class="col-md-12"> <p class="p-medium">The NVIDIA RTX platform fuses ray tracing, deep learning and rasterization to fundamentally transform the creative process for content creators and developers through the NVIDIA Turing GPU architecture and support for industry leading tools and APIs.</p> <p class="p-medium">Applications built on the RTX platform bring the power of real-time photorealistic rendering and AI-enhanced graphics, video and image processing, to enable millions of designers and artists to create amazing content in a completely new way.</p> <br> </div> <div class="col-md-6"> <p>The RTX platform provides software APIs and SDKs running on advanced hardware to provide solutions capable of accelerating and enhancing graphics, photos, imaging and video processing. These include:</p> <ul> <li>Ray Tracing (OptiX, Microsoft DXR, Vulkan)</li> <li>AI-Accelerated Features (NGX)</li> <li>Rasterization (Advanced Shaders)</li> <li>Simulation (CUDA 10, PhysX, Flex) </li> <li>Asset Interchange Formats (USD, MDL)</li> </ul> </div> <div class="col-md-6"> <center> <img class="img-responsive" width="100%" src="https://d29g4g2dyqv443.cloudfront.net/sites/default/files/akamai/RTX/images/rtxplatform002.png"> </center> </div> </div> <hr> <br> <center> <h2 class="h--medium">Ray tracing</h2> </center> <br> <br> <p><b>Ray tracing</b>, which has long been used for non-real-time rendering, provides realistic lighting by simulating the physical behavior of light. <a href="https://developer.nvidia.com/discover/ray-tracing">Ray tracing</a> calculates the color of pixels by tracing the path that light would take if it were to travel from the eye of the viewer through the virtual 3D scene. As it traverses the scene, the light may reflect from one object to another (causing reflections), be blocked by objects (causing shadows), or pass through transparent or semi-transparent objects (causing refractions). All of these interactions are combined to produce the final color of a pixel that then displayed on the screen.</p> <p>RTX-capable GPUs include dedicated ray tracing acceleration hardware, use an advanced acceleration structure and implement an entirely new GPU rendering pipeline to enable real-time ray tracing in games and other graphics applications. Ray tracing acceleration is leveraged by developers through NVIDIA OptiX, Microsoft DXR enhanced with NVIDIA ray tracing libraries, and the upcoming Vulkan ray tracing API.</p> <div class="row"> <div class="col-md-4"> <center> <img class="img-responsive" src="https://d29g4g2dyqv443.cloudfront.net/sites/default/files/akamai/RTX/images/RTX_optix_001.png"> </center> </div> <div class="col-md-4"> <center> <img class="img-responsive" src="https://d29g4g2dyqv443.cloudfront.net/sites/default/files/akamai/RTX/images/RTX_msdx_001.png"> </center> </div> <div class="col-md-4"> <center> <img class="img-responsive" src="https://d29g4g2dyqv443.cloudfront.net/sites/default/files/akamai/RTX/images/RTX_vulkan_001.png"> </center> </div> </div> <br> <a class="btn btn-success btn-sm" href="/rtx/raytracing"> Learn more about RTX ray tracing</a> <hr> <br> <center> <h2 class="h--medium">Artificial Intelligence (AI)</h2> </center> <br> <br> <div class="row"> <div class="col-md-2"> <img class="img-responsive" width="80%" src="https://d29g4g2dyqv443.cloudfront.net/sites/default/files/akamai/RTX/images/neuralnetwork.png"> </div> <div class="col-md-10"> <br> <p>The NVIDIA NGX SDK is a new deep learning powered technology stack bringing AI-based features that accelerate and enhance graphics, photos imaging and video processing directly into applications. NVIDIA NGX features utilize Tensor Cores to maximize the efficiency of their operation, and require an RTX-capable GPU. NGX makes it easy for developers to integrate AI features into their application with pre-trained networks. </p> </div> </div> <br> <a class="btn btn-success btn-sm" href="/rtx/ngx"> Learn more about NGX</a> <hr> <br> <center> <h2 class="h--medium">Rasterization</h2> </center> <br> <br> <div class="row"> <div class="col-md-12"> <p>The Turing architecture’s new Streaming Multiprocessor (SM) includes advanced shading technologies, as well as new features designed to accelerate the graphics pipeline.</p> </div> </div> <br>  <div class="row"> <div class="col-md-3"> <br><center> <img class="img-responsive" width="80%" src="https://d29g4g2dyqv443.cloudfront.net/sites/default/files/akamai/RTX/images/holodeckmeshlets1.png">  </center> </div> <div class="col-md-9"> <h4 class="h--smaller">Mesh Shading</h4> <p>Mesh shading advances NVIDIA’s geometry processing architecture by offering a new shader model for the vertex, tessellation, and geometry shading stages of the graphics pipeline, supporting more flexible and efficient approaches for computation of geometry. This more flexible model makes it possible, for example, to support an order of magnitude more objects per scene, by moving the key performance bottleneck of object list processing off the CPU and into highly parallel GPU mesh shading programs. Mesh shading also enables new algorithms for advanced geometric synthesis and object LOD management.</p> <a class="btn btn-success btn-sm" target="default" href="https://devblogs.nvidia.com/introduction-turing-mesh-shaders/">Learn More</a> </div> </div> <br> <div class="row"> <div class="col-md-3"> <br><center> <img class="img-responsive" width="80%" src="https://d29g4g2dyqv443.cloudfront.net/sites/default/files/akamai/RTX/images/vrs002.png">  </center> </div> <div class="col-md-9"> <h4 class="h--smaller">Variable Rate Shading (VRS)</h4> <p>VRS allows developers to control shading rate dynamically, shading as little as once per sixteen pixels or as often as eight times per pixel. The application specifies shading rate using a combination of a shading-rate surface and a per-primitive (triangle) value. VRS is a very powerful tool that allows developers to shade more efficiently, reducing work in regions of the screen where full resolution shading would not give any visible image quality benefit, and therefore improving frame rate. Several classes of VRS-based algorithms have already been identified, which can vary shading work based on content level of detail (Content Adaptive Shading), rate of content motion (Motion Adaptive Shading), and for VR applications, lens resolution and eye position (Foveated Rendering).</p> <a class="btn btn-success btn-sm" target="default" href="https://devblogs.nvidia.com/turing-variable-rate-shading-vrworks/">Learn More</a> </div> </div> <br> <div class="row"> <div class="col-md-3"><center> <img class="img-responsive" width="100%" src="https://d29g4g2dyqv443.cloudfront.net/sites/default/files/akamai/RTX/images/tss1.png">  </center></div> <div class="col-md-9"> <h4 class="h--smaller">Texture-Space Shading</h4> <p>With texture-space shading, objects are shaded in a private coordinate space (a texture space) that is saved to memory, and pixel shaders sample from that space rather than evaluating results directly. With the ability to cache shading results in memory and reuse/resample them, developers can eliminate duplicate shading work or use different sampling approaches that improve quality.</p> <a class="btn btn-success btn-sm" target="default" href="https://devblogs.nvidia.com/texture-space-shading/">Learn More</a> </div> </div> <br> <div class="row"> <div class="col-md-3"><center> <img class="img-responsive" width="80%" src="https://d29g4g2dyqv443.cloudfront.net/sites/default/files/akamai/RTX/images/mvr001.png">  </center></div> <div class="col-md-9"> <h4 class="h--smaller">Multi-View Rendering (MVR)</h4> <p>MVR powerfully extends Pascal’s Single Pass Stereo (SPS). While SPS allowed rendering of two views that were common except for an X offset, MVR allows rendering of multiple views in a single pass even if the views are based on totally different origin positions or view directions. Access is via a simple programming model in which the compiler automatically factors out view independent code, while identifying view-dependent attributes for optimal execution.</p> <a class="btn btn-success btn-sm" target="default" href="https://devblogs.nvidia.com/turing-multi-view-rendering-vrworks/">Learn More</a> </div> </div>  <hr> <br> <center> <h2 class="h--medium">Compute</h2> </center> <br> <br> <div class="row"> <div class="col-md-3"> <img class="img-responsive" width="100%" src="https://d29g4g2dyqv443.cloudfront.net/sites/default/files/akamai/RTX/images/simulation001.png"> </div> <div class="col-md-9"> <br><br> <p>Lifelike visuals result when something both looks and behaves as it would in reality. With more than a decade of development in physics simulation, the RTX platform features APIs such as NVIDIA’s <a href="https://developer.nvidia.com/physx-sdk">PhysX</a>, <a href="https://developer.nvidia.com/flex">FleX</a> and <a href="https://developer.nvidia.com/cuda-toolkit">CUDA</a> 10, to accurately model how objects interact in the real world in games, virtual environments, and special effects.</p> </div> </div> <br> <a class="btn btn-success btn-sm" href="https://developer.nvidia.com/physx-sdk"> Learn more about PhysX</a> <a class="btn btn-success btn-sm" href="https://developer.nvidia.com/flex"> Learn more about Flex</a> <a class="btn btn-success btn-sm" href="https://developer.nvidia.com/cuda-toolkit"> Learn more about CUDA</a> <hr> <br> <center> <h2 class="h--medium">Asset Interchange</h2> </center> <br> <br> <p>With the growing complexity of pipelines and application workflows, standard file formats significantly help creators and developers achieve better asset interchange between applications. In modern pipelines, digital assets like geometry, materials, and shader definitions all need to transfer across applications while maintaining fidelity.</p> <div class="row"> <div class="col-md-2"> </div> <div class="col-md-4"> <center> <a href="http://developer.nvidia.com/mdl"><img class="img-responsive" src="https://d29g4g2dyqv443.cloudfront.net/sites/default/files/akamai/RTX/images/RTX_MDL.png"></a> </center> </div> <div class="col-md-4"> <center> <a href="https://graphics.pixar.com/usd/docs/index.html"><img class="img-responsive" width="50%" src="https://d29g4g2dyqv443.cloudfront.net/sites/default/files/akamai/RTX/images/USD%20Logo.png"></a> </center> </div> <div class="col-md-2" id="usd"> </div> </div> <p>The RTX Platform supports industry standards for the asset interchange, namely <a href="https://developer.nvidia.com/usd">Universal Scene Description (USD)</a> from Pixar and the open-source <a herf="https://www.nvidia.com/en-us/design-visualization/technologies/material-definition-language/">NVIDIA Material Definition Language (MDL)</a>. USD is widely used in the entertainment industry and provides a rich toolset for reading, writing, editing, and rapidly previewing 3D geometry and shading. NVIDIA MDL is adopted by many applications including Adobe, Allegorithmic and Epic’s Unreal Studio. MDL allows developers to build a library of materials once and be confident the materials maintain their appearance across all applications in the workflow.</p> <br> <a class="btn btn-success btn-sm" href="/mdl"> Learn more about MDL SDK</a> <a class="btn btn-success btn-sm" href="/usd"> Learn more about Pixar's USD</a> <hr> <br> <center> <h2>NVIDIA Omniverse</h2> </center> <br> <br> <div class="row"> <div class="col-md-3"> <a href="/nvidia-omniverse"><img class="img-responsive" src="https://d29g4g2dyqv443.cloudfront.net/sites/default/files/akamai/RTX/images/omniverse_splash.png"></a> </div> <div class="col-md-9"> <br> <p>NVIDIA Omniverse is a powerful new collaboration platform for 3D production pipelines based on USD and MDL. 3D applications developers can build portals to connect their products to Omniverse so customers can seamlessly share assets with other industry standard applications.</p> <br> <a class="btn btn-success btn-sm" href="/nvidia-omniverse-platform"> Learn more about Omniverse</a> </div> </div> <br><br> </section> <aside id="right" class="" role="complementary"> </aside>  </div> </div> <div class="separator"></div> </div> <div class="white-background"> <div class="separator"></div> <div class="container"> <div class="row"> <div id="pre_footer_left" class="col-xs-12 col-sm-12 col-lg-6"> </div> <div id="pre_footer_right" class="col-xs-12 col-sm-12 col-lg-6"> </div> </div> <div class="separator"></div> </div> </div> </div> <div id='footer' class='mt-auto'></div> <script src="https://dirms4qsy6412.cloudfront.net/assets/feed-aggregator/feed-aggregator-7f147443abc2d1300a239c29e4ba3ca0d0d2eb0dc66b608765e2b3be50e18e10.js"></script> <script src="https://dirms4qsy6412.cloudfront.net/assets/devzone3/old/dist/dz3-old-bundle-f911ee7c2f8b7dd419510ab33721b4c4fbd7b17dfbdac32b2586ccd2c3480c2e.js"></script> <script> const template = document.createElement('template'); template.innerHTML = ` <style> @import "https://dirms4qsy6412.cloudfront.net/assets/feed-aggregator/feed-aggregator-9ace7521871242143cb35fa86d5be702c4dacb409600041fa6a5b14fa2a71dde.css"; .feed-aggregator-component .card { box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3) !important; } .feed-aggregator-component .card:hover { box-shadow: 0 0 8px 0 rgba(0,0,0,0.13), 0 14px 32px 5px rgba(0,0,0,0.13) !important; } </style> <div class="feed-aggregator-component"></div> `; const hosts = { 'en': 'https://developer.nvidia.com/blog', 'cn': 'https://developer.nvidia.com/zh-cn/blog', } class FeedAggregatorElement extends HTMLElement { constructor() { super(); this._shadowRoot = this.attachShadow({ 'mode': 'open' }); this._shadowRoot.appendChild(template.content.cloneNode(true)); } connectedCallback() { const categories = this.getAttribute('categories'); const tags = this.getAttribute('tags'); const perPage = this.getAttribute('per-page'); const excludedTags = this.getAttribute('excluded-tags'); let locale = this.getAttribute('locale'); if (!locale) { locale = 'en'; } let targetElement = this._shadowRoot.querySelector(".feed-aggregator-component"); let feed = { id: 'blog', host: hosts[locale], type: 'json', minCount: 2, }; if (categories && categories !== 'all') { feed['category_ids'] = categories.split(','); } if (tags && tags !== 'all') { feed['tag_ids'] = tags.split(','); } if(excludedTags && excludedTags !== 'null'){ feed['excluded_tag_ids'] = excludedTags.split(','); } document.addEventListener("DOMContentLoaded", function () { new FeedAggregator({ target: targetElement, props: { count: perPage, openInNewTab: true, showExcerpts: true, feeds: [feed] } }); }) } } window.customElements.define('feed-aggregator', FeedAggregatorElement); </script> <template id='application-button-template'> <style> @import "https://dirms4qsy6412.cloudfront.net/assets/application-button/application-button-68ca7e1e3aa49ec79169d49226e34ee0c341d27a15a38b28ce975cb2467e123e.css"; </style> <a href='' class='nvidia-application-button'>Join now</a> </template> <script> async function fetchMembershipState () { const userInfo = await fetch('/api/user'); const {status} = userInfo; if (status === 401) { let error = new Error('Unauthorized'); error.statusCode = status; throw error; } // TODO: Figure out how to get DZ4 program // Fetch page info. const {pathname} = location; const pageInfo = await fetch(`${pathname}.json`); const pageData = await pageInfo.json(); // Fetch membership info return pageData; } const initApplicationButton = (element) => { const linkElement = element.querySelector('a'); fetchMembershipState() .then(data => { console.log(data); }) .catch(error => { switch (error.statusCode) { default: linkElement.innerHTML = 'Login'; linkElement.href = '/login'; } }); }; class NvidiaApplicationButton extends HTMLElement { constructor() { const template = document.getElementById('application-button-template'); super(); this._shadowRoot = this.attachShadow({ 'mode': 'open' }); this._shadowRoot.appendChild(template.content.cloneNode(true)); } connectedCallback() { const element = this._shadowRoot; document.addEventListener('DOMContentLoaded', () => { initApplicationButton(element); }); } } window.customElements.define('nv-application-button', NvidiaApplicationButton); </script> <template id='application-text-template'> <p></p> </template> <script> class NvidiaApplicationText extends HTMLElement { constructor() { const template = document.getElementById('application-text-template'); super(); this._shadowRoot = this.attachShadow({ 'mode': 'open' }); this._shadowRoot.appendChild(template.content.cloneNode(true)); } connectedCallback() { } } window.customElements.define('nv-application-text', NvidiaApplicationText); </script> <template id='nv-sf-form-validator-template'> <script src="https://dirms4qsy6412.cloudfront.net/assets/sf-validation/moment-620a5949fff0ad37198f07464b91d7b7c110ecdb6f94ca90ca7d2e1b471f1da8.js"></script> <script src="https://dirms4qsy6412.cloudfront.net/assets/sf-validation/validate.min-2160a65c1b5d4a5966544ad25af8fe99f11c636a99c516fee6c7afd3b1f21409.js"></script> <p></p> </template> <script> class NvidiaSalesforceValidator extends HTMLElement { constructor() { const template = document.getElementById('nv-sf-form-validator-template'); super(); this._shadowRoot = this.attachShadow({'mode': 'open'}); this._shadowRoot.appendChild(template.content.cloneNode(true)); } initComponent() { if (!window.sfv) { return; } validate.extend(validate.validators.datetime, { parse: function (value, options) { if (moment(value, options.format, true).isValid()) { return +moment.utc(value); } }, format: function (value, options) { var format = options.dateOnly ? "MM/DD/YYYY" : "MM/DD/YYYY hh:mm"; return moment.utc(value).format(format); } }); function showErrors(errors) { $.each(errors, function (index, element) { $('input[name="' + errors[index]['attribute'] + '"]').each(function (i, e) { var errorMessage = errors[index]['options']['message']; $('<div class="js-validation-errors">' + errorMessage + '</div>').insertAfter(e); }).focus(); }); } function isValidForm(form, constraints) { var errors = validate(form, constraints, {format: "detailed"}); if (errors) { showErrors(errors); return false; } return true; } $.each(window.sfv, function (index, element) { $(element.target).on('click', function (event) { $('.js-validation-errors').remove(); if (!isValidForm(element.form, element.constraints)) { event.preventDefault(); } }); }); } connectedCallback() { document.addEventListener('DOMContentLoaded', () => { this.initComponent(); }); } } window.customElements.define('nv-sf-form-validator', NvidiaSalesforceValidator); </script> <script src="https://dirms4qsy6412.cloudfront.net/assets/horizontal-chart/d3.v4.min-41cfecdf7c41476e805de7afacf4aacdd1a4be6947fbecf95217e947ebc2faf5.js"></script> <script src="https://dirms4qsy6412.cloudfront.net/assets/horizontal-chart/visualize-d-06443fdef48364af6635f0d1d3535da26910671f6f6a680c531eff0e54ed595f.js"></script> <template id="chart-template"> <style> @import "https://dirms4qsy6412.cloudfront.net/assets/devzone3/modules/nvidia_tokens/nvidia-charts-a459e90d273ab4f8b282e0f5fef607074b5fc7cbb5f8d0f0e378281320e6b9c8.css"; </style> <div class="horizontal-chart-component"> <div class="chart-container"> <h4 class="chart-title"></h4> <p class="chart-subtitle"></p> <div class="legend"></div> <svg data-nvidia-chart="true" data-chart-legend=""></svg> <p class="chart-footnote"></p> </div> </div> </template> <script> function chartInit(element) { const chart = element.querySelector('svg[data-nvidia-chart]'); const isRendered = chart.getAttribute("data-rendered"); if (isRendered) { return; } const svgChart = d3.select(chart); const bars = JSON.parse(chart.dataset['chartBars']); const ticks = JSON.parse(chart.dataset['chartTicks']); const xAxisLabel = chart.dataset['xAxisLabel']; const barPadding = chart.dataset['barPadding']; const milestone = null; const isGrouped = chart.dataset['isGrouped'] === 'true'; if (isGrouped) { const legend = JSON.parse(chart.dataset['chartLegend']); createGroupedHorizontalBarChart(svgChart, bars, barPadding, legend, ticks, milestone, xAxisLabel, false); } else { createHorizontalBarChart(svgChart, bars, barPadding, ticks, xAxisLabel, "", false); } chart.dataset['rendered'] = 'true'; } $('a[data-toggle="tab"]').on("click", function (event) { setTimeout(() => { // Triggering 'resize' event to redraw charts. window.dispatchEvent(new Event('resize')); const target = jQuery(event.target).parents('.nav.nav-tabs').siblings('.tab-content').find('.tab-pane.active'); if (target.length > 0) { const svg = jQuery(target).find('horizontal-chart'); if (svg.length) { svg.each((idx, el) => { setTimeout(function () { const chartContainer = el._shadowRoot.querySelector('.chart-container'); chartInit(chartContainer); }, 300); }); } } }, 50); }); async function loadFileSource(url) { try{ const response = await fetch(url); return response.json(); }catch (e) { console.warn(`Failed to load chart data. URL: ${url}`); } return {}; } class HorizontalChartElement extends HTMLElement { constructor() { const horizontalCharTemplate = document.getElementById('chart-template'); super(); this._shadowRoot = this.attachShadow({ 'mode': 'open' }); this._shadowRoot.appendChild(horizontalCharTemplate.content.cloneNode(true)); } connectedCallback() { const url = this.getAttribute('source'); const element = this._shadowRoot; document.addEventListener("DOMContentLoaded", function () { loadFileSource(url).then(data => { const { chartTitle: title, chartSubtitle: subTitle, chartFootnote: footNote, chartId: id, isGrouped: isGrouped, legendData, barPadding, xAxisLabel, bars, ticks } = data; element.querySelector('.chart-title').innerHTML = title; // Subtitle if (subTitle) { element.querySelector('.chart-subtitle').innerHTML = subTitle; } else { element.querySelector('.chart-subtitle').remove(); } // Chart const svgElement = element.querySelector('.chart-container svg'); svgElement.id = id; const dataAttributes = [ ['isGrouped', isGrouped ? 'true' : 'false', ''], ['chartLegend', JSON.stringify(legendData), ''], ['xAxisLabel', xAxisLabel, ''], ['barPadding', barPadding, 5], ['chartBars', bars, ''], ['chartTicks', ticks, ''], ]; dataAttributes.forEach(dataAttribute => { if (dataAttribute[0] === 'chartBars' && dataAttribute[1]) { dataAttribute[1] = JSON.stringify(dataAttribute[1]); } if (dataAttribute[0] === 'chartTicks' && dataAttribute[1]) { dataAttribute[1] = JSON.stringify(dataAttribute[1]); } svgElement.dataset[dataAttribute[0]] = dataAttribute[1] ? dataAttribute[1] : dataAttribute[2]; }); // Caption if (footNote) { element.querySelector('.chart-footnote').innerHTML = footNote; } else { element.querySelector('.chart-footnote').remove(); } // Init chart const chartContainer = element.querySelector('.chart-container'); setTimeout(function () { if (jQuery(chartContainer).is(':visible')) { chartInit(chartContainer); } }, 300); }); }) } } window.customElements.define('horizontal-chart', HorizontalChartElement); </script> <script src="https://dirms4qsy6412.cloudfront.net/assets/tablefilter/tablefilter-e8295498b8f34d53fbb98264abcc88fb72c57915ee6a13b15361d5df0127ebbb.js"></script> <template id="nv-filtered-table-template"> <div class="nvidia-filtered-table-wrapper"></div> </template> <script> const buildTableIdentity = (function (str) { let counter = 0; return function (str) {counter += 1; return `${str}-${counter}`} })(); function slugify(str) { return String(str) .normalize('NFKD') // split accented characters into their base characters and diacritical marks .replace(/[\u0300-\u036f]/g, '') // remove all the accents, which happen to be all in the \u03xx UNICODE block. .trim() // trim leading or trailing whitespace .toLowerCase() // convert to lowercase .replace(/[^a-z0-9 -]/g, '') // remove non-alphanumeric characters .replace(/\s+/g, '-') // replace spaces with hyphens .replace(/-+/g, '-'); // remove consecutive hyphens } /** * Returns URL params. * * @returns {any|{[p: string]: string}} */ function getUrlParams() { try { return Object.fromEntries(new URLSearchParams(location.search)); } catch (e) { // Fallback for IE11. let search = location.search.substring(1) .replace(/&/g, '","') .replace(/=/g, '":"'); return JSON.parse('{"' + search + '"}', function (key, value) { return key === "" ? value : decodeURIComponent(value); }); } } /** * Query string extension for TableFilter. * * @see http://www.tablefilter.com/extension-run-time.html * * @param {Object} tf * TableFilter instance. * @constructor */ function QueryStringExtension(tf) { this.tf = tf; } QueryStringExtension.prototype.init = function () { let tf = this.tf; tf.emitter.on(['after-filtering'], this.afterFiltering.bind(this)); }; QueryStringExtension.prototype.afterFiltering = function (tf, terms) { const config = tf.cfg; // Get query string. let existingParams = getUrlParams(); // Remove values related to current table. $.each(terms, function (index, element) { let key = config.qs_filters[index]; delete existingParams[config.table_identity + "_" + key]; }); $.each(terms, function (index, element) { if (element.length) { existingParams[config.table_identity + "_" + config.qs_filters[index]] = element; } }); const paramsKeys = Object.keys(existingParams).sort(); let sortedParams = {}; $.each(paramsKeys, function (i, e) { sortedParams[e] = existingParams[e]; }); const params = $.param(sortedParams); const url = window.location.pathname + '?' + decodeURI(params); window.history.replaceState({}, '', url); }; function addQueryStringExtension(tf) { let queryStringExtension = new QueryStringExtension(tf); try { tf.registerExtension(queryStringExtension, 'queryStringExtension'); queryStringExtension.init(); } catch (e) { console.log('Failed to init URL params handler.'); } } /** * Filtered table web component. */ class NvFilteredTableWebComponent extends HTMLElement { constructor() { super(); const elementTemplate = document.getElementById('nv-filtered-table-template'); this._shadowRoot = this.attachShadow({'mode': 'open'}); this._shadowRoot.appendChild(elementTemplate.content.cloneNode(true)); } async loadSourceFile(url) { try { const response = await fetch(url); return response.json(); } catch (e) { console.warn(`Failed to load table data. URL: ${url}`); } return {}; } fetchComponentData = (url, el, hash) => this.loadSourceFile(url).then((data) => this.instantiateComponent(data, el, hash)); getColumnTypes(config) { return Array.from(config).map((col) => { const {columnType} = col; return columnType ? columnType : 'string'; }); } addFilterWidgets(config, headerData) { headerData.forEach((col, idx) => { const {filterWidget} = col; if (filterWidget) { config[`col_${idx}`] = filterWidget; } }); return config; } instantiateComponent(data, element, hash) { const {tableIndex: headerData, tableItems: rowsData, tableIdentity} = data; let filterConfig = { base_path: '/', sticky_headers: true, alternate_rows: true, mark_active_columns: { highlight_column: true, }, loader: true, highlight_keywords: true, no_results_message: true, toolbar: false, help_instructions: false, paging: { results_per_page: ['Records: ', [25, 50, 100]] }, auto_filter: true, responsive: true, grid_layout: { width: '100%', tbl_cont_css_class: 'nvidia-filtered-table' }, clear_filter_text: 'All', col_types: this.getColumnTypes(headerData), extensions: [ {name: ''} ], flt_css_class: 'filter-control', on_filters_loaded: (e) => { const {cfg} = e; if (!cfg) { return; } const {defaultValues} = cfg; if(!Array.isArray(defaultValues)) { return; } if (defaultValues.length === 0) { return; } defaultValues.forEach((defaultValue) => { const {index, value} = defaultValue; let headerCell = document.querySelector('.header-row th[data-idx="' + index + '"]'); if (!headerCell) { return; } const filterIndex = headerCell.dataset['fidx']; e.setFilterValue(filterIndex, value); }); e.filter(); }, qs_filters: headerData.map((item) => { return slugify(item?.columnName); }), }; filterConfig = this.addFilterWidgets(filterConfig, headerData); const id = tableIdentity ? tableIdentity : buildTableIdentity('t'); filterConfig.table_identity = id; const defaultValues = headerData .filter(item => item?.defaultValue !== undefined) .map(item => { return {index: item['column'], value: item['defaultValue']}; }); const filtersMap = headerData.map(item => { const {columnName, column} = item; return { index: column, key: `${id}_${slugify(columnName)}`} }); const sp = new URLSearchParams(location.search); filtersMap.forEach(filter => { if (!sp.has(filter.key)) { return; } defaultValues.push({index: filter.index, value: sp.get(filter.key)}); }); const detail = { hash, headerData, rowsData, defaultValues, filterConfig: { table_identity: id, config: filterConfig, predefined_selects: JSON.stringify([]), labels_width: [], }, }; const event = new CustomEvent('nv.filterTable.build', {detail}); document.dispatchEvent(event); } connectedCallback() { const url = this.getAttribute('source'); const hash = this.getAttribute('data-hash'); const element = this._shadowRoot; document.addEventListener('DOMContentLoaded', () => this.fetchComponentData(url, element, hash)); } } // Register web component. window.customElements.define('nv-filtered-table', NvFilteredTableWebComponent); /** * Builds table header. * * @param {Array} data * @param {HTMLElement} parentElement */ const buildHeader = (data, parentElement) => { data.forEach((item, idx) => { const {column, columnName} = item; const cell = document.createElement('th') cell.dataset['idx'] = column; cell.dataset['fidx'] = idx; cell.innerHTML = columnName; const {labelWidth, columnWidth} = item; if (labelWidth) { cell.dataset['label_width'] = labelWidth; } if (columnWidth && Number.isInteger(columnWidth) && columnWidth > 0) { cell.width = columnWidth + '%'; } else if (columnWidth && (columnWidth.endsWith('em') || columnWidth.endsWith('px') || columnWidth.endsWith('%'))) { cell.width = columnWidth; } parentElement.appendChild(cell); }); } /** * Builds table rows. * * @param {Object} headerData * @param {Array} data * @param {HTMLElement} parentElement */ const buildRows = (headerData, data, parentElement) => { data.forEach(partner => { const {name, logo, URL: partnerUrl, cameras} = partner; const logoCellContent = ` <a href="${partnerUrl}"> <img src="${logo}" alt="${name}" title="${name}" loading="lazy"> </a> <span class="element-invisible">${name}</span> `; cameras.forEach(camera => { const row = document.createElement('tr'); const logoCell = document.createElement('td'); logoCell.innerHTML = logoCellContent; row.appendChild(logoCell); for (const [key, value] of Object.entries(headerData)) { if (!camera[value.column]) { continue; } const cell = document.createElement('td'); let cameraValue = camera[value.column]; let cellHTML = ''; if (typeof cameraValue === 'object') { const {type, product_url, product_img, td_text} = cameraValue let img = ''; if(product_img !== "—") { img = `<img src="${product_img}" alt="${td_text}" title="${td_text}">`; } let html = ` <div class="product-link"> <a href="${product_url}" target="_blank"> ${img} <div class="product-title">${td_text}</div> </a> </div>` cellHTML = html.trim(); } else if (typeof cameraValue === 'string') { cellHTML = cameraValue } cell.innerHTML = cellHTML; row.appendChild(cell); } parentElement.appendChild(row); }) }); } const initTable = (table, filtersConfig, defaultValues) => { filtersConfig.config.defaultValues = defaultValues; const nvidiaFilteredTable = new TableFilter(table, filtersConfig.config); nvidiaFilteredTable.emitter.on(['before-loading-extensions'], addQueryStringExtension); nvidiaFilteredTable.init(); }; document.addEventListener('nv.filterTable.build', (event) => { const {detail} = event; const {headerData, rowsData, filterConfig, hash, defaultValues} = detail; const component = document.querySelector('nv-filtered-table[data-hash="' + hash + '"]'); const element = document.createElement('div'); element.classList.add('nvidia-filtered-table-wrapper'); element.innerHTML = `<div class="table-responsive"><table class="table table-hover table-striped sticky-enabled"><thead></thead><tbody></tbody></table></div>`; component.after(element); const table = element.querySelector('table'); const tableHeader = element.querySelector('table thead'); const tableHeaderRow = document.createElement('tr'); tableHeaderRow.classList.add('header-row'); tableHeader.appendChild(tableHeaderRow); buildHeader(headerData, tableHeaderRow); const tableBody = element.querySelector('table tbody'); buildRows(headerData, rowsData, tableBody); initTable(table, filterConfig, defaultValues); }); </script> <script src="https://dirms4qsy6412.cloudfront.net/assets/nv-developer-menu-09b6a95e79b8d8d44b0f1ac794e39d5adac82391d128f6d4d39715826a860020.js"></script> <script> let menuLocale = 'en'; if (menuLocale == 'en') { menuLocale = 'en-US'; } function mountHeader(data = false) { let options = { baseURL: window.location.origin, signedIn: false, locale: menuLocale }; if (data) { options.secondaryMenu = data; } options.showMembershipCardLink = true; new NVDeveloperHeader({ target: document.getElementById('header'), props: options }); } function mountFooter(data = false) { let options = { menu: data, locale: menuLocale }; new NVDeveloperFooter({ target: document.getElementById('footer'), props: options }); } let url = 'd29g4g2dyqv443.cloudfront.net'; let headerMenuURL = "https://d29g4g2dyqv443.cloudfront.net/menu/en-US/header-secondary.json"; fetch(headerMenuURL) .then(response => response.json()) .then(data => { mountHeader(data); }) .catch((error) => { mountHeader(); window.nv.tracing.addError('menu', error); }); fetch(`https://${url}/menu/${menuLocale}/footer.json`) .then(response => response.json()) .then(data => { mountFooter(data); }) .catch((error) => { mountFooter(); window.nv.tracing.addError('menu', error); }); </script> <script src="https://www.datadoghq-browser-agent.com/us1/v5/datadog-rum.js"></script> <script> let silentAuthHost = 'www.nvidia.com'; let crossOriginPageUrl = `https://${silentAuthHost}/auth/hints/`; function readHint() { return new Promise((resolve) => { const { origin: targetOrigin } = new URL(crossOriginPageUrl); const iframe = document.createElement('iframe'); iframe.hidden = true; iframe.src = crossOriginPageUrl; function responseHandler(event) { if (event.origin === targetOrigin) { iframe.parentNode.removeChild(iframe); return resolve(event.data); } } window.addEventListener('message', responseHandler, { once: true }); iframe.onload = () => { iframe.contentWindow.postMessage({ type: 'read' }, targetOrigin); } document.body.appendChild(iframe); }); } function writeHint(login_hint, idp_id, timestamp, sub) { const { origin: targetOrigin } = new URL(crossOriginPageUrl); const iframe = document.createElement('iframe'); iframe.hidden = true; iframe.src = crossOriginPageUrl; iframe.onload = () => { const message = { type: 'write', login_hint, idp_id, timestamp, sub }; iframe.contentWindow.postMessage(message, targetOrigin); } document.body.appendChild(iframe); } function deleteHint() { const { origin: targetOrigin } = new URL(crossOriginPageUrl); const iframe = document.createElement('iframe'); iframe.hidden = true; iframe.src = crossOriginPageUrl; iframe.onload = () => { iframe.contentWindow.postMessage({ type: 'delete' }, targetOrigin); } document.body.appendChild(iframe); } </script> <script>_satellite.pageBottom();</script> <script src="https://dirms4qsy6412.cloudfront.net/packs/js/runtime-503119e3bfeec75056bc.js" defer="defer"></script> <script src="https://dirms4qsy6412.cloudfront.net/packs/js/692-70104789368a40f2d231.js" defer="defer"></script> <script src="https://dirms4qsy6412.cloudfront.net/packs/js/341-3761d2892158034dde54.js" defer="defer"></script> <script src="https://dirms4qsy6412.cloudfront.net/packs/js/798-8f26177f1189c7399fb3.js" defer="defer"></script> <script src="https://dirms4qsy6412.cloudfront.net/packs/js/866-f9c34b19d1b60b883caf.js" defer="defer"></script> <script src="https://dirms4qsy6412.cloudfront.net/packs/js/311-033b6299b51897e65419.js" defer="defer"></script> <script src="https://dirms4qsy6412.cloudfront.net/packs/js/252-f83b27d9f72fef366bc7.js" defer="defer"></script> <script src="https://dirms4qsy6412.cloudfront.net/packs/js/367-0b2e82a8016bebbc82b5.js" defer="defer"></script> <script src="https://dirms4qsy6412.cloudfront.net/packs/js/900-df684e5d2e49c0841d7f.js" defer="defer"></script> <script src="https://dirms4qsy6412.cloudfront.net/packs/js/application-5051cd591e16bdd053ae.js" defer="defer"></script> <script src="https://dirms4qsy6412.cloudfront.net/packs/js/ls_track-4ba11c63b23b3f4ff0d5.js" defer="defer"></script> </body> </html>

CINXE.COM

NVIDIA RTX™ platform | NVIDIA Developer