OpenGL texture mapping not using image [closed] - opengl

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I want to map textures to an object(maybe cube).
But i don't want to use image.
I know that usually using image for texture mapping like this:
glGenTextures(1, &texName);
glBindTexture(GL_TEXTURE_2D, texName);
image = SOIL_load_image("cube.jpg", &width, &height, 0, SOIL_LOAD_RGB);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, image);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
But Is there any solution that not using image?
If there is color spectrum, I want to store the color information in a buffer and map this spectrum like a texture.
Please Let me know If there is any solution.

Answer 1

If you want to create a texture you have to allocate the memory for the color plane first.
The easiest way is to create an RGBA texture, because for one texel exactly 4 byte (32 bit) is needed and you do not have to worry about the alignment.
In c++ I recommend to use a std::vector:
int width = ...;
int height = ...;
std::vector<unsignd char> colorPlane( width * height * 4 ); // * 4 because of RGBA
But you can also use old school dynamic memory allocation:
unsignd char *colorPlane = new unsignd char[ width * height * 4 ];
The byte index of a texel inside the plane is calculated as follows:
int posX = ...;
int posY = ...;
int index = (posY * width + posX) * 4;
If you want to set a pixel you have to assign the proper red, green and blue color channels in the range [0, 255]. For an opaque texel you have to set an alpha channel of 255:
e.g.: Set Red color:
colorPlane[index + 0] = 255; // red component
colorPlane[index + 1] = 0; // green component
colorPlane[index + 2] = 0; // blue component
colorPlane[index + 3] = 255; // alpha channel (255 == opaque)
Finally you have to set the color plane to the texture.
// std::vector<unsigned char>
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA8, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, colorPlane.data() );
// unsigned char*
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA8, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, colorPlane );
You can create a gradient texture by interpolating the color components.
See the following example
for ( int iy = 0; iy < height; ++ iy )
{
for ( int ix = 0; ix < width; ++ ix )
{
int index = (iy * width + ix) * 4;
float gradX = (float)ix / width;
float gradY = (float)iy / height;
colorPlane[index + 0] = (unsigned char)(255.0 * (1.0-gradX));
colorPlane[index + 1] = (unsigned char)(255.0 * (1.0-gradY));
colorPlane[index + 2] = (unsigned char)(255.0 * gradX * gradY);
colorPlane[index + 3] = 255;
}
}
A rainbow texture can be created as follows:
for ( int iy = 0; iy < height; ++ iy )
{
for ( int ix = 0; ix < width; ++ ix )
{
int index = (iy * width + ix) * 4;
float H = 1.0f - (float)iy / height;
float R = fabs(H * 4.0f - 3.0f) - 1.0f;
float G = 2.0f - fabs(H * 4.0f - 2.0f);
float B = 2.0f - fabs(H * 4.0f - 4.0f);
colorPlane[index + 0] = (unsigned char)(255.0 * R);
colorPlane[index + 1] = (unsigned char)(255.0 * G);
colorPlane[index + 2] = (unsigned char)(255.0 * B);
colorPlane[index + 3] = 255;
}
}
See the following WebGL example:
var ShaderProgram = {};
ShaderProgram.Create = function( shaderList, uniformNames ) {
var shaderObjs = [];
for ( var i_sh = 0; i_sh < shaderList.length; ++ i_sh ) {
var shderObj = this.CompileShader( shaderList[i_sh].source, shaderList[i_sh].stage );
if ( shderObj == 0 )
return 0;
shaderObjs.push( shderObj );
}
var progObj = this.LinkProgram( shaderObjs )
if ( progObj != 0 ) {
progObj.unifomLocation = {};
for ( var i_n = 0; i_n < uniformNames.length; ++ i_n ) {
var name = uniformNames[i_n];
progObj.unifomLocation[name] = gl.getUniformLocation( progObj, name );
}
}
return progObj;
}
ShaderProgram.Use = function( progObj ) { gl.useProgram( progObj ); }
ShaderProgram.SetUniformInt = function( progObj, name, val ) { gl.uniform1i( progObj.unifomLocation[name], val ); }
ShaderProgram.SetUniformFloat = function( progObj, name, val ) { gl.uniform1f( progObj.unifomLocation[name], val ); }
ShaderProgram.SetUniform2f = function( progObj, name, arr ) { gl.uniform2fv( progObj.unifomLocation[name], arr ); }
ShaderProgram.SetUniform3f = function( progObj, name, arr ) { gl.uniform3fv( progObj.unifomLocation[name], arr ); }
ShaderProgram.SetUniformMat44 = function( progObj, name, mat ) { gl.uniformMatrix4fv( progObj.unifomLocation[name], false, mat ); }
ShaderProgram.CompileShader = function( source, shaderStage ) {
var shaderScript = document.getElementById(source);
if (shaderScript) {
source = "";
var node = shaderScript.firstChild;
while (node) {
if (node.nodeType == 3) source += node.textContent;
node = node.nextSibling;
}
}
var shaderObj = gl.createShader( shaderStage );
gl.shaderSource( shaderObj, source );
gl.compileShader( shaderObj );
var status = gl.getShaderParameter( shaderObj, gl.COMPILE_STATUS );
if ( !status ) alert(gl.getShaderInfoLog(shaderObj));
return status ? shaderObj : 0;
}
ShaderProgram.LinkProgram = function( shaderObjs ) {
var prog = gl.createProgram();
for ( var i_sh = 0; i_sh < shaderObjs.length; ++ i_sh )
gl.attachShader( prog, shaderObjs[i_sh] );
gl.linkProgram( prog );
status = gl.getProgramParameter( prog, gl.LINK_STATUS );
if ( !status ) alert("Could not initialise shaders");
gl.useProgram( null );
return status ? prog : 0;
}
function drawScene(){
var canvas = document.getElementById( "ogl-canvas" );
var vp = [canvas.width, canvas.height];
gl.viewport( 0, 0, canvas.width, canvas.height );
gl.enable( gl.DEPTH_TEST );
gl.clearColor( 0.0, 0.0, 0.0, 1.0 );
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
ShaderProgram.Use( progDraw );
gl.enableVertexAttribArray( progDraw.inPos );
gl.bindBuffer( gl.ARRAY_BUFFER, bufObj.pos );
gl.vertexAttribPointer( progDraw.inPos, 2, gl.FLOAT, false, 0, 0 );
gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, bufObj.inx );
gl.drawElements( gl.TRIANGLES, bufObj.inx.len, gl.UNSIGNED_SHORT, 0 );
gl.disableVertexAttribArray( progDraw.pos );
}
var gl;
var prog;
var bufObj = {};
function sceneStart() {
var canvas = document.getElementById( "ogl-canvas");
gl = canvas.getContext( "experimental-webgl" );
if ( !gl )
return;
progDraw = ShaderProgram.Create(
[ { source : "draw-shader-vs", stage : gl.VERTEX_SHADER },
{ source : "draw-shader-fs", stage : gl.FRAGMENT_SHADER }
],
[] );
progDraw.inPos = gl.getAttribLocation( progDraw, "inPos" );
if ( prog == 0 )
return;
var pos = [ -1, -1, 1, -1, 1, 1, -1, 1 ];
var inx = [ 0, 1, 2, 0, 2, 3 ];
bufObj.pos = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, bufObj.pos );
gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( pos ), gl.STATIC_DRAW );
bufObj.inx = gl.createBuffer();
bufObj.inx.len = inx.length;
gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, bufObj.inx );
gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, new Uint16Array( inx ), gl.STATIC_DRAW );
setInterval(drawScene, 50);
}
<script id="draw-shader-vs" type="x-shader/x-vertex">
precision mediump float;
attribute vec2 inPos;
varying vec2 vertPos;
void main()
{
vertPos = inPos;
gl_Position = vec4( inPos.xy, 0.0, 1.0 );
}
</script>
<script id="draw-shader-fs" type="x-shader/x-fragment">
precision mediump float;
varying vec2 vertPos;
vec3 HueToRGB(in float H)
{
float R = abs(H * 4.0 - 3.0) - 1.0;
float G = 2.0 - abs(H * 4.0 - 2.0);
float B = 2.0 - abs(H * 4.0 - 4.0);
return clamp( vec3(R,G,B), 0.0, 1.0 );
}
void main()
{
vec3 color = HueToRGB( vertPos.y * 0.5 + 0.5 );
gl_FragColor = vec4( color, 1.0 );
}
</script>
<body onload="sceneStart();">
<canvas id="ogl-canvas" style="border: none;" width="200" height="200"></canvas>
</body>

Answer 2

This is possible in fragment (pixel) shader. Anyway - your original gradient data will better work if it will be presented as a texture to a shader with additional parameters (like linear gradient points, or radial gradient params).
However, you still pass it as uniform buffer or texture buffer object. With this you loose built-in texture sampling and filtering capabilities, which will almost do gradient for you.
Take a look at shader toy (https://www.shadertoy.com) - there's tons of samples without usng textures and generating patterns inside a shader program.