javascript - Performance Warning Processing.js -

javascript - Performance Warning Processing.js -

when write processing.js in javascript-flavor performance warning didn't when used processing.js parse processing-code. i've create simple sketch 3d back upwards , console flooded warning:

performance warning: attribute 0 disabled. has signficant performance penalty

what mean? , more importantly: how prepare it?

that's sketch. (watch/edit on codepen.io)

var can = document.createelement("canvas"); var sketch = function(p){ p.setup = function(){ p.size(800, 600, p.opengl); p.fill(170); }; p.draw = function(){ p.pushmatrix(); p.translate(p.width/2, p.height/2); p.box(50); p.popmatrix(); }; }; document.body.appendchild(can); new processing(can, sketch);

this issue in processing.js

for detailed explanation: opengl , opengl es have attributes. attributes can either fetch values buffers or provide constant value. except, in opengl attribute 0 special. can not provide constant value. must values buffer. webgl though based on opengl es 2.0 doesn't have limitation.

so, when webgl running on top of opengl , user not utilize attribute 0 (it's set utilize constant value), webgl has create temporary buffer, fill constant value, , give opengl. slow. hence warning.

the issue in processing have single shader handles multiple utilize cases. has attributes normals, positions, colors, , texture coordinates. depending on inquire processing draw might not utilize of these attributes. illustration commonly might not utilize normals. normals needed in processing back upwards lights if have no lights there no normals (i'm guessing). in case turn off normals. unfortunately if normals happens on attribute 0, in order webgl render has create temp buffer, fill constant value, , render.

the way around utilize attribute 0. in case of processing utilize position data. before linking shaders should phone call bindattriblocation

// "avertex" name of attribute used position info in // processing.js gl.bindattriblocation(program, 0, "avertex");

this create attribute 'avertex' utilize attrib 0 , since every utilize case utilize 'avertex' they'll never warning.

ideally should bind locations. way don't have query them after linking.

javascript google-chrome canvas webgl processing.js