Make your shadres online with SpiderGL – MeShader interface.

SpiderGL is a JavaScript 3D Graphics library which relies on WebGL for realtime rendering.

You can test it online using your browser using this website.

The website allow you to write shaders and also rendering the output.

About the web interface then has some windows to write your code and set the viewer.

See the next image:

meshade website

All steps show you how to use this web interface.

You need to load the 3D object using the Load button with this mesh: data/gargoyle1k.obj.

The website come with default example from shaders source code ( see step 2 and 3).

The steps 4 will apply the shaders and show on log windows if you got errors.

The step 5 will save your shaders.

Now about shaders source code.

If you want to use shader you need to have two source code: vertex shader source code and fragment shader source code.

The website interface come with two windows for each source code.

All two windowes need to have this source code in the top of each windows source code:

This tell shaders rendering about the data used by vertex and fragment shader.

This can be already declare in some engine scripting.

For example if you use Unity 3D engine then you can redefine VERTEX_P and FRAGMENT_P at the top of your shader file.

… where VERTEX_P and FRAGMENT_P it’s vertex and fragment shaders source code.

About Vertex Shader Source is the source code can be used to:

… is a set of attributes and functions performed by vertices and is responsible for running the vertex shaders.

About Fragment Shader Source is the source code can be used to:

… all the interpolated values computed in vertex shaders is used to code all effects that the application requires.

Also the fragment shader has no access to the frame buffer.

What do you know about shaders source code ?

Has one part of declarations like any programming language.

Also come with main function to run the shader.

The declarations is also like any language with variable , constants:

Uniforms are values which do not change during a rendering.

Attributes are only available in vertex shader and they are input values which change every vertex.

Varyings are used for passing data from a vertex shader to a fragment shader.

const this variables can be declared as const are compile-time constants and are not visible outside the shader that declares them.

If you know C language then the language syntax is C-like.

The default example from website :

The vertex shader

The fragment shader

Simple example I created using this website to show the normals.

Change this source code line from fragment shader:

The result rendering is:


You can see the object is fill with colors with x,y and z colors.

I will come with new tutorials about shaders.

How to get? the GLSL and OpenGL version.

You can get version from the OpenGL and GL Shading program by:

If don’t initialize the OpenGL you can get it:

Let’s try one simple example.

The output will be print on the shell.

How to create an executable in Linux using OpenGL.

I will try to show you briefly how to create a Linux OpenGL applications.

We check if the graphics card and settings are done correctly, using the command:

As freeglut devel package provides libraries for OpenGL. Let’s install that package.

Then we see if we have the necessary files.

Let’s try a simple opengl example. This example use glut functions.

The code source is show below with with explanations…

We run the application now.

opengl example tutorial

I wait your opinion and possibly more complex example.

Writing a basic game with C++ and OpenGL libs – part 1 .

This is a first part tutorial about linux game using C++ and OpenGL libs.

Writing a C++ game can be difficult.

You will need to focus on program structure and then to know how to create the necessary classes.

Let’s see the files I used:

The main.cpp file is the main program.

This file will make the window program and will deal with the user.

Also this file use OpenGL libs.

Let’s see the source code:

The next two files : display.cpp and display.hpp is used to display the game objects.

I use just one class : Display.

Let’s see the header file display.hpp

… and display.cpp.

You can see the OpenGL source code to make a rectangle.

The next files game.cpp and game.hpp is used to make all game engine working.

The header file game.hpp is:

… and also game.cpp.

Let’s make the Makefile.

This can done well if you know how working g++ compiler.

Use the command to make the binary file:

The resul is this:

simplegame tutorial c++