From 539a3ccb1571d5a3ec6f25b06961896fdae5c4f4 Mon Sep 17 00:00:00 2001 From: Trung Le Date: Sun, 14 Feb 2016 15:42:18 -0500 Subject: [PATCH 01/17] [vertex_format] - Initial commit --- samples/vertex_format.html | 368 +++++++++++++++++++++++++++++++++++++ 1 file changed, 368 insertions(+) create mode 100644 samples/vertex_format.html diff --git a/samples/vertex_format.html b/samples/vertex_format.html new file mode 100644 index 0000000..1e9e4d5 --- /dev/null +++ b/samples/vertex_format.html @@ -0,0 +1,368 @@ + + + + + WebGL 2 Samples - vertex_format + + + + + + + +
WebGL 2 Samples - vertex_format
+ + + + + + + + + + + + From a61c0e1ae28e3722d5301fe2b45a8880ea6989b8 Mon Sep 17 00:00:00 2001 From: Trung Le Date: Sun, 14 Feb 2016 19:19:50 -0500 Subject: [PATCH 02/17] [texture_format] - Final implementation --- README.md | 1 + index.html | 3 + samples/geo_vertex_format.html | 417 +++++++++++++++++++++++++++++++++ samples/vertex_format.html | 368 ----------------------------- 4 files changed, 421 insertions(+), 368 deletions(-) create mode 100644 samples/geo_vertex_format.html delete mode 100644 samples/vertex_format.html diff --git a/README.md b/README.md index 0f6efd5..468a9a6 100644 --- a/README.md +++ b/README.md @@ -45,6 +45,7 @@ Inspired by and ported from Christophe Riccio's ([@Groovounet](https://github.co |[fbo_multisample](http://webglsamples.org/WebGL2Samples/#fbo_multisample)|:white_check_mark:|:x: crashed|:x: WebGL: renderbufferStorageMultisample: Multisampling is still under development, and is currently disabled|:x: crashed| |[fbo_new_blend_equation](http://webglsamples.org/WebGL2Samples/#fbo_new_blend_equation)|:white_check_mark:|:grey_question:|:white_check_mark:|:grey_question:| |[buffer_copy](http://webglsamples.org/WebGL2Samples/#buffer_copy)|:white_check_mark:|:grey_question:|:white_check_mark:|:grey_question:| +|[geo_texture_format](http://webglsamples.org/WebGL2Samples/#geo_texture_format)|:grey_question:|:white_check_mark:|:grey_question:|:white_check_mark:| ## Running the Samples Locally diff --git a/index.html b/index.html index 0f3c69c..d1c2a22 100644 --- a/index.html +++ b/index.html @@ -253,6 +253,9 @@

