archive-gh-me/twgl.js
1
0
Fork 0
mirror of https://github.com/greggman/twgl.js.git synced 2026-02-01 16:00:22 +00:00
Code Issues Projects Releases Wiki Activity

Make primitives example

Browse Source
This commit is contained in:
Gregg Tavares 2015-03-31 00:49:46 +09:00
parent d4b431cf91
commit 2f79327a14
18 changed files with 520 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
3rdparty/chroma.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
Gruntfile.js
View File

@ -113,7 +113,7 @@ module.exports = function(grunt) {
var docsFiles = srcFiles.concat(extraFiles, 'README.md');
var libFiles = srcFiles.concat(thirdPartyFiles);
var fullLibFiles = [].concat(extraFiles, srcFiles, thirdPartyFiles);
var fullLibFiles = [].concat(srcFiles, extraFiles, thirdPartyFiles);
grunt.initConfig({
jsdoc: {

4
dist/twgl-full.js vendored
View File

File diff suppressed because one or more lines are too long

4
dist/twgl-full.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/twgl.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/twgl.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/global.html
View File

@ -211,7 +211,7 @@
<span class="jsdoc-message">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a>
on Mon Mar 30th 2015 using the <a
on Tue Mar 31st 2015 using the <a
href="https://github.com/terryweiss/docstrap">DocStrap template</a>.
</span>
</footer>

2
docs/index.html
View File

@ -273,7 +273,7 @@ to make common WebGL operations easier and less verbose.</p>
<span class="jsdoc-message">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a>
on Mon Mar 30th 2015 using the <a
on Tue Mar 31st 2015 using the <a
href="https://github.com/terryweiss/docstrap">DocStrap template</a>.
</span>
</footer>

2
docs/m4.html
View File

@ -6004,7 +6004,7 @@ returns the result as a vector with 3 entries.</p>
<span class="jsdoc-message">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a>
on Mon Mar 30th 2015 using the <a
on Tue Mar 31st 2015 using the <a
href="https://github.com/terryweiss/docstrap">DocStrap template</a>.
</span>
</footer>

151
docs/module-twgl.html
View File

@ -500,6 +500,155 @@ program. You can pass this to <a href="module-twgl.html#setBuffersAndAttributes"
</dd>
<dt>
<h4 class="name" id="createAugmentedTypedArray"><span class="type-signature">&lt;static> </span>createAugmentedTypedArray<span class="signature">(opt_type)</span><span class="type-signature"> &rarr; {ArrayBuffer}</span></h4>
</dt>
<dd>
<div class="description">
<p>creates a typed array with a <code>push</code> function attached
so that you can easily <em>push</em> values.</p>
<p><code>push</code> can take multiple arguments. If an argument is an array each element
of the array will be added to the typed array.</p>
<p>Example:</p>
<pre><code>var array = createAugmentedTypedArray(3, 2); // creates a Float32Array with 6 values
array.push(1, 2, 3);
array.push([4, 5, 6]);
// array now contains [1, 2, 3, 4, 5, 6]</code></pre>
<p>//FIXME * Also has <code>numComponents</code> and <code>numElements</code> properties.</p>
<p>//FIXME <em> @param {number} numComponents number of components
//FIXME </em> @param {number} numElements number of elements. The total size of the array will be <code>numComponents * numElements</code>.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>opt_type</code></td>
<td class="type">
<span class="param-type">constructor</span>
</td>
<td class="description last"><p>A constructor for the type. Default = <code>Float32Array</code>.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>A typed array.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">ArrayBuffer</span>
</dd>
</dl>
</dd>
@ -4619,7 +4768,7 @@ setUniforms(programInfo, moreUniforms);</code></pre>
<span class="jsdoc-message">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a>
on Mon Mar 30th 2015 using the <a
on Tue Mar 31st 2015 using the <a
href="https://github.com/terryweiss/docstrap">DocStrap template</a>.
</span>
</footer>

2
docs/modules.list.html
View File

@ -150,7 +150,7 @@
<span class="jsdoc-message">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a>
on Mon Mar 30th 2015 using the <a
on Tue Mar 31st 2015 using the <a
href="https://github.com/terryweiss/docstrap">DocStrap template</a>.
</span>
</footer>

2
docs/primitives.html
View File

@ -2808,7 +2808,7 @@ names that contains 'pos' could be reoriented as positions,
<span class="jsdoc-message">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a>
on Mon Mar 30th 2015 using the <a
on Tue Mar 31st 2015 using the <a
href="https://github.com/terryweiss/docstrap">DocStrap template</a>.
</span>
</footer>

2
docs/v3.html
View File

@ -2889,7 +2889,7 @@ b have the same length.</p>
<span class="jsdoc-message">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a>
on Mon Mar 30th 2015 using the <a
on Tue Mar 31st 2015 using the <a
href="https://github.com/terryweiss/docstrap">DocStrap template</a>.
</span>
</footer>

190
examples/primitives.html Normal file
View File

@ -0,0 +1,190 @@
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0px;
width: 100%;
height: 100%;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="c"></canvas>
</body>
<script id="vs" type="notjs">
uniform mat4 u_worldViewProjection;
uniform vec3 u_lightWorldPos;
uniform mat4 u_world;
uniform mat4 u_viewInverse;
uniform mat4 u_worldInverseTranspose;
attribute vec4 a_position;
attribute vec3 a_normal;
attribute vec2 a_texcoord;
varying vec4 v_position;
varying vec2 v_texCoord;
varying vec3 v_normal;
varying vec3 v_surfaceToLight;
varying vec3 v_surfaceToView;
void main() {
v_texCoord = a_texcoord;
v_position = (u_worldViewProjection * a_position);
v_normal = (u_worldInverseTranspose * vec4(a_normal, 0)).xyz;
v_surfaceToLight = u_lightWorldPos - (u_world * a_position).xyz;
v_surfaceToView = (u_viewInverse[3] - (u_world * a_position)).xyz;
gl_Position = v_position;
}
</script>
<script src="../dist/twgl-full.js"></script>
<script src="../3rdparty/chroma.min.js"></script>
<script id="fs" type="notjs">
precision mediump float;
varying vec4 v_position;
varying vec2 v_texCoord;
varying vec3 v_normal;
varying vec3 v_surfaceToLight;
varying vec3 v_surfaceToView;
uniform vec4 u_lightColor;
uniform vec4 u_diffuseMult;
uniform sampler2D u_diffuse;
uniform vec4 u_specular;
uniform float u_shininess;
uniform float u_specularFactor;
vec4 lit(float l ,float h, float m) {
return vec4(1.0,
abs(l),//max(l, 0.0),
(l > 0.0) ? pow(max(0.0, h), m) : 0.0,
1.0);
}
void main() {
vec4 diffuseColor = texture2D(u_diffuse, v_texCoord) * u_diffuseMult;
vec3 a_normal = normalize(v_normal);
vec3 surfaceToLight = normalize(v_surfaceToLight);
vec3 surfaceToView = normalize(v_surfaceToView);
vec3 halfVector = normalize(surfaceToLight + surfaceToView);
vec4 litR = lit(dot(a_normal, surfaceToLight),
dot(a_normal, halfVector), u_shininess);
vec4 outColor = vec4((
u_lightColor * (diffuseColor * litR.y +
u_specular * litR.z * u_specularFactor)).rgb,
diffuseColor.a);
gl_FragColor = outColor;
}
</script>
<script>
var m4 = twgl.m4;
var gl = twgl.getWebGLContext(document.getElementById("c"));
var programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);
var shapes = [
twgl.primitives.createCubeBufferInfo(gl, 2),
twgl.primitives.createSphereBufferInfo(gl, 1, 24, 12),
twgl.primitives.createPlaneBufferInfo(gl, 2, 2),
twgl.primitives.createTruncatedConeBufferInfo(gl, 1, 0, 2, 24, 1),
];
function rand(min, max) {
return min + Math.random() * (max - min);
}
// Shared values
var lightWorldPosition = [1, 8, -10];
var lightColor = [1, 1, 1, 1];
var camera = m4.identity();
var view = m4.identity();
var viewProjection = m4.identity();
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([
255,255,255,255,
192,192,192,255,
192,192,192,255,
255,255,255,255]));
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
var objects = [];
var drawObjects = [];
var numObjects = 1;
var baseHue = rand(0, 360);
for (var ii = 0; ii < 100; ++ii) {
var uniforms = {
u_lightWorldPos: lightWorldPosition,
u_lightColor: lightColor,
u_diffuseMult: chroma.hsv((baseHue + rand(0, 60)) % 360, 0.4, 0.8).gl(),
u_specular: [1, 1, 1, 1],
u_shininess: 50,
u_specularFactor: 1,
u_diffuse: tex,
u_viewInverse: camera,
u_world: m4.identity(),
u_worldInverseTranspose: m4.identity(),
u_worldViewProjection: m4.identity(),
};
drawObjects.push({
programInfo: programInfo,
bufferInfo: shapes[ii % shapes.length],
uniforms: uniforms,
});
objects.push({
translation: [rand(-10, 10), rand(-10, 10), rand(-10, 10)],
ySpeed: rand(0.1, 0.3),
zSpeed: rand(0.1, 0.3),
uniforms: uniforms,
});
}
function render() {
twgl.resizeCanvasToDisplaySize(gl.canvas);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.CULL_FACE);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
var time = Date.now() * 0.001;
var radius = 6;
var projection = m4.perspective(30 * Math.PI / 180, gl.canvas.clientWidth / gl.canvas.clientHeight, 0.5, 100);
var eye = [1, 4, -20];
var target = [0, 0, 0];
var up = [0, 1, 0];
m4.lookAt(eye, target, up, camera);
m4.inverse(camera, view);
m4.multiply(view, projection, viewProjection);
objects.forEach(function(obj, ndx) {
var uni = obj.uniforms;
var world = uni.u_world;
m4.identity(world);
m4.rotateY(world, time * obj.ySpeed, world);
m4.rotateZ(world, time * obj.zSpeed, world);
m4.translate(world, obj.translation, world);
m4.rotateX(world, time, world);
m4.transpose(m4.inverse(world, uni.u_worldInverseTranspose), uni.u_worldInverseTranspose);
m4.multiply(uni.u_world, viewProjection, uni.u_worldViewProjection);
});
twgl.drawObjectList(drawObjects);
requestAnimationFrame(render);
}
render();
</script>
</html>

8
examples/twgl-cube.html
View File

@ -96,7 +96,13 @@ void main() {
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([255,255,255,255]));
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([
255,255,255,255,
192,192,192,255,
192,192,192,255,
255,255,255,255]));
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
var uniforms = {
u_lightWorldPos: [1, 8, -10],

8
examples/webgl-cube.html
View File

@ -123,7 +123,13 @@ void main() {
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([255,255,255,255]));
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([
255,255,255,255,
192,192,192,255,
192,192,192,255,
255,255,255,255]));
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
function render() {
twgl.resizeCanvasToDisplaySize(gl.canvas);

119
src/primitives.js
View File

@ -43,12 +43,72 @@
root.twgl = root.twgl || {};
root.twgl.primitives = factory.call(root);
}
}(this, function (webglUtils, m4) {
}(this, function (twgl, m4) {
"use strict";
webglUtils = webglUtils || this.twgl;
m4 = m4 || this;
twgl = twgl || this.twgl;
m4 = m4 || twgl.m4;
/**
* Add `push` to a typed array. It just keeps a 'cursor'
* and allows use to `push` values into the array so we
* don't have to manually compute offsets
* @param {TypedArray} typedArray TypedArray to augment
* @param {number} numComponents number of components.
*/
function augmentTypedArray(typedArray, numComponents) {
var cursor = 0;
typedArray.push = function() {
for (var ii = 0; ii < arguments.length; ++ii) {
var value = arguments[ii];
if (value instanceof Array || (value.buffer && value.buffer instanceof ArrayBuffer)) {
for (var jj = 0; jj < value.length; ++jj) {
typedArray[cursor++] = value[jj];
}
} else {
typedArray[cursor++] = value;
}
}
};
typedArray.reset = function(opt_index) {
cursor = opt_index || 0;
};
typedArray.numComponents = numComponents;
Object.defineProperty(typedArray, 'numElements', {
get: function() {
return this.length / this.numComponents | 0;
},
});
return typedArray;
};
/**
* creates a typed array with a `push` function attached
* so that you can easily *push* values.
*
* `push` can take multiple arguments. If an argument is an array each element
* of the array will be added to the typed array.
*
* Example:
*
* var array = createAugmentedTypedArray(3, 2); // creates a Float32Array with 6 values
* array.push(1, 2, 3);
* array.push([4, 5, 6]);
* // array now contains [1, 2, 3, 4, 5, 6]
*
* Also has `numComponents` and `numElements` properties.
*
* @param {number} numComponents number of components
* @param {number} numElements number of elements. The total size of the array will be `numComponents * numElements`.
* @param {constructor} opt_type A constructor for the type. Default = `Float32Array`.
* @return {ArrayBuffer} A typed array.
* @memberOf module:twgl
*/
function createAugmentedTypedArray(numComponents, numElements, opt_type) {
var type = opt_type || Float32Array;
return augmentTypedArray(new type(numComponents * numElements), numComponents);
};
/**
* Creates XZ plane vertices.
@ -76,9 +136,9 @@
matrix = matrix || m4.identity();
var numVertices = (subdivisionsWidth + 1) * (subdivisionsDepth + 1);
var positions = webglUtils.createAugmentedTypedArray(3, numVertices);
var normals = webglUtils.createAugmentedTypedArray(3, numVertices);
var texcoords = webglUtils.createAugmentedTypedArray(2, numVertices);
var positions = createAugmentedTypedArray(3, numVertices);
var normals = createAugmentedTypedArray(3, numVertices);
var texcoords = createAugmentedTypedArray(2, numVertices);
for (var z = 0; z <= subdivisionsDepth; z++) {
for (var x = 0; x <= subdivisionsWidth; x++) {
@ -94,7 +154,7 @@
}
var numVertsAcross = subdivisionsWidth + 1;
var indices = webglUtils.createAugmentedTypedArray(
var indices = createAugmentedTypedArray(
3, subdivisionsWidth * subdivisionsDepth * 2, Uint16Array);
for (var z = 0; z < subdivisionsDepth; z++) {
@ -165,9 +225,9 @@
// spherical coordinates and generating 2 triangles for each quad on a
// ring of the sphere.
var numVertices = (subdivisionsAxis + 1) * (subdivisionsHeight + 1);
var positions = webglUtils.createAugmentedTypedArray(3, numVertices);
var normals = webglUtils.createAugmentedTypedArray(3, numVertices);
var texCoords = webglUtils.createAugmentedTypedArray(2 , numVertices);
var positions = createAugmentedTypedArray(3, numVertices);
var normals = createAugmentedTypedArray(3, numVertices);
var texCoords = createAugmentedTypedArray(2 , numVertices);
// Generate the individual vertices in our vertex buffer.
for (var y = 0; y <= subdivisionsHeight; y++) {
@ -191,7 +251,7 @@
}
var numVertsAround = subdivisionsAxis + 1;
var indices = webglUtils.createAugmentedTypedArray(3, subdivisionsAxis * subdivisionsHeight * 2, Uint16Array);
var indices = createAugmentedTypedArray(3, subdivisionsAxis * subdivisionsHeight * 2, Uint16Array);
for (var x = 0; x < subdivisionsAxis; x++) {
for (var y = 0; y < subdivisionsHeight; y++) {
// Make triangle 1 of quad.
@ -269,10 +329,10 @@
];
var numVertices = 6 * 4;
var positions = webglUtils.createAugmentedTypedArray(3, numVertices);
var normals = webglUtils.createAugmentedTypedArray(3, numVertices);
var texCoords = webglUtils.createAugmentedTypedArray(2 , numVertices);
var indices = webglUtils.createAugmentedTypedArray(3, 6 * 2, Uint16Array);
var positions = createAugmentedTypedArray(3, numVertices);
var normals = createAugmentedTypedArray(3, numVertices);
var texCoords = createAugmentedTypedArray(2 , numVertices);
var indices = createAugmentedTypedArray(3, 6 * 2, Uint16Array);
for (var f = 0; f < 6; ++f) {
var faceIndices = CUBE_FACE_INDICES[f];
@ -346,10 +406,10 @@
var extra = (topCap ? 2 : 0) + (bottomCap ? 2 : 0);
var numVertices = (radialSubdivisions + 1) * (verticalSubdivisions + 1 + extra);
var positions = webglUtils.createAugmentedTypedArray(3, numVertices);
var normals = webglUtils.createAugmentedTypedArray(3, numVertices);
var texCoords = webglUtils.createAugmentedTypedArray(2, numVertices);
var indices = webglUtils.createAugmentedTypedArray(3, radialSubdivisions * (verticalSubdivisions + extra) * 2, Uint16Array);
var positions = createAugmentedTypedArray(3, numVertices);
var normals = createAugmentedTypedArray(3, numVertices);
var texCoords = createAugmentedTypedArray(2, numVertices);
var indices = createAugmentedTypedArray(3, radialSubdivisions * (verticalSubdivisions + extra) * 2, Uint16Array);
var vertsAroundEdge = radialSubdivisions + 1;
@ -791,11 +851,11 @@
var numVerts = positions.length / 3;
var arrays = {
position: webglUtils.createAugmentedTypedArray(3, numVerts),
texcoord: webglUtils.createAugmentedTypedArray(2, numVerts),
normal: webglUtils.createAugmentedTypedArray(3, numVerts),
color: webglUtils.createAugmentedTypedArray(4, numVerts, Uint8Array),
indices: webglUtils.createAugmentedTypedArray(3, numVerts / 3, Uint16Array),
position: createAugmentedTypedArray(3, numVerts),
texcoord: createAugmentedTypedArray(2, numVerts),
normal: createAugmentedTypedArray(3, numVerts),
color: createAugmentedTypedArray(4, numVerts, Uint8Array),
indices: createAugmentedTypedArray(3, numVerts / 3, Uint16Array),
};
arrays.position.push(positions);
@ -828,7 +888,7 @@
function expandToUnindexed(channel) {
var srcBuffer = vertices[channel];
var numComponents = srcBuffer.numComponents;
var dstBuffer = webglUtils.createAugmentedTypedArray(numComponents, numElements, srcBuffer.constructor);
var dstBuffer = createAugmentedTypedArray(numComponents, numElements, srcBuffer.constructor);
for (var ii = 0; ii < numElements; ++ii) {
var ndx = indices[ii];
var offset = ndx * numComponents;
@ -1024,7 +1084,7 @@
function makeRandomVertexColors(vertices, options) {
options = options || {};
var numElements = vertices.position.numElements;
var vcolors = webglUtils.createAugmentedTypedArray(4, numElements, Uint8Array);
var vcolors = createAugmentedTypedArray(4, numElements, Uint8Array);
var rand = options.rand || function(ndx, channel) {
return channel < 3 ? randInt(256) : 255;
};
@ -1055,7 +1115,7 @@
function createBufferFunc(fn) {
return function(gl) {
var arrays = fn.apply(this, Array.prototype.slice.call(arguments, 1));
return webglUtils.createBuffersFromArrays(gl, arrays);
return twgl.createBuffersFromArrays(gl, arrays);
}
};
@ -1066,7 +1126,7 @@
function createBufferInfoFunc(fn) {
return function(gl) {
var arrays = fn.apply(null, Array.prototype.slice.call(arguments, 1));
return webglUtils.createBufferInfoFromArrays(gl, arrays);
return twgl.createBufferInfoFromArrays(gl, arrays);
};
};
@ -1074,6 +1134,7 @@
create3DFBufferInfo: createBufferInfoFunc(create3DFVertices),
create3DFBuffer: createBufferFunc(create3DFVertices),
create3DFVertices: create3DFVertices,
createAugmentedTypedArray: createAugmentedTypedArray,
createCubeBufferInfo: createBufferInfoFunc(createCubeVertices),
createCubeBuffers: createBufferFunc(createCubeVertices),
createCubeVertices: createCubeVertices,
@ -1083,7 +1144,7 @@
createSphereBufferInfo: createBufferInfoFunc(createSphereVertices),
createSphereBuffers: createBufferFunc(createSphereVertices),
createSphereVertices: createSphereVertices,
createTruncatedConeBufferInfo: createBufferFunc(createTruncatedConeVertices),
createTruncatedConeBufferInfo: createBufferInfoFunc(createTruncatedConeVertices),
createTruncatedConeBuffers: createBufferFunc(createTruncatedConeVertices),
createTruncatedConeVertices: createTruncatedConeVertices,
deindexVertices: deindexVertices,

70
src/twgl.js
View File

@ -678,7 +678,7 @@
* and allows use to `push` values into the array so we
* don't have to manually compute offsets
* @param {TypedArray} typedArray TypedArray to augment
* @param {number} numComponents number of components.
FIXME * @param {number} numComponents number of components.
*/
function augmentTypedArray(typedArray, numComponents) {
var cursor = 0;
@ -697,12 +697,12 @@
typedArray.reset = function(opt_index) {
cursor = opt_index || 0;
};
typedArray.numComponents = numComponents;
Object.defineProperty(typedArray, 'numElements', {
get: function() {
return this.length / this.numComponents | 0;
},
});
// typedArray.numComponents = numComponents;
// Object.defineProperty(typedArray, 'numElements', {
// get: function() {
// return this.length / this.numComponents | 0;
// },
// });
return typedArray;
};
@ -720,17 +720,17 @@
* array.push([4, 5, 6]);
* // array now contains [1, 2, 3, 4, 5, 6]
*
* Also has `numComponents` and `numElements` properties.
//FIXME * Also has `numComponents` and `numElements` properties.
*
* @param {number} numComponents number of components
* @param {number} numElements number of elements. The total size of the array will be `numComponents * numElements`.
//FIXME * @param {number} numComponents number of components
//FIXME * @param {number} numElements number of elements. The total size of the array will be `numComponents * numElements`.
* @param {constructor} opt_type A constructor for the type. Default = `Float32Array`.
* @return {ArrayBuffer} A typed array.
* @memberOf module:twgl
*/
function createAugmentedTypedArray(numComponents, numElements, opt_type) {
function createAugmentedTypedArray(size, opt_type) {
var type = opt_type || Float32Array;
return augmentTypedArray(new type(numComponents * numElements), numComponents);
return augmentTypedArray(new type(size));
};
function createBufferFromTypedArray(gl, array, type, drawType) {
@ -804,23 +804,25 @@
};
}
if (!array.numComponents) {
array.numComponents = guessNumComponentsFromName(name, array.length);
}
// if (!array.numComponents) {
// array.numComponents = guessNumComponentsFromName(name, array.length);
// }
var type = array.type;
if (!type) {
if (name === "indices") {
type = Uint16Array;
} else {
type = Float32Array;
}
}
var numElements = array.data.length / array.numComponents;
if (numElements % 1) {
console.warn("numComponents = ", array.numComponents, "doesn't match length = ", array.length, "of data given");
}
var typedArray = createAugmentedTypedArray(array.numComponents, numElements, type);
typedArray.push(array.data);
return typedArray;
// var numElements = array.data.length / array.numComponents;
// if (numElements % 1) {
// console.warn("numComponents = ", array.numComponents, "doesn't match length = ", array.length, "of data given");
// }
//FIXME var typedArray = createAugmentedTypedArray(array.length, type);
//FIXME typedArray.push(array.data);
return new type(array.data);
};
/**
@ -884,14 +886,26 @@
/**
* tries to get the number of elements from a set of arrays.
*/
var positionKeys = ['position', 'positions', 'a_position'];
//FIXME
function getNumElementsFromNonIndexedArrays(arrays) {
var key = Object.keys(arrays)[0];
var array = arrays[key];
if (isArrayBuffer(array)) {
return array.numElements;
} else {
return array.data.length / array.numComponents;
var key;
for (var ii = 0; ii < positionKeys.length; ++ii) {
key = positionKeys[ii];
if (key in arrays) {
break;
}
}
if (ii == positionKeys.length) {
key = Object.keys(arrays)[0];
}
var length = array.length || array.data.length;
var numComponents = array.numComponents || guessNumComponentsFromName(key, length);
var numElements = length / numComponents;
if (length % numComponents > 0) {
throw "numComponents " + numComponent + " not correct for length " + length;
}
return numElements;
};
/**