The main problem you had was that you were incorrectly calculating the .numItems. It should have been something like

XBuffer.numItems = Xarray.length / XBuffer.itemSize;

Also, your index array did not correspond correctly to your actual vertex points. Here is code that draws a circle.

also "you are not actually using the normal vector but I added code into the shader "attribute vec4 aVertexNormal;
" and corresponding getAttribLocation in initShaders() for when you actually start needing the normal later.

ps when posting to this forum, please put all your code in '['code']' your code '['\code']' blocks (without the ' character shown here to make escape sequence visible here only) to make it easier to read and maintain formatting.

this is from "What UBBCode can I use in my posts?" (http://www.opengl.org/discussion_boards/ubbthreads.php?ubb=faq)

Phinehas

09-28-2010, 05:25 PM

Thanks for your great help.

May I know when will I use the normal vector?

marshats

09-28-2010, 08:36 PM

May I know when will I use the normal vector?

When you start to get into models where you utilize light effects. The normal vector helps in computing things like reflection off the surface or how shinny it looks etc. After you start getting more into WebGL you may want to find some general openGL books on the subject. Randi Rost "OpenGL Shading Language" is one book I reference from time to time. But there are many online tutorials also.

Phinehas

09-28-2010, 09:04 PM

I will use the light effect later.

Before light effect implementation, I would like to change part of the code into a function (refractor). However, I have no idea to refractor the following coding:

This is because I want to extract it (and its buffer) into one js file so I can re-use it later. However, if I do it, it cannot return these 4 parameters (vertices, normalData, unpackedColors, cubeVertexIndices).

marshats

09-28-2010, 09:17 PM

I am really a C++ coder. This javascript stuff is similar enough to do most simple tasks but your question is more of a javascript than a openGL/webGL question. Do you have any helpful javascript forums to ask this question? I would be curious to know the answer also.

ZbuffeR

09-29-2010, 12:59 AM

Not a javascript coder either, but I have been told that C struct equivalent can be done using JSON notation, probably something around:
var result = {vertices: [0, 0, 0], normalData: [0, 0, 1], etc};

One point: there is no real need to send around vertex arrays once you buffer the data to GL. In fact all you need are the buffer IDs and lengths ie in your circle case only 8 integers needed to completely draw the circle.

cubeVertexPositionBuffer
cubeVertexPositionBuffer.itemSize

cubeVertexColorBuffer
cubeVertexColorBuffer.itemSize

cubeVertexNormalBuffer
cubeVertexNormalBuffer.itemSize

cubeVertexIndexBuffer
cubeVertexIndexBuffer.numItems

Why not refactor the code to avoid possibly costly memory duplication (for large models later on for instance) of color,vertex,normal etc arrays like