Misc newbie X_ITE questions #209

JeroMiya · 2025-11-24T06:14:34Z

JeroMiya
Nov 24, 2025

Hello! I did a little experimentation with integrating X_ITE with Blazor, and I have some very beginner/basic questions. First of all, I noticed the normals appear to be inverted in this model, though using other examples appear to be correct. I'm guessing this is an issue with the model, but just want to make sure I'm not missing something:

I can't post the Deer.x3d file here as it's too large.

Second, although referencing an external .x3d file appears to work fine when the x3d-canvas uses it via the src attribute, when attempting to implement a simple inline x3d like the X_ITE getting started sample only works if the x3d-canvas element exists in the pre-rendered top level html (i.e. when the elements exist in the server-side pre-rendered html for the page). When I navigate to other pages in the app and navigate back (so that the x3d-canvas element is removed from the DOM and then later re-added when navigating back), I notice that the viewer appears to load correctly (the right click menu exists, for example, and I see the debug console output with renderer information). However, the actual X3D content doesn't render.

For context, Blazor supports pre-rendering on the server, followed by the "client side" taking over and re-rendering the page in an "interactive" mode.. When you refresh the browser, Blazor "prerenders" the whole page on the server-side, then later once the client-side finishes bootstrapping, it takes over and re-renders the page at least once on the client-side. The content displays correctly in the brief moment between prerendering (content rendered correctly) and one of the interactive modes taking over and re-rendering the page. Then the viewer appears to work but the content is missing.

<x3d-canvas contentScale="auto" update="auto">
  <X3D profile='Interchange' version='4.0'>
    <head>
      <unit category='angle' name='degree' conversionFactor='0.017453292519943295'></unit>
    </head>
    <Scene>
      <Viewpoint
          description='Initial View'
          position='2.869677 3.854335 8.769781'
          orientation='-0.7765887 0.6177187 0.1238285 28.9476440862198'></Viewpoint>
      <Transform DEF='Box'
          rotation='0 1 0 0'>
        <Shape>
          <Appearance>
            <Material></Material>
          </Appearance>
          <Box></Box>
        </Shape>
      </Transform>
      <TimeSensor DEF='Timer'
          cycleInterval='10'
          loop='true'></TimeSensor>
      <OrientationInterpolator DEF='Rotor'
          key='0, 0.25, 0.5, 0.75, 1'
          keyValue='0 1 0 0, 0 1 0 90, 0 1 0 180, 0 1 0 270, 0 1 0 0'></OrientationInterpolator>
      <ROUTE fromNode='Timer' fromField='fraction_changed' toNode='Rotor' toField='set_fraction'></ROUTE>
      <ROUTE fromNode='Rotor' fromField='value_changed' toNode='Box' toField='set_rotation'></ROUTE>
    </Scene>
  </X3D>
</x3d-canvas>

Is there a javascript API to let X_ITE know that the content has updated?

I also noticed that when using this style, the browser interprets these X3D elements as HTML instead of XML, so it normalizes the element names to lowercase. Is that expected?

create3000 · 2025-11-24T13:50:14Z

create3000
Nov 24, 2025
Maintainer

If a model appears to be somehow transparent or turned inside out, it is most likely that the ccw field of the geometry must be changed from true to false or from false to true. It also can help to set the solid field to false if the ccw field gives not the desired effect. The ccw defines clockwise/counterclockwise ordering of vertex coordinates, which in turn defines front/back orientation of polygon normals according to Right-Hand Rule (RHR). Setting solid true means draw only one side of polygons (backface culling on), setting solid false means draw both sides of polygons (backface culling off).

Your inline issue: please make sure that the content is still within the x3d-canvas element, by inspecting it with the web browser. If the content is empty, simply add it again with DOM methods like canvas.appendChild(). Any change of the content will trigger an update of the scene.

0 replies

create3000 · 2025-11-24T15:57:17Z

create3000
Nov 24, 2025
Maintainer

... normalizes the element names to lowercase:

Yes this is a peculiarity of all HTML browsers element names become uppercase and attributes become lowercase. X_ITE compensates this and will use this uniformly cased names.

If you do not wish this you have to use XHTML pages, but I would not recommend this as a modern HTML page is much more easier to use.

x3d-canvas uses it via the src

From my point of view I would recommend using src attribute. Changes can be made with X3D SAI (Scene Access Interface) functions: https://create3000.github.io/x_ite/reference/ecmascript-object-and-function-definitions/

0 replies

JeroMiya · 2025-11-25T01:02:58Z

JeroMiya
Nov 25, 2025
Author

Ah, thank you! Setting ccw="false" on the IndexedFaceSet elements fixes the normal issue on the deer model.

I did check that the child content is still in the DOM after the prerendering-interactive transition. Based on what I can see, it appears almost as if the view ends up zooming out like it's registering some extreme user input when the viewer reloads during transition. In any case, I think it's probably best to disable prerendering for X3D components anyway as it ends up reinitializing the viewer, which ends up taking longer than just waiting for the viewer to load client-side only, so I'm going to let that particular mystery stay a mystery.

Thanks for the suggestion to just reference external .x3d content via the src property. I did experiment with creating a few Blazor component wrappers around some of the X3D elements that just pass through the element name and attributes, but I don't think that will be feasible (even with some code-gen from the x3d object model xml) as Blazor components must be PascalCased to differentiate between components and regular html markup. Although it would be possible, I would have to break X3D naming conventions in some areas (e.g. tags). Also, rather than have those components write to the DOM directly, I think they would have to inject a parent component cascade property to build up an X3D DOM in memory that would then get passed directly to X_ITE via the programmatic interface (via JS interop). Probably not worth the effort.

I was indeed going to research SAI. Is the X_ITE library extensible enough to plug in a custom SAI module? My hope was to implement a JS-Blazor/Wasm bridge via SAI to keep things as standards compliant as possible, but open up to WASM/C# X3D scripting. Obviously I could implement something on a case-by-case basis through the JS scripting capabilities, but I was hoping to add some middleware to interpret input/output parameters and script references to dynamically wire them up to wasm/C# code. Ideally in a way that could be re-used for, say, a hypothetical rust/wasm integration, et. al.

0 replies

create3000 · 2025-11-25T12:40:55Z

create3000
Nov 25, 2025
Maintainer

I don't know if the SAI interface is sufficient for you, but you can skim through the reference and then you'll surely see if it fits.

Here are a few things that are possible:
You can manipulate all nodes by setting field values. Modify the scene-graph as you like by adding/removing child nodes. Some nodes send events which you can read out directly if you need them or register a field callback and get informed when an event occurs.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Misc newbie X_ITE questions #209

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 4 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Misc newbie X_ITE questions #209

Uh oh!

Uh oh!

JeroMiya Nov 24, 2025

Replies: 4 comments

Uh oh!

create3000 Nov 24, 2025 Maintainer

Uh oh!

create3000 Nov 24, 2025 Maintainer

Uh oh!

JeroMiya Nov 25, 2025 Author

Uh oh!

create3000 Nov 25, 2025 Maintainer

JeroMiya
Nov 24, 2025

create3000
Nov 24, 2025
Maintainer

create3000
Nov 24, 2025
Maintainer

JeroMiya
Nov 25, 2025
Author

create3000
Nov 25, 2025
Maintainer