x3dom_issue1279

boxWithHoles.x3d

<x3d>
			<scene>
				<!--The next shape in red is created in order to later provide it with holes. To make this possible, the shape must be given a sortkey that is larger than the sortkey of the shapes that represent the hole. In addition, the shape must have at least a slight tranzparency.
				transparency='0.01'
				sortkey='2'
				-->
				<shape>
					<appearance sortkey='2'>
						<material diffuseColor='1 0 0' transparency='0.01'/>
					</appearance>
					<Box size='3,3,0.2'/>
				</shape>
				<!--The next shape represents the first hole. This shape must have the geometry and position of the hole. It must protrude a little beyond the surface of the shape that will contain the hole. Here 0.21 at the hole compared to 0.2 at the previous shape.
				transparency='1'
				sortkey='1'
				-->
				<shape>
					<appearance sortkey='1'>
						<material transparency='1'/>
					</appearance>
					<Box size='1,1,0.21'/>
				</shape>
				<!--The next shape represents the next hole. A cone has been used here.
				-->
				<transform rotation='1 0 0 1.5708'>
					<transform translation='1 0 0'>
						<shape>
							<appearance sortkey='1'>
								<material transparency='1'/>
							</appearance>
							<cone bottomRadius='0.1' topRadius='0.1' height='0.21'/>
						</shape>
					</transform>
				</transform>
				<!--The next two shapes show that you can somewhat place in the holes (The cone in yellow)  and that you can actually look through the holes (sphere in blue).
				-->
				<transform rotation='1 0 0 1.5708'>
					<transform translation='1 0 0'>
						<shape>
							<appearance>
								<material diffuseColor='1 1 0'/>
							</appearance>
							<cone bottomRadius='0.05' topRadius='0.05' height='1'/>
						</shape>
					</transform>
				</transform>
				<transform translation='0 0 -3'>
					<shape>
						<appearance>
							<material diffuseColor='0 0 1'/>
						</appearance>
						<sphere/>
					</shape>
				</transform>
			</scene>
		</x3d>

BoxWithHoles183.x3d

<X3D>
  <Scene>
    <Viewpoint description="defaultX3DView"/>
    <Viewpoint position="-1.18765 -0.23318 3.09144" orientation="0.17376 -0.97635 0.12868 0.27417" 
	 centerOfRotation="0 0 -1.25" description="obliqueThroughSquareCutout" />
    <Viewpoint position="1.74165 0.07545 2.90619" orientation="-0.04242 0.99909 0.00430 0.39716" centerOfRotation="0 0 -1.25" description="obliqueThroughRoundCutout" />
    <!--The next shape in red is created in order to later provide it with holes. To make this possible, the shape must be given a sortkey that is larger than the sortkey of the shapes that represent the hole. In addition, the shape must have at least a slight tranzparency.
    transparency='0.01'
    sortkey='2'
    -->
    <Shape>
      <Appearance sortkey='2'>
        <Material DEF='red' diffuseColor='1 0 0' transparency='0.01'/>
      </Appearance>
      <Box ccw='true' size='3,3,0.2'/>
    </Shape>
    <!--The next shape represents the first hole. This shape must have the geometry and position of the hole. It must protrude a little beyond the surface of the shape that will contain the hole. Here 0.21 at the hole compared to 0.2 at the previous shape.
    transparency='1'
    sortkey='1'
    -->
    <Shape>
      <Appearance sortkey='1' alphaClipThreshold='0'>
        <Material diffuseColor='1 1 1' transparency='1' />
        <Depthmode readonly='false' />
      </Appearance>
      <Box size='1.5,2,0.21'/>
    </Shape>
    <!--The next shape represents the next hole. A cone has been used here.
    -->
    <Transform rotation='1 0 0 1.5708'>
      <Transform translation='1 0 0'>
        <Shape>
          <Appearance sortkey='1' alphaClipThreshold='0'>
            <Material transparency='1'/>
            <Depthmode readonly='false' />
          </Appearance>
          <Cone bottomRadius='0.1' topRadius='0.1' height='0.21'/>
        </Shape>
      </Transform>
    </Transform>
    <!--The next two shapes show that you can somewhat place in the holes (The cone in yellow)  and that you can actually look through the holes (sphere in blue).
    -->
    <Transform rotation='1 0 0 1.5708'>
      <Transform translation='1 0 0'>
        <Shape>
          <Appearance>
            <Material diffuseColor='1 1 0'/>
          </Appearance>
          <Cone bottomRadius='0.05' topRadius='0.05' height='3'/>
        </Shape>
      </Transform>
    </Transform>
    <Transform translation='0 0 -3'>
      <Shape>
        <Appearance>
          <Material diffuseColor='0 0 1'/>
        </Appearance>
        <Sphere/>
      </Shape>
    </Transform>
    <!-- In the same way it is possible add an interior wall to the hole -->
    <Transform scale='0.5 0.5 0.5' rotation='1 0 0 1.5707'>
      <Shape>
        <Appearance>
          <Material USE='red' />
        </Appearance>
        <Extrusion ccw='false' beginCap='false' endCap='false' crossSection='1.5 2,1.5 -2,-1.5 -2,-1.5 2,1.5 2' spine='0 -0.21 0 0 0.21 0'/>
      </Shape>
    </Transform>
  </Scene>
