Sunday, November 10, 2019

Making my first game in Unity 3D

I have become so confident of my skills that I have ventured into making a Unity 3D Game and started a blog post on it even before I finished it.

This site =>https://learn.unity.com/tutorial/your-first-game

Is where I am fixated on right now.

My hope is to publish to the internet a rudimentary game that I make... hopefully it would allow me to post the game in this blog itself that visitors can play(I am not sure about this as yet)

Well it turns out this first game didn't teach you anything yet set your aspirations and dreams on the right path.

I hope I get some more time this weekend and am able to make a rudimentary playable game.

As said in the four videos... A minimum value product.

Friday, September 20, 2019

3D Sierpinski Gasket in a Tetrahedron


I Have lifted this program from this site: https://www.mobilefish.com/developer/webgl/webgl.html which in turn lifted the programs from a coursera course on WebGL. The 3D Sierpinski Gasket will in future be modified to rotate with interaction using mouse.
PS: Browse individual posts. Looking at all posts in one page might break the code behind. Here I posted in gamedev.stackoverflow.com a question about the same issue and it got solved instantly. Oops ... your browser doesn't support the HTML5 canvas element

Saturday, September 7, 2019

Draw an Interactive Cube in HTML5/WebGL

This is a canvas that allows you to play with a cube with your mouse. This interactive cube has been made possible with the miracle technology of HTML5 Canvas and WebGL NJoy!!!
      

HTML5 Canvas and WebGL - A new beginning

This post displays a text message inside a canvas which is drawn using a webgl context.




This is another canvas that displays a triangle in an experimental webgl context. If you are not able to view the triangle then may be you need to upgrade to a better browser or enable webgl in your browser. (BTW it is enabled by default in most modern browsers)
For more details about WebGL Application visit this site: https://www.tutorialspoint.com/webgl/webgl_sample_application.htm
  
      

Wednesday, May 22, 2019

A Big Thank You


I thank all my blog viewers for so much love and appreciation... I have enjoyed blogging as much as you all have visiting this blog.
Popularity is down does not mean quality is down.


A 10% improvement in frequency of posts and being upto date with quality increases popularity by 10 times again I am cooking up these numbers.


If you are from an impoverished country lower in income strata (esp african) than Indians this blog will not consume much of your data balance.
I have as a goal, tried to be of help to learners of computer graphics. Blogging is a very effective way of reaching out to fellow learners. I have decided to now devote most of my weekends to seriously working on graphics projects with two goals:

1) Impact more learners
2) Make my blog more popular and cater to the needs of the those learners in need of guidance,

So starting henceforth you will see a qualitatively different blog with lot more content, products, projects and features updated and posted more frequently. You will have links and access to world class literature curated personally by me from across the web.

I also intend to cater to a wider community of visitors esp those who visit this blog for not more than 2 minutes.

Happy Surfing...

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.