Jump to content

  • Log In with Google      Sign In   
  • Create Account

FREE SOFTWARE GIVEAWAY

We have 4 x Pro Licences (valued at $59 each) for 2d modular animation software Spriter to give away in this Thursday's GDNet Direct email newsletter.


Read more in this forum topic or make sure you're signed up (from the right-hand sidebar on the homepage) and read Thursday's newsletter to get in the running!


Help Rendering Multiple Geometry with WebGL

  • You cannot reply to this topic
3 replies to this topic

#1 gondoo   Members   -  Reputation: 103

Like
0Likes
Like

Posted Yesterday, 12:40 PM

If I've added this thread to the wrong forum category, my apologies, I'm new here and to WebGL smile.png

 

My problem is hopefully simple. I'm able to render several amounts of the same mesh, but when I try adding a different one: webGL only draws one object. Again, I could for loop and create 100 of the same mesh and put them in different positions, scales, and no problem. But if I try adding one more mesh, it draws the "first one" I called:

 

meshA = new Mesh(); <--- this one

meshB = new Mesh();

 

In fact, I could switch them over, and it would draw a different mesh, as long as it's the first one.

 

I'll post some psuedo code in order to visualize the anatomy of my application, but if it's too much, I'll try to make a list here. 

 

Anatomy (no libs): 

 

1) Engine Starts after Body.onload, and I create 2 meshes, I also create two Object3D objects. Which are pretty much like GameObjects in Unity. 

 

Once images, sounds, etc are loaded, a callback is fired

2) Load3DObjects(): I set the viewport,clearColor,enable both cull_face and depth_test. Now I Load Shaders:

3)LoadShader():

  - gl.createProgram()

  - compile

  - link

  - fire ProgramLoaded callback function on the mesh

 

4) mesh.ProgramLoaded(): 

   - Set Uniforms and Attributes: getUniformLocation, getAttribLocation 

   - gl.enableVertexAttribArray(program.vertexPosAttribute);

     gl.enableVertexAttribArray(program.colorPosAttribute);
  - Once all Materials are loaded, fire CreateGLBuffers();
 
5) CreateGLBuffers():
    
    I for loop through all the Object3D and run the following code: 
 
    _mesh.vertexPosBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, _mesh.vertexPosBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, _mesh.meshVertices, gl.DYNAMIC_DRAW);
 
   _mesh.colorPosBuffer = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER,_mesh.colorPosBuffer);
   gl.bufferData(gl.ARRAY_BUFFER,_mesh.colorVertices, gl.DYNAMIC_DRAW);
 
   - I create a new Node, which has a children array that holds other nodes.These nodes
     also have a Draw Function which calls its children's draw function as well. 
  
   - I create a new Geometry Node, holds a mesh object. The geometry node also has a 
    a Draw Function, which really callls the Meshes Draw function.
 
  - I create yet another Node and add it to an array called sceneChildren 
  - and that array I add to yet another new Node I create for the scene:
 
    var geometry = new Node([new Goemetry(_mesh)]);
    geometry.name = "Geometry Node";
    sceneChildren[sceneChildren.length] = new Node([geometry]);
 
(outside of the for loop): scene = new Node(scenChildren);
 
RUN_GAME_LOOP!
 
In render, I draw the scene. 
 
Here's some pseudocode just in case: http://pastebin.com/prHRYxxW
 
Thank very much  in advance. Hopefully this wasn't too long. 
 
 
 

 

 



Sponsor:

#2 uwi2k2   Members   -  Reputation: 816

Like
0Likes
Like

Posted Yesterday, 01:32 PM

hi,

 

still its not enough info. but 2 ideas:

 

1. it is a js problem as you always may have the same reference to one object ... chck by outputting to console if in the 2 mesh array you really see diffrent vertex data.

 

2. in your render loop you are not setting the attrib pointer to the vbo correctly .. or not resetting at all ... it must be like
    - bind vbo 1
    - set attrib pointers
    - draw nr 1

    ----------------
    - bind vbo 2
    - set attrib pointers
    - draw nr 2

you may add more / real code for better help

 

cu

uwi2k2


uwi2k2 - parttime Game-Dev
---------------------------------------------------------
OpebGL Trainer: www.opengl-trainer.com
deCode Company: www.decode.ro


#3 gondoo   Members   -  Reputation: 103

Like
0Likes
Like

Posted Yesterday, 02:01 PM

hi,

 

still its not enough info. but 2 ideas:

 

1. it is a js problem as you always may have the same reference to one object ... chck by outputting to console if in the 2 mesh array you really see diffrent vertex data.

 

2. in your render loop you are not setting the attrib pointer to the vbo correctly .. or not resetting at all ... it must be like
    - bind vbo 1
    - set attrib pointers
    - draw nr 1

    ----------------
    - bind vbo 2
    - set attrib pointers
    - draw nr 2

you may add more / real code for better help

 

cu

uwi2k2

 

 

Thanks for the answer, I was afraid it was too much code, but I've added both javascript files. I've removed the matrix libs to make everything shorter. ForgeApp, is where I preload everything, and the ForgeSDK is where the API is.

 

ForgeSDK: https://dl.dropboxusercontent.com/u/23066256/ForgeSDK.js

ForgeApp: https://dl.dropboxusercontent.com/u/23066256/ForgeApp.js

 

I have a feeling it's something right beneath my nose, and I can't see it. 



#4 gondoo   Members   -  Reputation: 103

Like
0Likes
Like

Posted Today, 05:42 PM

I solved it. Everything was alright. I was missing a "var" where the materials are added. Just in case somebody downloaded the code. 

for( *here* mat in mesh.materials){
 var material = mesh.materials[mat];
 var prog = LoadShaderProgram(gl,material.vertexShader, material.fragmentShader, function(prog){that.ProgramLoaded(gl,prog);});
mesh.materialsToLoad = mesh.materials.length;

mesh.programs.push(prog);
//return true;
}






PARTNERS