|
let m1; |
|
let m2; |
|
let shader1; |
|
|
|
/* Follow steps taken by loadShader |
|
https://github.com/processing/p5.js/blob/e9110a6a09574acfee3fed445c887e5b0f5467a2/src/webgl/loading.js#L104 |
|
|
|
And use buffers available for a p5.Geometry as inferred from p5.rendererGL.retainedMode |
|
https://github.com/processing/p5.js/blob/374acfb44588bfd565c54d61264df197d798d121/src/webgl/p5.RendererGL.js#L151 |
|
|
|
buffer source | attribute name | buffer format |
|
---------------|---------------------|--------------------------------------------------- |
|
lineVertices | vec3 aPosition | [ [ x, y, z ], [ x, y, z ] ... ] |
|
lineNormals | vec4 aDirection | [ [ x, y, z, w ], [ x, y, z, w ] ... ] |
|
vertices | vec3 aPostion | [ p5.Vector( x, y, z ), p5.Vector( x, y, z )... ] |
|
vertexNormals | vec3 aNormal | [ p5.Vector( x, y, z ), p5.Vector( x, y, z )... ] |
|
vertexColors | vec4 aMaterialColor | [ r, g, b, a, r, g, b, a ... ] |
|
uvs | vec2 aTexCoord | [ [ x, y ], [ x, y ] ... ] |
|
|
|
new p5.RenderBuffer( 3, 'lineVertices', 'lineVertexBuffer', 'aPosition', this, this._flatten ) |
|
new p5.RenderBuffer( 4, 'lineNormals', 'lineNormalBuffer', 'aDirection', this, this._flatten ) |
|
new p5.RenderBuffer( 3, 'vertices', 'vertexBuffer', 'aPosition', this, this._vToNArray ) |
|
new p5.RenderBuffer( 3, 'vertexNormals', 'normalBuffer', 'aNormal', this, this._vToNArray ) |
|
new p5.RenderBuffer( 4, 'vertexColors', 'colorBuffer', 'aMaterialColor', this ) |
|
new p5.RenderBuffer( 2, 'uvs', 'uvBuffer', 'aTexCoord', this, this._flatten ) |
|
|
|
|
|
The buffer format can be simplified if the p5.rendererGL constructor is modified |
|
to expect flat arrays, instead of doing the flattening in-situ on a per-case basis. |
|
*/ |
|
|
|
function preload () |
|
{ |
|
shader1 = loadShader( "vert.glsl", "frag.glsl" ); |
|
} |
|
|
|
function setup () |
|
{ |
|
createCanvas( 400, 400, WEBGL ); |
|
|
|
/* |
|
If p5.Geometry.faces.length != 0, then gl.drawElements is used. |
|
Otherwise, gl.drawArrays is used. |
|
|
|
p5.model |
|
-> p5.RendererGL.createBuffers |
|
-> p5.RendererGL.prototype.drawBuffers |
|
-> p5.RendererGL.prototype._drawElements |
|
*/ |
|
|
|
// gl.drawElements |
|
m1 = new p5.Geometry(); |
|
m1.gid = "placeholderName1"; |
|
|
|
m1.vertices = [ |
|
|
|
new p5.Vector( 0, 0, 40 ), |
|
new p5.Vector( 22.5, 22.5, 0 ), |
|
new p5.Vector( 22.5, - 22.5, 0 ), |
|
new p5.Vector( - 22.5, - 22.5, 0 ), |
|
new p5.Vector( - 22.5, 22.5, 0 ), |
|
new p5.Vector( 0, 0, - 40 ), |
|
]; |
|
|
|
m1.faces = [ // if defined, gl.drawElements is used, otherwise gl.drawArrays |
|
|
|
[ 0, 1, 2 ], |
|
[ 0, 2, 3 ], |
|
[ 0, 3, 4 ], |
|
[ 0, 4, 1 ], |
|
[ 5, 4, 3 ], |
|
[ 5, 3, 2 ], |
|
[ 5, 2, 1 ], |
|
[ 5, 1, 4 ] |
|
]; |
|
|
|
m1.vertexNormals = [ // shove vertex colors here... |
|
|
|
new p5.Vector( 1, 0, 0 ), |
|
new p5.Vector( 0, 1, 0 ), |
|
new p5.Vector( 0, 1, 0 ), |
|
new p5.Vector( 0, 1, 0 ), |
|
new p5.Vector( 0, 1, 0 ), |
|
new p5.Vector( 1, 0, 0 ), |
|
]; |
|
|
|
// gl.drawArrays |
|
m2 = new p5.Geometry(); |
|
m2.gid = "placeholderName2"; |
|
|
|
for ( let face of m1.faces ) |
|
{ |
|
for ( let i = 0; i < 3; i += 1 ) |
|
{ |
|
m2.vertices.push( m1.vertices[ face[ i ] ].copy() ); |
|
m2.vertexNormals.push( m1.vertexNormals[ face[ i ] ].copy() ); |
|
} |
|
} |
|
} |
|
|
|
function draw () |
|
{ |
|
shader( shader1 ); |
|
|
|
clear(); |
|
rotateX( frameCount * 0.01 ); |
|
rotateY( frameCount * 0.01 ); |
|
|
|
// Edit attributes on the "fly"... |
|
m1.vertexNormals[ 0 ] = new p5.Vector( 0, 0, 1 ); |
|
m1.vertexNormals[ 5 ] = new p5.Vector( 0, 0, 1 ); |
|
m1.vertices[ 0 ] = new p5.Vector( 0, 0, 80 ); |
|
|
|
model( m1 ); |
|
translate( 100, 0, 0 ); |
|
model( m2 ); |
|
} |