WebGL 2.0 Samples

], "Buffer Objects":[ "buffer_copy" + ], + "Geometry": [ + "geo_vertex_format" ] }; diff --git a/samples/geo_vertex_format.html b/samples/geo_vertex_format.html new file mode 100644 index 0000000..8259211 --- /dev/null +++ b/samples/geo_vertex_format.html @@ -0,0 +1,417 @@ + + + + + WebGL 2 Samples - geo_vertex_format + + + + + + + +
WebGL 2 Samples - geo_vertex_format
+
This sample demonstrates the use of different vertex formats. gl.SHORT for normals attribute and gl.UNSIGNED_BYTE for colors attribute. + + + + + + + + + + + + diff --git a/samples/vertex_format.html b/samples/vertex_format.html deleted file mode 100644 index 1e9e4d5..0000000 --- a/samples/vertex_format.html +++ /dev/null @@ -1,368 +0,0 @@ - - - - - WebGL 2 Samples - vertex_format - - - - - - - -
WebGL 2 Samples - vertex_format
- - - - - - - - - - - - From e68396e5d5f5670a8f0d47ed59c6c82a9eee79fb Mon Sep 17 00:00:00 2001 From: Trung Le Date: Sun, 14 Feb 2016 19:25:48 -0500 Subject: [PATCH 03/17] [vertex_format] - Updated small comment detail --- samples/geo_vertex_format.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/geo_vertex_format.html b/samples/geo_vertex_format.html index 8259211..c47b797 100644 --- a/samples/geo_vertex_format.html +++ b/samples/geo_vertex_format.html @@ -398,7 +398,7 @@ // For long running process, resources will need to be deleted to avoid // the process from bogging down. // This code is included here to give a general idea of how to clean up - // resources in WebGL. Do not uncomment directly, you should only handle + // resources in WebGL for this sample. Do not uncomment directly, you should only handle // cleaning up resources outside of the animation loop. // // gl.deleteBuffer(vertexPosBuffer); From e79fb07cc902b517b8cbd81008980e3242f6cd14 Mon Sep 17 00:00:00 2001 From: shrekshao Date: Sat, 20 Feb 2016 23:00:20 -0500 Subject: [PATCH 04/17] half_float_wip --- samples/geo_vertex_format.html | 50 ++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/samples/geo_vertex_format.html b/samples/geo_vertex_format.html index c47b797..514a64f 100644 --- a/samples/geo_vertex_format.html +++ b/samples/geo_vertex_format.html @@ -158,6 +158,56 @@ gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, null); + //http://stackoverflow.com/questions/28688838/convert-a-number-into-a-16-bit-float-stored-as-bytes-and-back + //http://croquetweak.blogspot.de/2014/08/deconstructing-floats-frexp-and-ldexp.html + function frexp(value) { + if (value === 0) return [value, 0]; + var data = new DataView(new ArrayBuffer(8)); + data.setFloat64(0, value); + var bits = (data.getUint32(0) >>> 20) & 0x7FF; + if (bits === 0) { + data.setFloat64(0, value * Math.pow(2, 64)); + bits = ((data.getUint32(0) >>> 20) & 0x7FF) - 64; + } + var exponent = bits - 1022, + mantissa = ldexp(value, -exponent); + return [mantissa, exponent]; + } + + function ldexp(mantissa, exponent) { + return exponent > 1023 // avoid multiplying by infinity + ? mantissa * Math.pow(2, 1023) * Math.pow(2, exponent - 1023) + : exponent < -1074 // avoid multiplying by zero + ? mantissa * Math.pow(2, -1074) * Math.pow(2, exponent + 1074) + : mantissa * Math.pow(2, exponent); + } + + function encodeFloat16(value) { + var ary = frexp(value); + var mantissa = ary[0]; + var exponent = ary[1]; + + var signBit = mantissa < 0 ? 1 : 0; + var data = new DataView(new ArrayBuffer(2)); + //data.setUint16(15, signBit); + //data.setUint16(10, exponent); + //data.setUint16(0, mantissa / (1 / 1024)); + + data.setUint16(0, signBit << 15); + data.setUint16(0, exponent << 9); + data.setUint16(0, Math.abs(mantissa) / (1 / 1024)); + + return data; + } + + //var ns = encodeFloat16(4); + var uint16 = new Uint16Array(new ArrayBuffer(3 * 2)); + var xxx = encodeFloat16(4).getUint16(0); + var tmp_ary = [encodeFloat16(4).getUint16(0), encodeFloat16(99.456).getUint16(0)]; + uint16.set(tmp_ary, 0); + + + var normals = new Int8Array([ // Front face 0, 0, -1, From 51e9cd51693af7d0a45b5a607da10c6c7c7ffe55 Mon Sep 17 00:00:00 2001 From: shrekshao Date: Sat, 20 Feb 2016 23:27:29 -0500 Subject: [PATCH 05/17] uint16 try --- samples/geo_vertex_format.html | 43 ++++++++++++++++++++++++++++++---- 1 file changed, 38 insertions(+), 5 deletions(-) diff --git a/samples/geo_vertex_format.html b/samples/geo_vertex_format.html index 514a64f..4009f20 100644 --- a/samples/geo_vertex_format.html +++ b/samples/geo_vertex_format.html @@ -183,6 +183,8 @@ } function encodeFloat16(value) { + //no range checking at present + var ary = frexp(value); var mantissa = ary[0]; var exponent = ary[1]; @@ -194,16 +196,47 @@ //data.setUint16(0, mantissa / (1 / 1024)); data.setUint16(0, signBit << 15); - data.setUint16(0, exponent << 9); + data.setUint16(0, (exponent + 15) << 9); data.setUint16(0, Math.abs(mantissa) / (1 / 1024)); - return data; + return data.getUint16(0); } //var ns = encodeFloat16(4); - var uint16 = new Uint16Array(new ArrayBuffer(3 * 2)); - var xxx = encodeFloat16(4).getUint16(0); - var tmp_ary = [encodeFloat16(4).getUint16(0), encodeFloat16(99.456).getUint16(0)]; + var numVertices = 24; + var uint16 = new Uint16Array(new ArrayBuffer(2 * 3 * numVertices)); + //var xxx = encodeFloat16(4).getUint16(0); + var tmp_ary = [ + encodeFloat16(0), encodeFloat16(0), encodeFloat16(-1), + encodeFloat16(0), encodeFloat16(0), encodeFloat16(-1), + encodeFloat16(0), encodeFloat16(0), encodeFloat16(-1), + encodeFloat16(0), encodeFloat16(0), encodeFloat16(-1), + + encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), + encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), + encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), + encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), + + encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), + encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), + encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), + encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), + + encodeFloat16(0), encodeFloat16(-1), encodeFloat16(0), + encodeFloat16(0), encodeFloat16(-1), encodeFloat16(0), + encodeFloat16(0), encodeFloat16(-1), encodeFloat16(0), + encodeFloat16(0), encodeFloat16(-1), encodeFloat16(0), + + encodeFloat16(-1), encodeFloat16(0), encodeFloat16(0), + encodeFloat16(-1), encodeFloat16(0), encodeFloat16(0), + encodeFloat16(-1), encodeFloat16(0), encodeFloat16(0), + encodeFloat16(-1), encodeFloat16(0), encodeFloat16(0), + + encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), + encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), + encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), + encodeFloat16(1), encodeFloat16(0), encodeFloat16(0) + ]; uint16.set(tmp_ary, 0); From d3d9aebffe0e42f9cbf4e67a9f0168626076300a Mon Sep 17 00:00:00 2001 From: shrekshao Date: Sat, 20 Feb 2016 23:45:17 -0500 Subject: [PATCH 06/17] int16, half float hard code, work --- samples/geo_vertex_format.html | 175 ++++++++++++++++++++------------- 1 file changed, 109 insertions(+), 66 deletions(-) diff --git a/samples/geo_vertex_format.html b/samples/geo_vertex_format.html index 4009f20..4e70045 100644 --- a/samples/geo_vertex_format.html +++ b/samples/geo_vertex_format.html @@ -47,7 +47,8 @@ v_lightDirection = vec3(u_viewProj * vec4(u_lightPosition - modelPosition, 1.0)); gl_Position = u_viewProj * vec4(modelPosition, 1.0); - v_normal = vec3(u_viewProj * u_modelInvTrans * vec4(a_normal, 0.0)); + //v_normal = vec3(u_viewProj * u_modelInvTrans * vec4(a_normal, 0.0)); + v_normal = a_normal; // Pass through v_color = a_color; @@ -83,7 +84,11 @@ float lightIntensity = dot(normalize(v_normal), normalize(v_lightDirection)); lightIntensity = lightIntensity, 0.0, 1.0 + u_ambient; - color = color * lightIntensity; + //color = color * lightIntensity; + + color = vec4(v_normal, 1.0); + + //color = vec4(1.0, 1.0, -1.0, 1.0); } @@ -195,89 +200,126 @@ //data.setUint16(10, exponent); //data.setUint16(0, mantissa / (1 / 1024)); - data.setUint16(0, signBit << 15); - data.setUint16(0, (exponent + 15) << 9); - data.setUint16(0, Math.abs(mantissa) / (1 / 1024)); + data.setInt16(0, signBit << 15); + data.setInt16(0, (exponent + 15) << 9); + data.setInt16(0, Math.abs(mantissa) / (1 / 1024)); - return data.getUint16(0); + return data.getInt16(0); } - //var ns = encodeFloat16(4); var numVertices = 24; - var uint16 = new Uint16Array(new ArrayBuffer(2 * 3 * numVertices)); - //var xxx = encodeFloat16(4).getUint16(0); - var tmp_ary = [ - encodeFloat16(0), encodeFloat16(0), encodeFloat16(-1), - encodeFloat16(0), encodeFloat16(0), encodeFloat16(-1), - encodeFloat16(0), encodeFloat16(0), encodeFloat16(-1), - encodeFloat16(0), encodeFloat16(0), encodeFloat16(-1), + var normals = new Int16Array(new ArrayBuffer(2 * 3 * numVertices)); + // var tmp_ary = [ + // encodeFloat16(0), encodeFloat16(0), encodeFloat16(-1), + // encodeFloat16(0), encodeFloat16(0), encodeFloat16(-1), + // encodeFloat16(0), encodeFloat16(0), encodeFloat16(-1), + // encodeFloat16(0), encodeFloat16(0), encodeFloat16(-1), - encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), - encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), - encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), - encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), + // encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), + // encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), + // encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), + // encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), - encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), - encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), - encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), - encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), + // encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), + // encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), + // encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), + // encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), - encodeFloat16(0), encodeFloat16(-1), encodeFloat16(0), - encodeFloat16(0), encodeFloat16(-1), encodeFloat16(0), - encodeFloat16(0), encodeFloat16(-1), encodeFloat16(0), - encodeFloat16(0), encodeFloat16(-1), encodeFloat16(0), + // encodeFloat16(0), encodeFloat16(-1), encodeFloat16(0), + // encodeFloat16(0), encodeFloat16(-1), encodeFloat16(0), + // encodeFloat16(0), encodeFloat16(-1), encodeFloat16(0), + // encodeFloat16(0), encodeFloat16(-1), encodeFloat16(0), - encodeFloat16(-1), encodeFloat16(0), encodeFloat16(0), - encodeFloat16(-1), encodeFloat16(0), encodeFloat16(0), - encodeFloat16(-1), encodeFloat16(0), encodeFloat16(0), - encodeFloat16(-1), encodeFloat16(0), encodeFloat16(0), + // encodeFloat16(-1), encodeFloat16(0), encodeFloat16(0), + // encodeFloat16(-1), encodeFloat16(0), encodeFloat16(0), + // encodeFloat16(-1), encodeFloat16(0), encodeFloat16(0), + // encodeFloat16(-1), encodeFloat16(0), encodeFloat16(0), - encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), - encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), - encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), - encodeFloat16(1), encodeFloat16(0), encodeFloat16(0) - ]; - uint16.set(tmp_ary, 0); - - - - var normals = new Int8Array([ + // encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), + // encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), + // encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), + // encodeFloat16(1), encodeFloat16(0), encodeFloat16(0) + // ]; + var halfFloat_1 = 0x3C00; + var tmp_ary = [ // Front face - 0, 0, -1, - 0, 0, -1, - 0, 0, -1, - 0, 0, -1, + halfFloat_1, 0, 0, + halfFloat_1, 0, 0, + halfFloat_1, 0, 0, + halfFloat_1, 0, 0, // Back face - 0, 0, 1, - 0, 0, 1, - 0, 0, 1, - 0, 0, 1, + halfFloat_1, halfFloat_1, 0, + halfFloat_1, halfFloat_1, 0, + halfFloat_1, halfFloat_1, 0, + halfFloat_1, halfFloat_1, 0, // Top face - 0, 1, 0, - 0, 1, 0, - 0, 1, 0, - 0, 1, 0, + 0, halfFloat_1, 0, + 0, halfFloat_1, 0, + 0, halfFloat_1, 0, + 0, halfFloat_1, 0, // Bottom face - 0, -1, 0, - 0, -1, 0, - 0, -1, 0, - 0, -1, 0, + 0, halfFloat_1, halfFloat_1, + 0, halfFloat_1, halfFloat_1, + 0, halfFloat_1, halfFloat_1, + 0, halfFloat_1, halfFloat_1, // Right face - -1, 0, 0, - -1, 0, 0, - -1, 0, 0, - -1, 0, 0, + 0, 0, halfFloat_1, + 0, 0, halfFloat_1, + 0, 0, halfFloat_1, + 0, 0, halfFloat_1, // Left face - 1, 0, 0, - 1, 0, 0, - 1, 0, 0, - 1, 0, 0 - ]); + halfFloat_1, 0, halfFloat_1, + halfFloat_1, 0, halfFloat_1, + halfFloat_1, 0, halfFloat_1, + halfFloat_1, 0, halfFloat_1 + ]; + normals.set(tmp_ary, 0); + + + + // var normals = new Int8Array([ + // // Front face + // 0, 0, -1, + // 0, 0, -1, + // 0, 0, -1, + // 0, 0, -1, + + // // Back face + // 0, 0, 1, + // 0, 0, 1, + // 0, 0, 1, + // 0, 0, 1, + + // // Top face + // 0, 1, 0, + // 0, 1, 0, + // 0, 1, 0, + // 0, 1, 0, + + // // Bottom face + // 0, -1, 0, + // 0, -1, 0, + // 0, -1, 0, + // 0, -1, 0, + + // // Right face + // -1, 0, 0, + // -1, 0, 0, + // -1, 0, 0, + // -1, 0, 0, + + // // Left face + // 1, 0, 0, + // 1, 0, 0, + // 1, 0, 0, + // 1, 0, 0 + // ]); + var vertexNorBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexNorBuffer); gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW); @@ -371,7 +413,8 @@ gl.bindBuffer(gl.ARRAY_BUFFER, vertexNorBuffer); gl.enableVertexAttribArray(NORMAL_LOCATION); - gl.vertexAttribPointer(NORMAL_LOCATION, 3, gl.BYTE, false, 0, 0); + //gl.vertexAttribPointer(NORMAL_LOCATION, 3, gl.BYTE, false, 0, 0); + gl.vertexAttribPointer(NORMAL_LOCATION, 3, gl.HALF_FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, null); gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexBuffer); From 2df84bcda397a2323aa70b8dc7e667f454f2dec2 Mon Sep 17 00:00:00 2001 From: shrekshao Date: Sun, 21 Feb 2016 00:08:00 -0500 Subject: [PATCH 07/17] convert half float success --- samples/geo_vertex_format.html | 112 ++++++++++++++++++++++----------- 1 file changed, 75 insertions(+), 37 deletions(-) diff --git a/samples/geo_vertex_format.html b/samples/geo_vertex_format.html index 4e70045..c9544a7 100644 --- a/samples/geo_vertex_format.html +++ b/samples/geo_vertex_format.html @@ -191,18 +191,24 @@ //no range checking at present var ary = frexp(value); - var mantissa = ary[0]; - var exponent = ary[1]; + var mantissa = ary[0] * 2 - 1; + var exponent = ary[1] - 1; var signBit = mantissa < 0 ? 1 : 0; var data = new DataView(new ArrayBuffer(2)); //data.setUint16(15, signBit); //data.setUint16(10, exponent); //data.setUint16(0, mantissa / (1 / 1024)); + var a = signBit << 15; + var b = (exponent + 15) << 10; + var c = Math.abs(mantissa) / (1 / 1024); - data.setInt16(0, signBit << 15); - data.setInt16(0, (exponent + 15) << 9); - data.setInt16(0, Math.abs(mantissa) / (1 / 1024)); + data.setInt16(0, a + b + c); + + + // data.setInt16(0, signBit << 15); + // data.setInt16(0, (exponent + 15) << 9); + // data.setInt16(0, Math.abs(mantissa) / (1 / 1024)); return data.getInt16(0); } @@ -240,44 +246,76 @@ // encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), // encodeFloat16(1), encodeFloat16(0), encodeFloat16(0) // ]; - var halfFloat_1 = 0x3C00; var tmp_ary = [ - // Front face - halfFloat_1, 0, 0, - halfFloat_1, 0, 0, - halfFloat_1, 0, 0, - halfFloat_1, 0, 0, + encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), + encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), + encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), + encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), + + encodeFloat16(0), encodeFloat16(1), encodeFloat16(1), + encodeFloat16(0), encodeFloat16(1), encodeFloat16(1), + encodeFloat16(0), encodeFloat16(1), encodeFloat16(1), + encodeFloat16(0), encodeFloat16(1), encodeFloat16(1), + + encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), + encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), + encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), + encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), + + encodeFloat16(1), encodeFloat16(1), encodeFloat16(0), + encodeFloat16(1), encodeFloat16(1), encodeFloat16(0), + encodeFloat16(1), encodeFloat16(1), encodeFloat16(0), + encodeFloat16(1), encodeFloat16(1), encodeFloat16(0), + + encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), + encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), + encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), + encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), + + encodeFloat16(1), encodeFloat16(0), encodeFloat16(1), + encodeFloat16(1), encodeFloat16(0), encodeFloat16(1), + encodeFloat16(1), encodeFloat16(0), encodeFloat16(1), + encodeFloat16(1), encodeFloat16(0), encodeFloat16(1) + ]; + + // var halfFloat_1 = 0x3C00; + // var tmp_ary = [ + // // Front face + // halfFloat_1, 0, 0, + // halfFloat_1, 0, 0, + // halfFloat_1, 0, 0, + // halfFloat_1, 0, 0, - // Back face - halfFloat_1, halfFloat_1, 0, - halfFloat_1, halfFloat_1, 0, - halfFloat_1, halfFloat_1, 0, - halfFloat_1, halfFloat_1, 0, + // // Back face + // halfFloat_1, halfFloat_1, 0, + // halfFloat_1, halfFloat_1, 0, + // halfFloat_1, halfFloat_1, 0, + // halfFloat_1, halfFloat_1, 0, - // Top face - 0, halfFloat_1, 0, - 0, halfFloat_1, 0, - 0, halfFloat_1, 0, - 0, halfFloat_1, 0, + // // Top face + // 0, halfFloat_1, 0, + // 0, halfFloat_1, 0, + // 0, halfFloat_1, 0, + // 0, halfFloat_1, 0, - // Bottom face - 0, halfFloat_1, halfFloat_1, - 0, halfFloat_1, halfFloat_1, - 0, halfFloat_1, halfFloat_1, - 0, halfFloat_1, halfFloat_1, + // // Bottom face + // 0, halfFloat_1, halfFloat_1, + // 0, halfFloat_1, halfFloat_1, + // 0, halfFloat_1, halfFloat_1, + // 0, halfFloat_1, halfFloat_1, - // Right face - 0, 0, halfFloat_1, - 0, 0, halfFloat_1, - 0, 0, halfFloat_1, - 0, 0, halfFloat_1, + // // Right face + // 0, 0, halfFloat_1, + // 0, 0, halfFloat_1, + // 0, 0, halfFloat_1, + // 0, 0, halfFloat_1, - // Left face - halfFloat_1, 0, halfFloat_1, - halfFloat_1, 0, halfFloat_1, - halfFloat_1, 0, halfFloat_1, - halfFloat_1, 0, halfFloat_1 - ]; + // // Left face + // halfFloat_1, 0, halfFloat_1, + // halfFloat_1, 0, halfFloat_1, + // halfFloat_1, 0, halfFloat_1, + // halfFloat_1, 0, halfFloat_1 + // ]; normals.set(tmp_ary, 0); From 1cd719543ab371af4be127e792f68897df91ce7b Mon Sep 17 00:00:00 2001 From: shrekshao Date: Sun, 21 Feb 2016 01:07:08 -0500 Subject: [PATCH 08/17] fix half float subnormal --- samples/geo_vertex_format.html | 230 +++++++++++++++++---------------- 1 file changed, 122 insertions(+), 108 deletions(-) diff --git a/samples/geo_vertex_format.html b/samples/geo_vertex_format.html index c9544a7..8acd6b7 100644 --- a/samples/geo_vertex_format.html +++ b/samples/geo_vertex_format.html @@ -84,11 +84,9 @@ float lightIntensity = dot(normalize(v_normal), normalize(v_lightDirection)); lightIntensity = lightIntensity, 0.0, 1.0 + u_ambient; - //color = color * lightIntensity; + color = color * lightIntensity; - color = vec4(v_normal, 1.0); - - //color = vec4(1.0, 1.0, -1.0, 1.0); + color = vec4(abs(v_normal), 1.0); } @@ -163,8 +161,8 @@ gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, null); - //http://stackoverflow.com/questions/28688838/convert-a-number-into-a-16-bit-float-stored-as-bytes-and-back - //http://croquetweak.blogspot.de/2014/08/deconstructing-floats-frexp-and-ldexp.html + // http://stackoverflow.com/questions/28688838/convert-a-number-into-a-16-bit-float-stored-as-bytes-and-back + // http://croquetweak.blogspot.de/2014/08/deconstructing-floats-frexp-and-ldexp.html function frexp(value) { if (value === 0) return [value, 0]; var data = new DataView(new ArrayBuffer(8)); @@ -188,98 +186,154 @@ } function encodeFloat16(value) { - //no range checking at present + // Inf unhandled here + const UNIT_VALUE = 1 / 1024; + //h ttps://en.wikipedia.org/wiki/Half-precision_floating-point_format var ary = frexp(value); - var mantissa = ary[0] * 2 - 1; - var exponent = ary[1] - 1; + var mantissa = ary[0]; + var exponent = ary[1]; - var signBit = mantissa < 0 ? 1 : 0; var data = new DataView(new ArrayBuffer(2)); - //data.setUint16(15, signBit); - //data.setUint16(10, exponent); - //data.setUint16(0, mantissa / (1 / 1024)); - var a = signBit << 15; - var b = (exponent + 15) << 10; - var c = Math.abs(mantissa) / (1 / 1024); - data.setInt16(0, a + b + c); + if(mantissa === 0) { + // zero + data.setInt16(0, 0); + return data.getInt16(0); + } + + var signBit = mantissa < 0 ? 1 : 0; + var sign = signBit << 15; + var exp = 0; + var frac = 0; + if ( exponent <= -14) { + // subnormal value + frac = Math.abs(mantissa * Math.pow(2, exponent + 14)) / UNIT_VALUE; + data.setInt16(0, sign + exp + frac); + return data.getInt16(0); + } - // data.setInt16(0, signBit << 15); - // data.setInt16(0, (exponent + 15) << 9); - // data.setInt16(0, Math.abs(mantissa) / (1 / 1024)); + // normalized value + mantissa = mantissa * 2 - 1; + exponent = exponent - 1; + + exp = (exponent + 15) << 10; + frac = Math.abs(mantissa) / UNIT_VALUE; + + data.setInt16(0, sign + exp + frac); return data.getInt16(0); } var numVertices = 24; var normals = new Int16Array(new ArrayBuffer(2 * 3 * numVertices)); - // var tmp_ary = [ - // encodeFloat16(0), encodeFloat16(0), encodeFloat16(-1), - // encodeFloat16(0), encodeFloat16(0), encodeFloat16(-1), - // encodeFloat16(0), encodeFloat16(0), encodeFloat16(-1), - // encodeFloat16(0), encodeFloat16(0), encodeFloat16(-1), - - // encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), - // encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), - // encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), - // encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), + var halfFloatArray = [ + encodeFloat16(0), encodeFloat16(0), encodeFloat16(-1), + encodeFloat16(0), encodeFloat16(0), encodeFloat16(-1), + encodeFloat16(0), encodeFloat16(0), encodeFloat16(-1), + encodeFloat16(0), encodeFloat16(0), encodeFloat16(-1), - // encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), - // encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), - // encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), - // encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), - - // encodeFloat16(0), encodeFloat16(-1), encodeFloat16(0), - // encodeFloat16(0), encodeFloat16(-1), encodeFloat16(0), - // encodeFloat16(0), encodeFloat16(-1), encodeFloat16(0), - // encodeFloat16(0), encodeFloat16(-1), encodeFloat16(0), - - // encodeFloat16(-1), encodeFloat16(0), encodeFloat16(0), - // encodeFloat16(-1), encodeFloat16(0), encodeFloat16(0), - // encodeFloat16(-1), encodeFloat16(0), encodeFloat16(0), - // encodeFloat16(-1), encodeFloat16(0), encodeFloat16(0), - - // encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), - // encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), - // encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), - // encodeFloat16(1), encodeFloat16(0), encodeFloat16(0) - // ]; - var tmp_ary = [ encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), - encodeFloat16(0), encodeFloat16(1), encodeFloat16(1), - encodeFloat16(0), encodeFloat16(1), encodeFloat16(1), - encodeFloat16(0), encodeFloat16(1), encodeFloat16(1), - encodeFloat16(0), encodeFloat16(1), encodeFloat16(1), - encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), - encodeFloat16(1), encodeFloat16(1), encodeFloat16(0), - encodeFloat16(1), encodeFloat16(1), encodeFloat16(0), - encodeFloat16(1), encodeFloat16(1), encodeFloat16(0), - encodeFloat16(1), encodeFloat16(1), encodeFloat16(0), + encodeFloat16(0), encodeFloat16(-1), encodeFloat16(0), + encodeFloat16(0), encodeFloat16(-1), encodeFloat16(0), + encodeFloat16(0), encodeFloat16(-1), encodeFloat16(0), + encodeFloat16(0), encodeFloat16(-1), encodeFloat16(0), + + encodeFloat16(-1), encodeFloat16(0), encodeFloat16(0), + encodeFloat16(-1), encodeFloat16(0), encodeFloat16(0), + encodeFloat16(-1), encodeFloat16(0), encodeFloat16(0), + encodeFloat16(-1), encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), - encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), - - encodeFloat16(1), encodeFloat16(0), encodeFloat16(1), - encodeFloat16(1), encodeFloat16(0), encodeFloat16(1), - encodeFloat16(1), encodeFloat16(0), encodeFloat16(1), - encodeFloat16(1), encodeFloat16(0), encodeFloat16(1) + encodeFloat16(1), encodeFloat16(0), encodeFloat16(0) ]; + // var halfFloatArray = [ + // encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), + // encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), + // encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), + // encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), + + // encodeFloat16(0), encodeFloat16(1), encodeFloat16(1), + // encodeFloat16(0), encodeFloat16(1), encodeFloat16(1), + // encodeFloat16(0), encodeFloat16(1), encodeFloat16(1), + // encodeFloat16(0), encodeFloat16(1), encodeFloat16(1), + + // encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), + // encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), + // encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), + // encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), + + // encodeFloat16(1), encodeFloat16(1), encodeFloat16(0), + // encodeFloat16(1), encodeFloat16(1), encodeFloat16(0), + // encodeFloat16(1), encodeFloat16(1), encodeFloat16(0), + // encodeFloat16(1), encodeFloat16(1), encodeFloat16(0), + + // encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), + // encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), + // encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), + // encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), + + // encodeFloat16(1), encodeFloat16(0), encodeFloat16(1), + // encodeFloat16(1), encodeFloat16(0), encodeFloat16(1), + // encodeFloat16(1), encodeFloat16(0), encodeFloat16(1), + // encodeFloat16(1), encodeFloat16(0), encodeFloat16(1) + // ]; + // var halfFloat_1 = 0x3C00; - // var tmp_ary = [ + // var halfFloat_m1 = 0xC400; + + // var halfFloatArray = [ + // // Front face + // 0, 0, halfFloat_m1, + // 0, 0, halfFloat_m1, + // 0, 0, halfFloat_m1, + // 0, 0, halfFloat_m1, + + // // Back face + // 0, 0, halfFloat_1, + // 0, 0, halfFloat_1, + // 0, 0, halfFloat_1, + // 0, 0, halfFloat_1, + + // // Top face + // 0, halfFloat_1, 0, + // 0, halfFloat_1, 0, + // 0, halfFloat_1, 0, + // 0, halfFloat_1, 0, + + // // Bottom face + // 0, halfFloat_m1, 0, + // 0, halfFloat_m1, 0, + // 0, halfFloat_m1, 0, + // 0, halfFloat_m1, 0, + + // // Right face + // halfFloat_m1, 0, 0, + // halfFloat_m1, 0, 0, + // halfFloat_m1, 0, 0, + // halfFloat_m1, 0, 0, + + // // Left face + // halfFloat_1, 0, 0, + // halfFloat_1, 0, 0, + // halfFloat_1, 0, 0, + // halfFloat_1, 0, 0 + // ]; + + // var halfFloatArray = [ // // Front face // halfFloat_1, 0, 0, // halfFloat_1, 0, 0, @@ -316,48 +370,8 @@ // halfFloat_1, 0, halfFloat_1, // halfFloat_1, 0, halfFloat_1 // ]; - normals.set(tmp_ary, 0); - - - - // var normals = new Int8Array([ - // // Front face - // 0, 0, -1, - // 0, 0, -1, - // 0, 0, -1, - // 0, 0, -1, - - // // Back face - // 0, 0, 1, - // 0, 0, 1, - // 0, 0, 1, - // 0, 0, 1, - - // // Top face - // 0, 1, 0, - // 0, 1, 0, - // 0, 1, 0, - // 0, 1, 0, - - // // Bottom face - // 0, -1, 0, - // 0, -1, 0, - // 0, -1, 0, - // 0, -1, 0, - - // // Right face - // -1, 0, 0, - // -1, 0, 0, - // -1, 0, 0, - // -1, 0, 0, - - // // Left face - // 1, 0, 0, - // 1, 0, 0, - // 1, 0, 0, - // 1, 0, 0 - // ]); + normals.set(halfFloatArray, 0); var vertexNorBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexNorBuffer); gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW); From 5fd56d19cb34a90c4017f36f68919c9f08cbdd15 Mon Sep 17 00:00:00 2001 From: shrekshao Date: Sun, 21 Feb 2016 01:12:19 -0500 Subject: [PATCH 09/17] fix half float subnormal --- samples/geo_vertex_format.html | 119 +-------------------------------- 1 file changed, 2 insertions(+), 117 deletions(-) diff --git a/samples/geo_vertex_format.html b/samples/geo_vertex_format.html index 8acd6b7..1a6ee9a 100644 --- a/samples/geo_vertex_format.html +++ b/samples/geo_vertex_format.html @@ -47,8 +47,7 @@ v_lightDirection = vec3(u_viewProj * vec4(u_lightPosition - modelPosition, 1.0)); gl_Position = u_viewProj * vec4(modelPosition, 1.0); - //v_normal = vec3(u_viewProj * u_modelInvTrans * vec4(a_normal, 0.0)); - v_normal = a_normal; + v_normal = vec3(u_viewProj * u_modelInvTrans * vec4(a_normal, 0.0)); // Pass through v_color = a_color; @@ -85,8 +84,6 @@ lightIntensity = lightIntensity, 0.0, 1.0 + u_ambient; color = color * lightIntensity; - - color = vec4(abs(v_normal), 1.0); } @@ -189,7 +186,7 @@ // Inf unhandled here const UNIT_VALUE = 1 / 1024; - //h ttps://en.wikipedia.org/wiki/Half-precision_floating-point_format + // https://en.wikipedia.org/wiki/Half-precision_floating-point_format var ary = frexp(value); var mantissa = ary[0]; var exponent = ary[1]; @@ -260,117 +257,6 @@ encodeFloat16(1), encodeFloat16(0), encodeFloat16(0) ]; - // var halfFloatArray = [ - // encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), - // encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), - // encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), - // encodeFloat16(0), encodeFloat16(0), encodeFloat16(1), - - // encodeFloat16(0), encodeFloat16(1), encodeFloat16(1), - // encodeFloat16(0), encodeFloat16(1), encodeFloat16(1), - // encodeFloat16(0), encodeFloat16(1), encodeFloat16(1), - // encodeFloat16(0), encodeFloat16(1), encodeFloat16(1), - - // encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), - // encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), - // encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), - // encodeFloat16(0), encodeFloat16(1), encodeFloat16(0), - - // encodeFloat16(1), encodeFloat16(1), encodeFloat16(0), - // encodeFloat16(1), encodeFloat16(1), encodeFloat16(0), - // encodeFloat16(1), encodeFloat16(1), encodeFloat16(0), - // encodeFloat16(1), encodeFloat16(1), encodeFloat16(0), - - // encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), - // encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), - // encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), - // encodeFloat16(1), encodeFloat16(0), encodeFloat16(0), - - // encodeFloat16(1), encodeFloat16(0), encodeFloat16(1), - // encodeFloat16(1), encodeFloat16(0), encodeFloat16(1), - // encodeFloat16(1), encodeFloat16(0), encodeFloat16(1), - // encodeFloat16(1), encodeFloat16(0), encodeFloat16(1) - // ]; - - // var halfFloat_1 = 0x3C00; - // var halfFloat_m1 = 0xC400; - - // var halfFloatArray = [ - // // Front face - // 0, 0, halfFloat_m1, - // 0, 0, halfFloat_m1, - // 0, 0, halfFloat_m1, - // 0, 0, halfFloat_m1, - - // // Back face - // 0, 0, halfFloat_1, - // 0, 0, halfFloat_1, - // 0, 0, halfFloat_1, - // 0, 0, halfFloat_1, - - // // Top face - // 0, halfFloat_1, 0, - // 0, halfFloat_1, 0, - // 0, halfFloat_1, 0, - // 0, halfFloat_1, 0, - - // // Bottom face - // 0, halfFloat_m1, 0, - // 0, halfFloat_m1, 0, - // 0, halfFloat_m1, 0, - // 0, halfFloat_m1, 0, - - // // Right face - // halfFloat_m1, 0, 0, - // halfFloat_m1, 0, 0, - // halfFloat_m1, 0, 0, - // halfFloat_m1, 0, 0, - - // // Left face - // halfFloat_1, 0, 0, - // halfFloat_1, 0, 0, - // halfFloat_1, 0, 0, - // halfFloat_1, 0, 0 - // ]; - - // var halfFloatArray = [ - // // Front face - // halfFloat_1, 0, 0, - // halfFloat_1, 0, 0, - // halfFloat_1, 0, 0, - // halfFloat_1, 0, 0, - - // // Back face - // halfFloat_1, halfFloat_1, 0, - // halfFloat_1, halfFloat_1, 0, - // halfFloat_1, halfFloat_1, 0, - // halfFloat_1, halfFloat_1, 0, - - // // Top face - // 0, halfFloat_1, 0, - // 0, halfFloat_1, 0, - // 0, halfFloat_1, 0, - // 0, halfFloat_1, 0, - - // // Bottom face - // 0, halfFloat_1, halfFloat_1, - // 0, halfFloat_1, halfFloat_1, - // 0, halfFloat_1, halfFloat_1, - // 0, halfFloat_1, halfFloat_1, - - // // Right face - // 0, 0, halfFloat_1, - // 0, 0, halfFloat_1, - // 0, 0, halfFloat_1, - // 0, 0, halfFloat_1, - - // // Left face - // halfFloat_1, 0, halfFloat_1, - // halfFloat_1, 0, halfFloat_1, - // halfFloat_1, 0, halfFloat_1, - // halfFloat_1, 0, halfFloat_1 - // ]; - normals.set(halfFloatArray, 0); var vertexNorBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexNorBuffer); @@ -465,7 +351,6 @@ gl.bindBuffer(gl.ARRAY_BUFFER, vertexNorBuffer); gl.enableVertexAttribArray(NORMAL_LOCATION); - //gl.vertexAttribPointer(NORMAL_LOCATION, 3, gl.BYTE, false, 0, 0); gl.vertexAttribPointer(NORMAL_LOCATION, 3, gl.HALF_FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, null); From 458d9c003d47f6f1e01bfdb4df8150aee6c60d67 Mon Sep 17 00:00:00 2001 From: shrekshao Date: Sun, 21 Feb 2016 01:14:29 -0500 Subject: [PATCH 10/17] README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 468a9a6..f82c480 100644 --- a/README.md +++ b/README.md @@ -45,7 +45,7 @@ Inspired by and ported from Christophe Riccio's ([@Groovounet](https://github.co |[fbo_multisample](http://webglsamples.org/WebGL2Samples/#fbo_multisample)|:white_check_mark:|:x: crashed|:x: WebGL: renderbufferStorageMultisample: Multisampling is still under development, and is currently disabled|:x: crashed| |[fbo_new_blend_equation](http://webglsamples.org/WebGL2Samples/#fbo_new_blend_equation)|:white_check_mark:|:grey_question:|:white_check_mark:|:grey_question:| |[buffer_copy](http://webglsamples.org/WebGL2Samples/#buffer_copy)|:white_check_mark:|:grey_question:|:white_check_mark:|:grey_question:| -|[geo_texture_format](http://webglsamples.org/WebGL2Samples/#geo_texture_format)|:grey_question:|:white_check_mark:|:grey_question:|:white_check_mark:| +|[geo_texture_format](http://webglsamples.org/WebGL2Samples/#geo_texture_format)|:white_check_mark:|:grey_question:|:x:Error: WebGL: drawElementsInstanced: integer overflow occured while checking vertex attrib 3|:grey_question:| ## Running the Samples Locally From 702c619ee87a560ddf1ddbe4279bdbbf2ba7d722 Mon Sep 17 00:00:00 2001 From: shrekshao Date: Sun, 21 Feb 2016 01:26:48 -0500 Subject: [PATCH 11/17] tweak --- samples/geo_vertex_format.html | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/samples/geo_vertex_format.html b/samples/geo_vertex_format.html index 1a6ee9a..5fe8238 100644 --- a/samples/geo_vertex_format.html +++ b/samples/geo_vertex_format.html @@ -175,16 +175,14 @@ } function ldexp(mantissa, exponent) { - return exponent > 1023 // avoid multiplying by infinity - ? mantissa * Math.pow(2, 1023) * Math.pow(2, exponent - 1023) - : exponent < -1074 // avoid multiplying by zero - ? mantissa * Math.pow(2, -1074) * Math.pow(2, exponent + 1074) - : mantissa * Math.pow(2, exponent); + // avoid multiplying by infinity and zero + return exponent > 1023 ? mantissa * Math.pow(2, 1023) * Math.pow(2, exponent - 1023) : + exponent < -1074 ? mantissa * Math.pow(2, -1074) * Math.pow(2, exponent + 1074) : mantissa * Math.pow(2, exponent); } function encodeFloat16(value) { // Inf unhandled here - const UNIT_VALUE = 1 / 1024; + var UNIT_VALUE = 1 / 1024; // https://en.wikipedia.org/wiki/Half-precision_floating-point_format var ary = frexp(value); From 68efa6947119874432e162a6062e0c9a77b7bbad Mon Sep 17 00:00:00 2001 From: shrekshao Date: Sun, 21 Feb 2016 22:12:36 -0500 Subject: [PATCH 12/17] halffloat util js first commit, -1 incorrect, test --- samples/geo_vertex_format.html | 129 +++++------------- .../webgl2-half-float-array-converter.js | 93 +++++++++++++ 2 files changed, 130 insertions(+), 92 deletions(-) create mode 100644 samples/third-party/webgl2-half-float-array-converter.js diff --git a/samples/geo_vertex_format.html b/samples/geo_vertex_format.html index 5fe8238..c0833ad 100644 --- a/samples/geo_vertex_format.html +++ b/samples/geo_vertex_format.html @@ -47,7 +47,8 @@ v_lightDirection = vec3(u_viewProj * vec4(u_lightPosition - modelPosition, 1.0)); gl_Position = u_viewProj * vec4(modelPosition, 1.0); - v_normal = vec3(u_viewProj * u_modelInvTrans * vec4(a_normal, 0.0)); + //v_normal = vec3(u_viewProj * u_modelInvTrans * vec4(a_normal, 0.0)); + v_normal = a_normal; // Pass through v_color = a_color; @@ -84,11 +85,14 @@ lightIntensity = lightIntensity, 0.0, 1.0 + u_ambient; color = color * lightIntensity; + + color = vec4(abs(v_normal), 1.0); } + @@ -200,45 +197,6 @@ 1, 0, 0, 1, 0, 0 ]); - - // var normals = HALFFLOAT.Float16Array([ - // // Front face - // -1, 0, 0, - // 0, 0, 0, - // 0, 0, 0, - // 0, 0, 0, - - // // Back face - // 0, 0, 0, - // 0, 0, 0, - // 0, 0, 0, - // 0, 0, 0, - - // // Top face - // 0, 0, 0, - // 0, 0, 0, - // 0, 0, 0, - // 0, 0, 0, - - // // Bottom face - // 0, 0, 0, - // 0, 0, 0, - // 0, 0, 0, - // 0, 0, 0, - - // // Right face - // 0, 0, 0, - // 0, 0, 0, - // 0, 0, 0, - // 0, 0, 0, - - // // Left face - // 0, 0, 0, - // 0, 0, 0, - // 0, 0, 0, - // 0, 0, 0 - // ]); - var vertexNorBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexNorBuffer); gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW); diff --git a/samples/third-party/webgl2-half-float-array-converter.js b/samples/third-party/webgl2-half-float-array-converter.js index 22800bd..ad7ea54 100644 --- a/samples/third-party/webgl2-half-float-array-converter.js +++ b/samples/third-party/webgl2-half-float-array-converter.js @@ -18,7 +18,6 @@ var HALFFLOAT = HALFFLOAT || {}; // http://croquetweak.blogspot.de/2014/08/deconstructing-floats-frexp-and-ldexp.html function frexp(value) { if (value === 0) { - //return [value, 0]; mantissa = 0; exponent = 0; return; @@ -31,7 +30,6 @@ var HALFFLOAT = HALFFLOAT || {}; } exponent = bits - 1022; mantissa = ldexp(value, -exponent); - //return [mantissa, exponent]; } function ldexp(f, e) { @@ -89,49 +87,10 @@ var HALFFLOAT = HALFFLOAT || {}; var i; HALFFLOAT.Float16Array = function(numArray){ var float16Array = new Int16Array(new ArrayBuffer(2 * numArray.length)); - var tmpArray = new Array(numArray.length); - + var tmpArray = new Array(numArray.length); for (i = 0; i < numArray.length; ++i) { tmpArray[i] = HALFFLOAT.encodeFloat16AsInt16(numArray[i]); } - - // var tmpArray = [ - // // Front face - // 0, 0, -1, - // 0, 0, -1, - // 0, 0, -1, - // 0, 0, -1, - - // // Back face - // 0, 0, 1, - // 0, 0, 1, - // 0, 0, 1, - // 0, 0, 1, - - // // Top face - // 0.5, 1, 0, - // 0.5, 1, 0, - // 0.5, 1, 0, - // 0.5, 1, 0, - - // // Bottom face - // 0, -1, 0, - // 0, -1, 0, - // 0, -1, 0, - // 0, -1, 0, - - // // Right face - // -1, 0, 0, - // -1, 0, 0, - // -1, 0, 0, - // -1, 0, 0, - - // // Left face - // 0.5, 0, 0, - // 0.5, 0, 0, - // 0.5, 0, 0, - // 0.5, 0, 0 - // ]; float16Array.set(tmpArray, 0); return float16Array; }; From 9bf11d8de03dbf610e878a20e68329cd4ff2f6d2 Mon Sep 17 00:00:00 2001 From: shrekshao Date: Sun, 21 Feb 2016 22:46:06 -0500 Subject: [PATCH 15/17] tweak --- samples/geo_vertex_format.html | 1 - 1 file changed, 1 deletion(-) diff --git a/samples/geo_vertex_format.html b/samples/geo_vertex_format.html index 0aaf08c..24cdbd4 100644 --- a/samples/geo_vertex_format.html +++ b/samples/geo_vertex_format.html @@ -159,7 +159,6 @@ gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, null); - var normals = HALFFLOAT.Float16Array([ // Front face 0, 0, -1, From c09305292d625890f997ea16612e7df4d0723c65 Mon Sep 17 00:00:00 2001 From: shrekshao Date: Mon, 29 Feb 2016 19:12:03 -0500 Subject: [PATCH 16/17] change name HalfFloat; texture uses half-float --- ...lf-float-array-converter.js => HalfFloatUtility.js} | 8 ++++---- samples/geo_vertex_format.html | 10 +++++----- 2 files changed, 9 insertions(+), 9 deletions(-) rename samples/{third-party/webgl2-half-float-array-converter.js => HalfFloatUtility.js} (93%) diff --git a/samples/third-party/webgl2-half-float-array-converter.js b/samples/HalfFloatUtility.js similarity index 93% rename from samples/third-party/webgl2-half-float-array-converter.js rename to samples/HalfFloatUtility.js index ad7ea54..485d22f 100644 --- a/samples/third-party/webgl2-half-float-array-converter.js +++ b/samples/HalfFloatUtility.js @@ -1,5 +1,5 @@ -var HALFFLOAT = HALFFLOAT || {}; +var HalfFloat = HalfFloat || {}; (function(){ 'use strict'; @@ -42,7 +42,7 @@ var HALFFLOAT = HALFFLOAT || {}; var sign; var exp; var frac; - HALFFLOAT.encodeFloat16AsInt16 = function(value) { + HalfFloat.encodeFloat16AsInt16 = function(value) { // Inf unhandled here // https://en.wikipedia.org/wiki/Half-precision_floating-point_format @@ -85,11 +85,11 @@ var HALFFLOAT = HALFFLOAT || {}; * @param numArray: javaScript number Array */ var i; - HALFFLOAT.Float16Array = function(numArray){ + HalfFloat.Float16Array = function(numArray){ var float16Array = new Int16Array(new ArrayBuffer(2 * numArray.length)); var tmpArray = new Array(numArray.length); for (i = 0; i < numArray.length; ++i) { - tmpArray[i] = HALFFLOAT.encodeFloat16AsInt16(numArray[i]); + tmpArray[i] = HalfFloat.encodeFloat16AsInt16(numArray[i]); } float16Array.set(tmpArray, 0); return float16Array; diff --git a/samples/geo_vertex_format.html b/samples/geo_vertex_format.html index 24cdbd4..c4c295f 100644 --- a/samples/geo_vertex_format.html +++ b/samples/geo_vertex_format.html @@ -11,7 +11,7 @@
WebGL 2 Samples - geo_vertex_format
-
This sample demonstrates the use of different vertex formats. gl.HALF_FLOAT for normals attribute and gl.UNSIGNED_BYTE for colors attribute. +
This sample demonstrates the use of different vertex formats. gl.HALF_FLOAT for normals and textures attribute. - + @@ -71,14 +68,12 @@ in vec2 v_texCoord; in vec3 v_normal; - in vec4 v_color; in vec3 v_lightDirection; out vec4 color; void main() { color = texture(s_tex2D, v_texCoord); - color = mix(v_color, color, 0.9); float lightIntensity = dot(normalize(v_normal), normalize(v_lightDirection)); lightIntensity = lightIntensity, 0.0, 1.0 + u_ambient; @@ -243,18 +238,6 @@ gl.bufferData(gl.ARRAY_BUFFER, texCoords, gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, null); - var colors = []; - var len = positions.length; - for (var ci = 0; ci < 24; ++ci) { - colors = colors.concat([0, 1, 1, 1]); - } - colors = new Int8Array(colors); - - var vertexColBuffer = gl.createBuffer(); - gl.bindBuffer(gl.ARRAY_BUFFER, vertexColBuffer); - gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW); - gl.bindBuffer(gl.ARRAY_BUFFER, null); - // Element buffer var indexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); @@ -277,7 +260,6 @@ var POSITION_LOCATION = 1; var TEXCOORD_LOCATION = 2; var NORMAL_LOCATION = 3; - var COLOR_LOCATION = 4; var vertexArray = gl.createVertexArray(); gl.bindVertexArray(vertexArray); @@ -297,11 +279,6 @@ gl.vertexAttribPointer(TEXCOORD_LOCATION, 2, gl.HALF_FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, null); - gl.bindBuffer(gl.ARRAY_BUFFER, vertexColBuffer); - gl.enableVertexAttribArray(COLOR_LOCATION); - gl.vertexAttribPointer(COLOR_LOCATION, 4, gl.UNSIGNED_BYTE, false, 0, 0); - gl.bindBuffer(gl.ARRAY_BUFFER, null); - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); gl.bindVertexArray(null);