</X3D>

index.html

<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
		<title>Window with transparency?</title>
		<script type='text/javascript' src='https://www.x3dom.org/download/dev/x3dom.js'> </script>
		<link rel='stylesheet' type='text/css' href='https://www.x3dom.org/download/x3dom.css'/>
	</head>
	<body>
		<p>Window with transparency?</p>
		<x3d width='500px' height='400px'>
			<scene>
				<shape>
					<appearance>
						<material diffuseColor='1 0 0' transparency='0.9'/>
					</appearance>
					<Box size='0.3,1,1'/>
				</shape>
				<shape>
					<appearance>
						<material diffuseColor='1 0 0' transparency='0.1'/>
					</appearance>
					<Box size='0.2,2,2'/>
				</shape>
				<transform translation='3 0 0'>
					<shape>
						<appearance>
							<material diffuseColor='0 0 1'/>
						</appearance>
						<sphere/>
					</shape>
				</transform>
			</scene>
		</x3d>
	</body>
</html> 

index182.html

<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <title>Window with transparency?</title>
        <script type='text/javascript' src='https://www.x3dom.org/release/x3dom-full.js'></script>
        <link rel='stylesheet' type='text/css' href='https://www.x3dom.org/release/x3dom.css'/>
    </head>
    <body>
        <p>Window with transparency?</p>
        <X3D>
            <Scene>
                <Viewpoint description="defaultX3DView"></Viewpoint>
                <Viewpoint position="-1.18765 -0.23318 3.09144" orientation="0.17376 -0.97635 0.12868 0.27417" centerOfRotation="0 0 -1.25" description="obliqueThroughSquareCutout"></Viewpoint>
                <Viewpoint position="1.74165 0.07545 2.90619" orientation="-0.04242 0.99909 0.00430 0.39716" centerOfRotation="0 0 -1.25" description="obliqueThroughRoundCutout"></Viewpoint>
                <!--The next shape in red is created in order to later provide it with holes. To make this possible, the shape must be given a sortkey that is larger than the sortkey of the shapes that represent the hole. In addition, the shape must have at least a slight tranzparency.
    transparency='0.01'
    sortkey='2'
    -->
                <Shape>
                    <Appearance sortkey='2'>
                        <Material DEF='red' diffuseColor='1 0 0' transparency='0.01'></Material>
                    </Appearance>
                    <Box ccw='true' size='3,3,0.2'></Box>
                </Shape>
                <!--The next shape represents the first hole. This shape must have the geometry and position of the hole. It must protrude a little beyond the surface of the shape that will contain the hole. Here 0.21 at the hole compared to 0.2 at the previous shape.
    transparency='1'
    sortkey='1'
    -->
                <Shape>
                    <Appearance sortkey='1' alphaClipThreshold='0'>
                        <Material diffuseColor='1 1 1' transparency='1'></Material>
                        <!--Depthmode readonly='false'/-->
                    </Appearance>
                    <Box size='1.5,2,0.21'></Box>
                </Shape>
                <!--The next shape represents the next hole. A cone has been used here.
    -->
                <Transform rotation='1 0 0 1.5708'>
                    <Transform translation='1 0 0'>
                        <Shape>
                            <Appearance sortkey='1' alphaClipThreshold='0'>
                                <Material transparency='1'></Material>
                                <!--Depthmode readonly='false'/-->
                            </Appearance>
                            <Cone bottomRadius='0.1' topRadius='0.1' height='0.21'></Cone>
                        </Shape>
                    </Transform>
                </Transform>
                <!--The next two shapes show that you can somewhat place in the holes (The cone in yellow)  and that you can actually look through the holes (sphere in blue).
    -->
                <Transform rotation='1 0 0 1.5708'>
                    <Transform translation='1 0 0'>
                        <Shape>
                            <Appearance>
                                <Material diffuseColor='1 1 0'></Material>
                            </Appearance>
                            <Cone bottomRadius='0.05' topRadius='0.05' height='3'></Cone>
                        </Shape>
                    </Transform>
                </Transform>
                <Transform translation='0 0 -3'>
                    <Shape>
                        <Appearance>
                            <Material diffuseColor='0 0 1'></Material>
                        </Appearance>
                        <Sphere></Sphere>
                    </Shape>
                </Transform>
                <!-- In the same way it is possible add an interior wall to the hole -->
                <Transform scale='0.5 0.5 0.5' rotation='1 0 0 1.5707'>
                    <Shape>
                        <Appearance>
                            <Material USE='red'></Material>
                        </Appearance>
                        <Extrusion ccw='false' beginCap='false' endCap='false' crossSection='1.5 2,1.5 -2,-1.5 -2,-1.5 2,1.5 2' spine='0 -0.21 0 0 0.21 0'></Extrusion>
                    </Shape>
                </Transform>
            </Scene>
        </X3D>
    </body>
