WebGL bufferSubData не работает при попытке установить размер точки во время события mousemove

Question

Я хочу рисовать разные размеры точек во время mousemove событий с помощью webGL. Например, я нажимаю мышь и рисую точки размером 1 пиксель. Затем выберите другой размер, и когда я нажимаю кнопку мыши и перемещаюсь, я могу нарисовать очки с новым размером.

Я обнаружил что-то странное и очень ценю любую обратную связь.

1. Я создал массив кеглей:

   var pointSizes = new Uint8Array(2000); 
   

2. я добавил атрибут затенения, чтобы получить размеры точек:

   attribute float pointSize; 
   

   основной функции: gl_PointSize = pointSize;

3. Если я заполнить массив с размером, все работает отлично до тех пор, пока я не связываться в случае MouseMove:

   for(var i = 0; i<=1999; i++) 
       {pointSizes[i] = 5.0;} //draw points of size 5 
   
   
   aPointSizeBuffer = gl.createBuffer(); 
   gl.bindBuffer(gl.ARRAY_BUFFER, aPointSizeBuffer); 
   gl.bufferData(gl.ARRAY_BUFFER, pointSizes, gl.STATIC_DRAW); 
   aPointSize = gl.getAttribLocation(program, "pointSize"); 
   gl.vertexAttribPointer(aPointSize, 1, gl.UNSIGNED_BYTE, false, 0, 0); 
   gl.enableVertexAttribArray(aPointSize); 
   

4. Как только я связать буфер и установить bufferSubData в mousemove, тогда никакие точки не отображаются, когда я перемещаю мышь. Примечание. Индекс - это просто переменная, которая увеличивается с перемещением мыши, чтобы идентифицировать позицию в вершине, связанную с пикселем. Вот код в MouseMove событие:

   gl.bindBuffer(gl.ARRAY_BUFFER, aPointSizeBuffer); 
   pointSizes[index] = fpointSize; //this is the selected size 
   gl.bufferSubData(gl.ARRAY_BUFFER, index, pointSizes[index]); 
   

   Это не имеет значения, если я делать какие-либо из этих вещей:

    gl.bufferSubData(gl.ARRAY_BUFFER, index, fpointSize); 
   

   или даже:

    gl.bufferSubData(gl.ARRAY_BUFFER, index,1); 
   

Еще раз спасибо за любую помощь

Answer 1

gl.bufferSubData ожидает, что 3-й аргумент будет TypeArray. Ваш pointSizes[index] выглядит как uint8. Попробуйте использовать pointSizes.subarray(index, index+1) и посмотрите, исправляет ли он это.