Skip to content

3D rendering with openGL for the 42_scop project

Notifications You must be signed in to change notification settings

zstenger93/scop

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐Ÿ“– 42 SCOP

Rendering engine with OpenGL for object files

Menu

Setup

How to use

Keys

Video

How it Looks

Object Files

.mtl Files

Input Handling

Creating Triangle

Color

UV Normalizing

Normals

Shaders

Light

Text rendering

Resources

Setup

Have at least OpenGL 3 or above or leave the page now and run for the sake of your sanity.

There is 5 include paths through the files where u need to change the username in case, you would like to run the program by yourself.

You will also need:

	- stb_image.h
	- GLFW
	- Specific GLAD headers based on OpenGL version
	- GLM
	- imgui

How to use

In the Makefile there are quite a few options to play around with eg:

make 42
make teapot
make skull
make axe
make plane
make castle
make spider
make alien
make monster
make building
make camel
make hb
make sw
make sculp
make pumpkin
make tric
make parrot
make house

Feel free to explore. Each one of them will launch with the corresponding object

Keys

I use basic GLFW functions to handle the key inputs so nothing special.

Handling keypress events as:
		Text rendering:
			7:		on/off to show details and keybindings
		Camera movement:
			W:		move camera forward
			A:		move camera left
			S:		move camera backwards
			D:		move camera right
			X:		move camera down
			SPACE:		move camera up
			8:		incrase camera movement speed
			9:		decrase camera movement speed
		Object Rotation:
			I:		rotates the object left on X axis
			K:		rotates the object right on X axis
			J:		rotates the object left on Y axis
			L:		rotates the object right on Y axis
			U:		rotates the object left on Z axis
			O:		rotates the object right on Z axis
			M:		incrases the speed
			N:		reduces the speed
		Polygon Mode:
			1: 		wireframe
			2:		points
			3:		filled
		Switching beteewen texture and color:
			C:		color mode
				4:	changing the value of R
				5:	changing the value of G
				6:	changing the value of B
			V:		texture mode
			B:		texture versions
						- texture
						- color
						- mixture between texture and color
						- light on
			T:		changes the texture to the next
			Y:		changes the texture to the previous
		Light:
			Z:		lighting on
			to controll it's position:
				Q:	LightPos.x -+ 0.25;
				E:	LightPos.x ++ 0.25;
				R:	LightPos.y -+ 0.25;
				F:	LightPos.y ++ 0.25;
				G:	LightPos.z -+ 0.25;
				H:	LightPos.z ++ 0.25;

Video

monster.mp4

How it Looks

With rendered text, light on

Teapot with uv map texture

Object which for I created the .obj file and calculated the coordinates manually because I wanted to know how it works. It isn't perfect obviously, but for now it's fine.

(yes I like the pain and don't question my sanity)

With wireframe

Plane with wireframe

An alien animal with colorful texture

With basic light on and ambient at 0.0

Monster with better lighting

Skull with it's texture on

Polygon mode WIREFRAME

A cool result with messed up uv mapping

Just because it looks cool

Book of dreams

Camel with it's texture

Polygon mode WIREFRAME

42 logo with wireframe

T-rex

For Star Wars fans

Object Files

Wavefront .obj file The OBJ file format is a simple data-format that represents 3D geometry alone โ€” namely, the position of each vertex, the UV position of each texture coordinate vertex, vertex normals, and the faces that make each polygon defined as a list of vertices, and texture vertices. Vertices are stored in a counter-clockwise order by default, making explicit declaration of face normals unnecessary.

The f (face) has x >= 3 amount of numbers which are index to others values.

These values are vertex/UV coordinates/normals.

A simple face format can look like as:

f 4 9 7 1

Which contains indexes in this case only for the vertex coordinates of a square.

or the following:

f 23/123/123 321/3213/213 43/45/12 423/3423/432

Which has a vertex/UV coord/normal for each point of a square.

(there are more)

.mtl Files

Material files (.mtl) contain values essential for material and lighting calculations in the rendering process. While a single object can have multiple texture files with different material attributes, this project currently supports handling one texture file and settings per object.

It can store a lot of information, but just to name a few:

newmtl Material				material name
Ns 96.078431				shininess of the object
Ka 0.500000 0.500000 0.500000		ambient light
Kd 0.640000 0.640000 0.640000		diffuse light
Ks 0.500000 0.500000 0.500000		specular light
Ni 1.000000				optical density
d 1.000000				transparency value
illum 2					type of lighting model

Vertex

Used to define the shape of a graphical object, typically in a 3D space. A vertex represents a single point in space and serves as a building block for creating more complex geometric shapes like triangles, polygons, or more intricate 3D models.

Polygon

A polygon is a flat surface formed by connecting three or more vertices. In 3D graphics, triangles are the most commonly used polygons because they are simple and efficient to render.

Input Handling

Make yourself a favor, plan and save all the values in a structured way, then start playing with them

Creating Triangles

One face contains usually 3, 4(or more) indexes and each of them marks the index of an x, y and z coordinate for one point of a triangle or square etc.

Combining these coordinates from a face will result one triangle or square.

In case of squares I calculated 2 triangle from each square because I couldn't make the deprecated GL_QUADS to draw at that point.

Color and Texture

The texture file locations are saved in a vector, so you can just switch them around on any object without recompiling etc.

Colors and textures enhance the visual appeal of 3D models. You can apply normal colors or use UV coordinates provided in the .obj file with is's texture file.

UV coordinates represent the actual texture coordinates for the object in the texture file. If these coordinates are not available, you might need to calculate them manually.

UV Normalizing

In case you don't have them already ready in the .obj file, you need to calculate the uv normals yourself, or better say, you can try lmao

Normals

Normals are crucial for lighting calculations, contributing to the realism of the rendered scene. They define the direction a surface is facing, affecting how light interacts with the object. Proper implementation of normals is essential for accurate lighting and shading effects.

Shaders

Vertex and fragmentshader source file has been used here which are technically executables passed down to the shader, but they have slightly specific syntax for in and output called GLSL (OpenGL Shading Language)1.

In short the vertex shader output will be your fragmentshader input, but you can pass down values to both from your code itself as well.

Light

Lighting in 3D graphics is a complex topic. Implementing different lighting models and techniques can significantly impact the visual quality of your scenes. Experimentation and understanding different lighting properties can help achieve realistic lighting effects in your 3D models.

My calculations are working but they are not quite correct. I might try to improve it and implement more later on with different types of lighting.

Text rendering

There are quite a few ways to do it. For this project I've found imgui the best and esier to use compared to other ones I've tried like freetype.

It's considerably faster to make it compile and work. Afterwards the how to use it is straight forward.

Resources

The following youtube playlist is golden which mostly works in these videos with the following material from learnopengl

https://www.youtube.com/watch?v=W3gAzLwfIP0&list=PLlrATfBNZ98foTJPJ_Ev03o2oq3-GGOS2

This site provides a good general explanation what can you do with this project

https://learnopengl.com/Introduction

Menu