Sunday, July 1, 2018

How to Draw a Triangle in OpenGL ES (Android) — Step-by-Step Beginner Guide

Android apps are easily created using the android studio. Firstly you have to create an OpenGL ES environment to draw a shape such as a triangle. I referred to the developer.android.com site which is a good and extensive source of technical information.

If you're learning OpenGL ES on Android, the first thing everyone tries is drawing a triangle.

And yet…
👉 You either get a black screen
👉 Or nothing shows up
👉 Or the app crashes without explanation

In this guide, I’ll show you exactly how to draw a triangle in OpenGL ES, with working code and common mistakes to avoid.

What You’ll Learn Here

  • How OpenGL ES rendering works (basic idea)
  • How to define triangle vertices
  • How shaders work (simple explanation)
  • Working Android code to render a triangle
I had to download an android studio which happens fast and easy and I was good to go in half an hour or so. 

Step 1: Define Triangle Coordinates

float triangleCoords[] = {
0.0f, 0.5f, 0.0f, // top
-0.5f, -0.5f, 0.0f, // bottom left
0.5f, -0.5f, 0.0f // bottom right
};

👉 This defines a triangle in 3D space (x, y, z)

Step 2: Create Vertex Shader

String vertexShaderCode =
"attribute vec4 vPosition;" +
"void main() {" +
" gl_Position = vPosition;" +
"}";

👉 This shader tells OpenGL where to place the triangle

Step 3: Create Fragment Shader

String fragmentShaderCode =
"precision mediump float;" +
"void main() {" +
" gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +
"}";

👉 This makes the triangle red

Step 4: Draw the Triangle

GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, 3);

🖼️ Output

👉 You should now see a red triangle centered on screen

Common Mistakes (IMPORTANT)

1. Black Screen


  • Forgot to call glClear()
  • Shader failed to compile

2. Triangle Not Visible

  • Coordinates out of range (-1 to +1)
  • Wrong buffer setup

3. App Crash

  • Missing OpenGL context
  • Incorrect shader linking
There were problems I encountered esp with OpenGL ES environment. 

Pro Tip

If nothing shows:
👉 Always check shader compile logs — 90% of errors are there.


What Next?

Now that you can draw a triangle, try:

  • Drawing a square
  • Adding colors per vertex
  • Animating the triangle

Final Thoughts

This may look simple, but this triangle is the foundation of all 3D graphics—games, simulations, everything.

I have now created a sierpinski gasket where the triangles are subdivided upon clicking the screen.
Update:
You may want to read further about another app that divides the triangle into sierpinski gasket:

Wednesday, June 6, 2018

Modern OpenGL- Drawing a Triangle(With Vertex and Fragment Shaders)

It was quite exhausting to toil since the past two months trying to install Code::Blocks and getting GLFW,
GLEW and
GLM
to run in it.
I followed this link to get them installed.
For the shader code I referred to this site: Open.gl
Also referred to this amazing Site also. I have coded this project so shabbily that I have not kept track of how many external libraries I have included. There is Linmath, there is GLAD and SFML and a few others were included without any real necessity.

I hope they will become useful as I go along.

Drawing a Triangle

The drawing part has been explained very well in the sites I mentioned. We need to make use of VertexArrayObjects(VAOs) and VertexBufferObjects(VBOs).
In modern OpenGL we need to include short programs called shader programs and get them created, compiled, linked and then attach them to a program, then link the program with our main project.
Finally call glDrawArrays which does the drawing of the VBOs.

The Book of Shaders
This site which you can google is what I am following and will keep posting the solutions of the amazing pictures I generate.

For the present I am simply sharing the code here.

Snapshot:

When you move your mouse around the screen the color of the triangle changes. This change is brought about by the following fragment shader code.

static const char* fragment_shader_text =
"varying vec3 color;\n"
"uniform float u_time;\n"
"uniform vec2 u_resolution;\n"
"uniform vec2 u_mouse;\n"
"void main() {\n"
"        gl_FragColor = vec4(u_mouse.x/u_resolution.x,u_mouse.y/u_resolution.y,0.0,1.0);\n"
"}\n";

Thanks for following till this point.
Will try and keep you all abreast of any further project.

Saturday, May 5, 2018

Procedural Terrain Generation

I had written a post on texture generation using procedural noise. I use the same technique to generate a terrain. The explanation of this code is in this site: http://lodev.org/cgtutor/randomnoise.html


Here is a snapshot:


Here is the code.

Friday, May 4, 2018

Diamond Square Algorithm in C/C++

I have implemented the Diamond Square Algorithm as depicted in this site =>https://www.bluh.org/code-the-diamond-square-algorithm/
It is a way of generating height maps for computer graphics. These height maps can be used as textures or landscapes. It is a slightly better algorithm than the three-dimensional implementation of the midpoint displacement algorithm which produces two-dimensional landscapes. It is also known as the random midpoint displacement fractal, the cloud fractal or the plasma fractal, because of the plasma effect produced when applied.


I chanced upon this topic while searching for Fractal Terrain Generation.

Snapshots:


Here is the code.

Wednesday, May 2, 2018

Object Model Loader in C++ using OpenGL

There was demand from some students to have an object model loader in C++ and I was trying it since so many days.

The one I am posting is incomplete. It has some issues such as elephant and teddy not loaded properly.

As you can see when I plot each vertex in the object model it seems fine:




But when I draw the triangles It comes with holes.

As shown here:




The model must be incomplete or the program has some bugs, I am not sure what is going on. If anyone could point out the flaw its hugely welcome. On further probing I found that the error seems to be while parsing the input .OBJ file. Certain files have two white spaces between f and the vertex index and some files have an extra blank at the end of each line. I have worked with same files in JAVA and there because of robust string handling functions these minor hiccups do not arise.

Here is the code in C++.

Wednesday, April 18, 2018

Fractal Tree in C++ using OpenGL

Following snapshots were obtained in C++ using OpenGL.
I rotated the scene and got different views of the tree.
Snapshots:



Here is the source.

Dynamic Bezier Curve in Java using JOGL

I have named this project as Dynamic Bezier Curve. It uses Evaluators of Bezier curves.

Two bezier curves are joined at the intersection point. The snake winds its way through the 3D path at random. So control points to draw the bezier curve are chosen randomly. These control points are created inside a cube using random number generation.

There are at-least 4 control points needed to draw one Bezier curve.
Two such control point arrays are used here.
They are arranged such that the last point of the first curve and the first point of the second curve are same. Not only that second last and last point of the first curve and first and second point of the second curve are lying on the same line. This is done to ensure continuity and smoothness at the joining point.

Here is a video of the output: https://youtu.be/zmLIoLXHiV8


Here is the source.