Geometry2D component

This component provides a simple 2D (flat) objects.

See also X3D specification of the Geometry2D component.

Contents:

1. Supported nodes

Note that 2D objects are just a special case of 3D objects. You can use all the 3D nodes to render 2D graphics as well. The nodes described here just place everything at a Z = zero plane (but you can still rotate and translate them in 3D, to construct larger models in 3D).

2. Example in Pascal

This is an example how to construct in Pascal a scene with TRectangle2DNode, TLineSetNode, and rotate it:

{ Build 2D scene with a textured Rectangle2D and outline using LineSet,
  and rotate it. }
 
uses CastleWindow, CastleViewport, CastleScene, X3DNodes, CastleFilesUtils,
  CastleColors, CastleVectors, CastleTimeUtils, CastleSceneCore,
  CastleUiControls;
 
var
  LifeTime: TFloatTime;
  Scene: TCastleScene;
  Transform: TTransformNode;
 
function BuildScene: TX3DRootNode;
var
  RectShape: TShapeNode;
  RectGeometry: TRectangle2DNode;
  RectTexture: TImageTextureNode;
 
  OutlineShape: TShapeNode;
  OutlineCoords: TCoordinateNode;
  OutlineGeometry: TLineSetNode;
  Appearance: TAppearanceNode;
  Material: TMaterialNode;
begin
  Transform := TTransformNode.Create;
 
  RectGeometry := TRectangle2DNode.CreateWithShape(RectShape);
  RectGeometry.Size := Vector2(200, 200);
 
  RectTexture := TImageTextureNode.Create;
  RectTexture.SetUrl(['castle-data:/face.png']);
 
  RectShape.Appearance := TAppearanceNode.Create;
  RectShape.Appearance.Texture := RectTexture;
 
  Transform.AddChildren(RectShape);
 
  OutlineCoords := TCoordinateNode.Create;
  OutlineCoords.SetPoint([
    // Z = 1 to be on top of RectShape that has Z = 0
    Vector3(-100, -100, 1),
    Vector3( 100, -100, 1),
    Vector3( 100,  100, 1),
    Vector3(-100,  100, 1),
    Vector3(-100, -100, 1)
  ]);
 
  OutlineGeometry := TLineSetNode.CreateWithShape(OutlineShape);
  OutlineGeometry.Coord := OutlineCoords;
  OutlineGeometry.SetVertexCount([OutlineCoords.FdPoint.Count]);
 
  Material := TMaterialNode.Create;
  Material.EmissiveColor := YellowRGB;
 
  Appearance := TAppearanceNode.Create;
  Appearance.Material := Material;
  OutlineShape.Appearance := Appearance;
 
  Transform.AddChildren(OutlineShape);
 
  Result := TX3DRootNode.Create;
  Result.AddChildren(Transform);
end;
 
type
  { View to contain whole UI and to handle events, like updates. }
  TMyView = class(TCastleView)
    procedure Update(const SecondsPassed: Single; var HandleInput: boolean); override;
  end;
 
procedure TMyView.Update(const SecondsPassed: Single;
  var HandleInput: boolean);
begin
  inherited;
 
  LifeTime := LifeTime + Container.Fps.SecondsPassed;
 
  // update rotation every frame
  Transform.Rotation := Vector4(0, 0, 1, LifeTime * 2);
 
  // Note: in this case, since you just rotate whole Scene,
  // you could also rotate it like this:
  //Scene.Rotation := Vector4(0, 0, 1, LifeTime * 2);
  // There's no need for TTransformNode in this case.
end;
 
var
  Window: TCastleWindow;
  Viewport: TCastleViewport;
  MyView: TMyView;
begin
  Window := TCastleWindow.Create(Application);
  Window.Open;
 
  MyView := TMyView.Create(Application);
  Window.Container.View := MyView;
 
  Viewport := TCastleViewport.Create(Application);
  Viewport.Setup2D;
  Viewport.FullSize := true;
  Viewport.Camera.Orthographic.Height := 1000;
  Viewport.Camera.Orthographic.Origin := Vector2(0.5, 0.5);
  MyView.InsertFront(Viewport);
 
  Scene := TCastleScene.Create(Application);
  Scene.Load(BuildScene, true);
 
  Viewport.Items.Add(Scene);
 
  Application.Run;
end.

You can use any image file to test it. The above code loads castle-data:/face.png which means we expect to find a file face.png in the data subdirectory within your project. You can really use any image file, for examples this:

DOOM hero face