</html>

link.md

x3dom/x3dom#1279

MetadataExtensions.x3d

<X3D>
  <Scene>
    <Viewpoint description="defaultX3DView"/>
    <Viewpoint position="-1.18765 -0.23318 3.09144" orientation="0.17376 -0.97635 0.12868 0.27417" 
               centerOfRotation="0 0 -1.25" description="obliqueThroughSquareCutout" />
    <Viewpoint position="1.74165 0.07545 2.90619" orientation="-0.04242 0.99909 0.00430 0.39716"
               centerOfRotation="0 0 -1.25" description="obliqueThroughRoundCutout" />
    <!--The next shape in red is created in order to later provide it with holes. To make this possible, the shape must be given a sortkey that is larger than the sortkey of the shapes that represent the hole. In addition, the shape must have at least a slight tranzparency.
    transparency='0.01'
    sortkey='2'
    -->
    <Shape>
<!--       <Appearance sortkey='2'> -->
      <Appearance>
        <MetadataString DEF='s1' reference='X3DFieldExtension' name='sortKey' value='"2"'/>
        <Material DEF='red' diffuseColor='1 0 0' transparency='0.01'/>
      </Appearance>
      <Box ccw='true' size='3,3,0.2'/>
    </Shape>
    <!--The next shape represents the first hole. This shape must have the geometry and position of the hole. It must protrude a little beyond the surface of the shape that will contain the hole. Here 0.21 at the hole compared to 0.2 at the previous shape.
    transparency='1'
    sortkey='1'
    -->
    <Shape>
<!--       <Appearance sortkey='1' alphaClipThreshold='0'> -->
      <Appearance>
        <MetadataString DEF='s1' reference='X3DFieldExtension' name='sortKey' value='"1"'/>
        <MetadataString DEF='a0' reference='X3DFieldExtension' name='alphaClipThreshold' value='"0"'/>
        <Material diffuseColor='1 1 1' transparency='1' />
<!--         <Depthmode readonly='false' /> -->
        <MetadataString DEF='dmZ' reference='X3DNodeExtension' name='depthMode'
                        value='"&lt;DepthMode readonly=\"false\" /&gt;"'/>
      </Appearance>
      <Box size='1.5,2,0.21'/>
    </Shape>
    <!--The next shape represents the next hole. A cone has been used here.
    -->
    <Transform rotation='1 0 0 1.5708'>
      <Transform translation='1 0 0'>
        <Shape>
<!--           <Appearance sortkey='1' alphaClipThreshold='0'> -->
          <Appearance>
            <MetadataString USE='s1'/>
            <MetadataString USE='a0'/>
            <Material transparency='1'/>
<!--             <Depthmode readonly='false' /> -->
            <MetadataString USE='dmZ'/>
          </Appearance>
          <Cone bottomRadius='0.1' topRadius='0.1' height='0.21'/>
        </Shape>
      </Transform>
    </Transform>
    <!--The next two shapes show that you can somewhat place in the holes (The cone in yellow)  and that you can actually look through the holes (sphere in blue).
    -->
    <Transform rotation='1 0 0 1.5708'>
      <Transform translation='1 0 0'>
        <Shape>
          <Appearance>
            <Material diffuseColor='1 1 0'/>
          </Appearance>
          <Cone bottomRadius='0.05' topRadius='0.05' height='3'/>
        </Shape>
      </Transform>
    </Transform>
    <Transform translation='0 0 -3'>
      <Shape>
        <Appearance>
          <Material diffuseColor='0 0 1'/>
        </Appearance>
        <Sphere/>
      </Shape>
    </Transform>
    <!-- In the same way it is possible add an interior wall to the hole -->
    <Transform scale='0.5 0.5 0.5' rotation='1 0 0 1.5707'>
      <Shape>
        <Appearance>
          <Material USE='red' />
        </Appearance>
        <Extrusion ccw='false' beginCap='false' endCap='false' crossSection='1.5 2,1.5 -2,-1.5 -2,-1.5 2,1.5 2' spine='0 -0.21 0 0 0.21 0'/>
      </Shape>
    </Transform>
  </Scene>
</X3D>