In this tutorial, we want to develop a proper "hello world" 3D graphic. We start from the "hello triangle" program given in the Get Going section. Because it is a world that we want to show, the first step is to replace the triangle with a sphere.
EduGraf needs the 3D positions of the sphere to be able to display it. Fortunately, EduGraf comes with a few basic shapes. There is a static class Sphere in the EduGraf.Shapes namespace. The needed positions can be computed calling the GetPositions() method. The sphere is composed of little rectangular patches stiched together at lattitudinal and longitudinal lines. The method takes their counts as input. Each of the rectangular patches is composed of two triangles. OpenGL needs the information about which positions belong to which triangle. This can be computed calling the GetTriangles() method. Call both methods with the same counts. Adapt the code as follows.
public class HelloWorldRendering(Graphic graphic)
: Rendering(graphic, new Color3(0.1f, 0, 0.1f))
{
private Visual? _earth;
public override void OnLoad(Window window)
{
_earth = GetEarth(graphic);
Scene.Add(_earth);
}
private static VisualPart GetEarth(Graphic graphic)
{
const int resolution = 20;
var positions = Sphere.GetPositions(resolution, resolution);
var triangles = Sphere.GetTriangles(resolution, resolution);
var geometry = Geometry.Create(positions, positions, triangles);
var material = new UniformMaterial(new Color3(1, 0, 0));
var light = new AmbientLight(new Color3(1, 1, 1));
var shading = Graphic.CreateShading("emissive", material, light);
var surface = graphic.CreateSurface(shading, geometry);
return graphic.CreateVisual("earth", surface);
}
}
Since we use the emissive material, the geometry of the sphere is not well visible. Hit the "G" key, to switch to a debugging mode showing only triangle borders instead of the surfaces. In this case, this reveals the geometry much better.
Show the World
This is a sphere, alright. But we want to see our world. We can achieve this by projecting a map of the world onto the sphere. This is called texturing in computer graphics. The term "texture" originates from the Latin word "textura", which means "a weaving" or "a web". In English, it first appeared in the late 14th century, referring to the physical structure or feel of a surface. The standard texturing operation is the application of a 2D image to a 3D surface. First, we need to load an image, then create a texture, and finally a material from it, like so.
using var image = Image.Load<Rgba32>("earthmap.jpg"); // using SixLabors.ImageSharp;
image.Mutate(context => context.Flip(FlipMode.Vertical)); // switch orientation, if necessary
var texture = Graphic.CreateTexture(image);
var material = new ColorTextureMaterial(texture);
It is necessary to exactly specify how the 2D shape maps onto the 3D surface, which is called UV-mapping. The term UV-mapping comes from the custom to denote the axes of the image-plane with U and V. Each vertex of the surface needs to be associated with UV-coordinates — think of it as placing them on the image. The U and V values range from 0 to 1. The UV-mapping for the sphere can be computed calling the GetTextureUvs() method, again with the same arguments.
var textureUvs = Sphere.GetTextureUvs(resolution, resolution);
var geometry = Geometry.CreateWithUv(positions, positions, textureUvs, triangles);
When running the program, the visualization should look as follows. This program is continued in the scene hierarchy for transformations tutorial.
