2b:null 2c:["$","title",null,{"children":"3D Emoji | Jacob Goodman | Observable"}] 32:T860,function createRenderable(model) { return { vert:` precision mediump float; uniform mat4 projection, viewMatrix, modelMatrix; attribute vec3 position, normal; varying vec3 fragNormal; void main () { vec4 mPosition = modelMatrix * vec4(position, 1.0); gl_PointSize = 4.; gl_Position = projection*viewMatrix*mPosition; fragNormal = (modelMatrix *vec4(normal,0.0)).xyz; }`, frag: ` precision mediump float; varying vec3 fragNormal; uniform vec4 light; uniform vec3 lightDir; uniform vec3 lightColor; uniform vec3 objColor; uniform float ambient; uniform float emission; uniform float diffuse; uniform float specular; uniform float shininess; uniform float alpha; void main () { vec3 normal = normalize(fragNormal); float diffuseComp = max(0.0,diffuse * dot(normal,lightDir)); vec3 ref = 2.0*dot(lightDir,normal)*normal - lightDir; float specularComp = specular*pow(max(0.0,dot(ref,vec3(0.0,0.0,1.0))),shininess); gl_FragColor = vec4(emission*objColor + (ambient+diffuseComp)*lightColor*objColor + specularComp*lightColor, alpha); }`, // This converts the vertices of the mesh into the position attribute attributes: { position: model.positions, normal: model.normals }, blend: { enable: true, func: { src: 'src alpha', dst: 'one minus src alpha' } }, // and this converts the faces fo the mesh into elements elements: model.cells, uniforms: { modelMatrix: glMatrix.mat4.create(), viewMatrix: headViewMatrix, projection: headPerspectiveMatrix, objColor: hex2rgb(colors.faceColor), lightColor: hex2rgb(colors.lightColor), lightDir: glMatrix.vec3.normalize([],[1,1,-10]), ambient: uniforms.ambient, emission: uniforms.emission, diffuse: uniforms.diffuse, specular: uniforms2.specular, shininess : uniforms2.shininess, alpha: 1, }, }; } 33:T87a,function createRenderable_morph(model) { return { vert:` precision mediump float; uniform mat4 projection, viewMatrix, modelMatrix; attribute vec3 position, normal; varying vec3 fragNormal; void main () { vec4 mPosition = modelMatrix * vec4(position, 1.0); gl_PointSize = 4.; gl_Position = projection*viewMatrix*mPosition; fragNormal = (modelMatrix *vec4(normal,0.0)).xyz; }`, frag: ` precision mediump float; varying vec3 fragNormal; uniform vec4 light; uniform vec3 lightDir; uniform vec3 lightColor; uniform vec3 objColor; uniform float ambient; uniform float emission; uniform float diffuse; uniform float specular; uniform float shininess; uniform float alpha; void main () { vec3 normal = normalize(fragNormal); float diffuseComp = max(0.0,diffuse * dot(normal,lightDir)); vec3 ref = 2.0*dot(lightDir,normal)*normal - lightDir; float specularComp = specular*pow(max(0.0,dot(ref,vec3(0.0,0.0,1.0))),shininess); gl_FragColor = vec4(emission*objColor + (ambient+diffuseComp)*lightColor*objColor + specularComp*lightColor, alpha); }`, // This converts the vertices of the mesh into the position attribute attributes: { position: model.positions, normal: model.normals }, blend: { enable: true, func: { src: 'src alpha', dst: 'one minus src alpha' } }, // and this converts the faces fo the mesh into elements elements: model.cells, uniforms: { modelMatrix: glMatrix.mat4.create(), viewMatrix: emotionViewMatrix(model), projection: emotionPerspectiveMatrix(model), objColor: hex2rgb(colors.faceColor), lightColor: hex2rgb(colors.lightColor), lightDir: glMatrix.vec3.normalize([],[1,1,-10]), ambient: uniforms.ambient, emission: uniforms.emission, diffuse: uniforms.diffuse, specular: uniforms2.specular, shininess : uniforms2.shininess, alpha: 1, }, }; } 34:T33dc,TRIANGULATION = [ 127, 34, 139, 11, 0, 37, 232, 231, 120, 72, 37, 39, 128, 121, 47, 232, 121, 128, 104, 69, 67, 175, 171, 148, 157, 154, 155, 118, 50, 101, 73, 39, 40, 9, 151, 108, 48, 115, 131, 194, 204, 211, 74, 40, 185, 80, 42, 183, 40, 92, 186, 230, 229, 118, 202, 212, 214, 83, 18, 17, 76, 61, 146, 160, 29, 30, 56, 157, 173, 106, 204, 194, 135, 214, 192, 203, 165, 98, 21, 71, 68, 51, 45, 4, 144, 24, 23, 77, 146, 91, 205, 50, 187, 201, 200, 18, 91, 106, 182, 90, 91, 181, 85, 84, 17, 206, 203, 36, 148, 171, 140, 92, 40, 39, 193, 189, 244, 159, 158, 28, 247, 246, 161, 236, 3, 196, 54, 68, 104, 193, 168, 8, 117, 228, 31, 189, 193, 55, 98, 97, 99, 126, 47, 100, 166, 79, 218, 155, 154, 26, 209, 49, 131, 135, 136, 150, 47, 126, 217, 223, 52, 53, 45, 51, 134, 211, 170, 140, 67, 69, 108, 43, 106, 91, 230, 119, 120, 226, 130, 247, 63, 53, 52, 238, 20, 242, 46, 70, 156, 78, 62, 96, 46, 53, 63, 143, 34, 227, 173, 155, 133, 123, 117, 111, 44, 125, 19, 236, 134, 51, 216, 206, 205, 154, 153, 22, 39, 37, 167, 200, 201, 208, 36, 142, 100, 57, 212, 202, 20, 60, 99, 28, 158, 157, 35, 226, 113, 160, 159, 27, 204, 202, 210, 113, 225, 46, 43, 202, 204, 62, 76, 77, 137, 123, 116, 41, 38, 72, 203, 129, 142, 64, 98, 240, 49, 102, 64, 41, 73, 74, 212, 216, 207, 42, 74, 184, 169, 170, 211, 170, 149, 176, 105, 66, 69, 122, 6, 168, 123, 147, 187, 96, 77, 90, 65, 55, 107, 89, 90, 180, 101, 100, 120, 63, 105, 104, 93, 137, 227, 15, 86, 85, 129, 102, 49, 14, 87, 86, 55, 8, 9, 100, 47, 121, 145, 23, 22, 88, 89, 179, 6, 122, 196, 88, 95, 96, 138, 172, 136, 215, 58, 172, 115, 48, 219, 42, 80, 81, 195, 3, 51, 43, 146, 61, 171, 175, 199, 81, 82, 38, 53, 46, 225, 144, 163, 110, 246, 33, 7, 52, 65, 66, 229, 228, 117, 34, 127, 234, 107, 108, 69, 109, 108, 151, 48, 64, 235, 62, 78, 191, 129, 209, 126, 111, 35, 143, 163, 161, 246, 117, 123, 50, 222, 65, 52, 19, 125, 141, 221, 55, 65, 3, 195, 197, 25, 7, 33, 220, 237, 44, 70, 71, 139, 122, 193, 245, 247, 130, 33, 71, 21, 162, 153, 158, 159, 170, 169, 150, 188, 174, 196, 216, 186, 92, 144, 160, 161, 2, 97, 167, 141, 125, 241, 164, 167, 37, 72, 38, 12, 145, 159, 160, 38, 82, 13, 63, 68, 71, 226, 35, 111, 158, 153, 154, 101, 50, 205, 206, 92, 165, 209, 198, 217, 165, 167, 97, 220, 115, 218, 133, 112, 243, 239, 238, 241, 214, 135, 169, 190, 173, 133, 171, 208, 32, 125, 44, 237, 86, 87, 178, 85, 86, 179, 84, 85, 180, 83, 84, 181, 201, 83, 182, 137, 93, 132, 76, 62, 183, 61, 76, 184, 57, 61, 185, 212, 57, 186, 214, 207, 187, 34, 143, 156, 79, 239, 237, 123, 137, 177, 44, 1, 4, 201, 194, 32, 64, 102, 129, 213, 215, 138, 59, 166, 219, 242, 99, 97, 2, 94, 141, 75, 59, 235, 24, 110, 228, 25, 130, 226, 23, 24, 229, 22, 23, 230, 26, 22, 231, 112, 26, 232, 189, 190, 243, 221, 56, 190, 28, 56, 221, 27, 28, 222, 29, 27, 223, 30, 29, 224, 247, 30, 225, 238, 79, 20, 166, 59, 75, 60, 75, 240, 147, 177, 215, 20, 79, 166, 187, 147, 213, 112, 233, 244, 233, 128, 245, 128, 114, 188, 114, 217, 174, 131, 115, 220, 217, 198, 236, 198, 131, 134, 177, 132, 58, 143, 35, 124, 110, 163, 7, 228, 110, 25, 356, 389, 368, 11, 302, 267, 452, 350, 349, 302, 303, 269, 357, 343, 277, 452, 453, 357, 333, 332, 297, 175, 152, 377, 384, 398, 382, 347, 348, 330, 303, 304, 270, 9, 336, 337, 278, 279, 360, 418, 262, 431, 304, 408, 409, 310, 415, 407, 270, 409, 410, 450, 348, 347, 422, 430, 434, 313, 314, 17, 306, 307, 375, 387, 388, 260, 286, 414, 398, 335, 406, 418, 364, 367, 416, 423, 358, 327, 251, 284, 298, 281, 5, 4, 373, 374, 253, 307, 320, 321, 425, 427, 411, 421, 313, 18, 321, 405, 406, 320, 404, 405, 315, 16, 17, 426, 425, 266, 377, 400, 369, 322, 391, 269, 417, 465, 464, 386, 257, 258, 466, 260, 388, 456, 399, 419, 284, 332, 333, 417, 285, 8, 346, 340, 261, 413, 441, 285, 327, 460, 328, 355, 371, 329, 392, 439, 438, 382, 341, 256, 429, 420, 360, 364, 394, 379, 277, 343, 437, 443, 444, 283, 275, 440, 363, 431, 262, 369, 297, 338, 337, 273, 375, 321, 450, 451, 349, 446, 342, 467, 293, 334, 282, 458, 461, 462, 276, 353, 383, 308, 324, 325, 276, 300, 293, 372, 345, 447, 382, 398, 362, 352, 345, 340, 274, 1, 19, 456, 248, 281, 436, 427, 425, 381, 256, 252, 269, 391, 393, 200, 199, 428, 266, 330, 329, 287, 273, 422, 250, 462, 328, 258, 286, 384, 265, 353, 342, 387, 259, 257, 424, 431, 430, 342, 353, 276, 273, 335, 424, 292, 325, 307, 366, 447, 345, 271, 303, 302, 423, 266, 371, 294, 455, 460, 279, 278, 294, 271, 272, 304, 432, 434, 427, 272, 407, 408, 394, 430, 431, 395, 369, 400, 334, 333, 299, 351, 417, 168, 352, 280, 411, 325, 319, 320, 295, 296, 336, 319, 403, 404, 330, 348, 349, 293, 298, 333, 323, 454, 447, 15, 16, 315, 358, 429, 279, 14, 15, 316, 285, 336, 9, 329, 349, 350, 374, 380, 252, 318, 402, 403, 6, 197, 419, 318, 319, 325, 367, 364, 365, 435, 367, 397, 344, 438, 439, 272, 271, 311, 195, 5, 281, 273, 287, 291, 396, 428, 199, 311, 271, 268, 283, 444, 445, 373, 254, 339, 263, 466, 249, 282, 334, 296, 449, 347, 346, 264, 447, 454, 336, 296, 299, 338, 10, 151, 278, 439, 455, 292, 407, 415, 358, 371, 355, 340, 345, 372, 390, 249, 466, 346, 347, 280, 442, 443, 282, 19, 94, 370, 441, 442, 295, 248, 419, 197, 263, 255, 359, 440, 275, 274, 300, 383, 368, 351, 412, 465, 263, 467, 466, 301, 368, 389, 380, 374, 386, 395, 378, 379, 412, 351, 419, 436, 426, 322, 373, 390, 388, 2, 164, 393, 370, 462, 461, 164, 0, 267, 302, 11, 12, 374, 373, 387, 268, 12, 13, 293, 300, 301, 446, 261, 340, 385, 384, 381, 330, 266, 425, 426, 423, 391, 429, 355, 437, 391, 327, 326, 440, 457, 438, 341, 382, 362, 459, 457, 461, 434, 430, 394, 414, 463, 362, 396, 369, 262, 354, 461, 457, 316, 403, 402, 315, 404, 403, 314, 405, 404, 313, 406, 405, 421, 418, 406, 366, 401, 361, 306, 408, 407, 291, 409, 408, 287, 410, 409, 432, 436, 410, 434, 416, 411, 264, 368, 383, 309, 438, 457, 352, 376, 401, 274, 275, 4, 421, 428, 262, 294, 327, 358, 433, 416, 367, 289, 455, 439, 462, 370, 326, 2, 326, 370, 305, 460, 455, 254, 449, 448, 255, 261, 446, 253, 450, 449, 252, 451, 450, 256, 452, 451, 341, 453, 452, 413, 464, 463, 441, 413, 414, 258, 442, 441, 257, 443, 442, 259, 444, 443, 260, 445, 444, 467, 342, 445, 459, 458, 250, 289, 392, 290, 290, 328, 460, 376, 433, 435, 250, 290, 392, 411, 416, 433, 341, 463, 464, 453, 464, 465, 357, 465, 412, 343, 412, 399, 360, 363, 440, 437, 399, 456, 420, 456, 363, 401, 435, 288, 372, 383, 353, 339, 255, 249, 448, 261, 255, 133, 243, 190, 133, 155, 112, 33, 246, 247, 33, 130, 25, 398, 384, 286, 362, 398, 414, 362, 463, 341, 263, 359, 467, 263, 249, 255, 466, 467, 260, 75, 60, 166, 238, 239, 79, 162, 127, 139, 72, 11, 37, 121, 232, 120, 73, 72, 39, 114, 128, 47, 233, 232, 128, 103, 104, 67, 152, 175, 148, 173, 157, 155, 119, 118, 101, 74, 73, 40, 107, 9, 108, 49, 48, 131, 32, 194, 211, 184, 74, 185, 191, 80, 183, 185, 40, 186, 119, 230, 118, 210, 202, 214, 84, 83, 17, 77, 76, 146, 161, 160, 30, 190, 56, 173, 182, 106, 194, 138, 135, 192, 129, 203, 98, 54, 21, 68, 5, 51, 4, 145, 144, 23, 90, 77, 91, 207, 205, 187, 83, 201, 18, 181, 91, 182, 180, 90, 181, 16, 85, 17, 205, 206, 36, 176, 148, 140, 165, 92, 39, 245, 193, 244, 27, 159, 28, 30, 247, 161, 174, 236, 196, 103, 54, 104, 55, 193, 8, 111, 117, 31, 221, 189, 55, 240, 98, 99, 142, 126, 100, 219, 166, 218, 112, 155, 26, 198, 209, 131, 169, 135, 150, 114, 47, 217, 224, 223, 53, 220, 45, 134, 32, 211, 140, 109, 67, 108, 146, 43, 91, 231, 230, 120, 113, 226, 247, 105, 63, 52, 241, 238, 242, 124, 46, 156, 95, 78, 96, 70, 46, 63, 116, 143, 227, 116, 123, 111, 1, 44, 19, 3, 236, 51, 207, 216, 205, 26, 154, 22, 165, 39, 167, 199, 200, 208, 101, 36, 100, 43, 57, 202, 242, 20, 99, 56, 28, 157, 124, 35, 113, 29, 160, 27, 211, 204, 210, 124, 113, 46, 106, 43, 204, 96, 62, 77, 227, 137, 116, 73, 41, 72, 36, 203, 142, 235, 64, 240, 48, 49, 64, 42, 41, 74, 214, 212, 207, 183, 42, 184, 210, 169, 211, 140, 170, 176, 104, 105, 69, 193, 122, 168, 50, 123, 187, 89, 96, 90, 66, 65, 107, 179, 89, 180, 119, 101, 120, 68, 63, 104, 234, 93, 227, 16, 15, 85, 209, 129, 49, 15, 14, 86, 107, 55, 9, 120, 100, 121, 153, 145, 22, 178, 88, 179, 197, 6, 196, 89, 88, 96, 135, 138, 136, 138, 215, 172, 218, 115, 219, 41, 42, 81, 5, 195, 51, 57, 43, 61, 208, 171, 199, 41, 81, 38, 224, 53, 225, 24, 144, 110, 105, 52, 66, 118, 229, 117, 227, 34, 234, 66, 107, 69, 10, 109, 151, 219, 48, 235, 183, 62, 191, 142, 129, 126, 116, 111, 143, 7, 163, 246, 118, 117, 50, 223, 222, 52, 94, 19, 141, 222, 221, 65, 196, 3, 197, 45, 220, 44, 156, 70, 139, 188, 122, 245, 139, 71, 162, 145, 153, 159, 149, 170, 150, 122, 188, 196, 206, 216, 92, 163, 144, 161, 164, 2, 167, 242, 141, 241, 0, 164, 37, 11, 72, 12, 144, 145, 160, 12, 38, 13, 70, 63, 71, 31, 226, 111, 157, 158, 154, 36, 101, 205, 203, 206, 165, 126, 209, 217, 98, 165, 97, 237, 220, 218, 237, 239, 241, 210, 214, 169, 140, 171, 32, 241, 125, 237, 179, 86, 178, 180, 85, 179, 181, 84, 180, 182, 83, 181, 194, 201, 182, 177, 137, 132, 184, 76, 183, 185, 61, 184, 186, 57, 185, 216, 212, 186, 192, 214, 187, 139, 34, 156, 218, 79, 237, 147, 123, 177, 45, 44, 4, 208, 201, 32, 98, 64, 129, 192, 213, 138, 235, 59, 219, 141, 242, 97, 97, 2, 141, 240, 75, 235, 229, 24, 228, 31, 25, 226, 230, 23, 229, 231, 22, 230, 232, 26, 231, 233, 112, 232, 244, 189, 243, 189, 221, 190, 222, 28, 221, 223, 27, 222, 224, 29, 223, 225, 30, 224, 113, 247, 225, 99, 60, 240, 213, 147, 215, 60, 20, 166, 192, 187, 213, 243, 112, 244, 244, 233, 245, 245, 128, 188, 188, 114, 174, 134, 131, 220, 174, 217, 236, 236, 198, 134, 215, 177, 58, 156, 143, 124, 25, 110, 7, 31, 228, 25, 264, 356, 368, 0, 11, 267, 451, 452, 349, 267, 302, 269, 350, 357, 277, 350, 452, 357, 299, 333, 297, 396, 175, 377, 381, 384, 382, 280, 347, 330, 269, 303, 270, 151, 9, 337, 344, 278, 360, 424, 418, 431, 270, 304, 409, 272, 310, 407, 322, 270, 410, 449, 450, 347, 432, 422, 434, 18, 313, 17, 291, 306, 375, 259, 387, 260, 424, 335, 418, 434, 364, 416, 391, 423, 327, 301, 251, 298, 275, 281, 4, 254, 373, 253, 375, 307, 321, 280, 425, 411, 200, 421, 18, 335, 321, 406, 321, 320, 405, 314, 315, 17, 423, 426, 266, 396, 377, 369, 270, 322, 269, 413, 417, 464, 385, 386, 258, 248, 456, 419, 298, 284, 333, 168, 417, 8, 448, 346, 261, 417, 413, 285, 326, 327, 328, 277, 355, 329, 309, 392, 438, 381, 382, 256, 279, 429, 360, 365, 364, 379, 355, 277, 437, 282, 443, 283, 281, 275, 363, 395, 431, 369, 299, 297, 337, 335, 273, 321, 348, 450, 349, 359, 446, 467, 283, 293, 282, 250, 458, 462, 300, 276, 383, 292, 308, 325, 283, 276, 293, 264, 372, 447, 346, 352, 340, 354, 274, 19, 363, 456, 281, 426, 436, 425, 380, 381, 252, 267, 269, 393, 421, 200, 428, 371, 266, 329, 432, 287, 422, 290, 250, 328, 385, 258, 384, 446, 265, 342, 386, 387, 257, 422, 424, 430, 445, 342, 276, 422, 273, 424, 306, 292, 307, 352, 366, 345, 268, 271, 302, 358, 423, 371, 327, 294, 460, 331, 279, 294, 303, 271, 304, 436, 432, 427, 304, 272, 408, 395, 394, 431, 378, 395, 400, 296, 334, 299, 6, 351, 168, 376, 352, 411, 307, 325, 320, 285, 295, 336, 320, 319, 404, 329, 330, 349, 334, 293, 333, 366, 323, 447, 316, 15, 315, 331, 358, 279, 317, 14, 316, 8, 285, 9, 277, 329, 350, 253, 374, 252, 319, 318, 403, 351, 6, 419, 324, 318, 325, 397, 367, 365, 288, 435, 397, 278, 344, 439, 310, 272, 311, 248, 195, 281, 375, 273, 291, 175, 396, 199, 312, 311, 268, 276, 283, 445, 390, 373, 339, 295, 282, 296, 448, 449, 346, 356, 264, 454, 337, 336, 299, 337, 338, 151, 294, 278, 455, 308, 292, 415, 429, 358, 355, 265, 340, 372, 388, 390, 466, 352, 346, 280, 295, 442, 282, 354, 19, 370, 285, 441, 295, 195, 248, 197, 457, 440, 274, 301, 300, 368, 417, 351, 465, 251, 301, 389, 385, 380, 386, 394, 395, 379, 399, 412, 419, 410, 436, 322, 387, 373, 388, 326, 2, 393, 354, 370, 461, 393, 164, 267, 268, 302, 12, 386, 374, 387, 312, 268, 13, 298, 293, 301, 265, 446, 340, 380, 385, 381, 280, 330, 425, 322, 426, 391, 420, 429, 437, 393, 391, 326, 344, 440, 438, 458, 459, 461, 364, 434, 394, 428, 396, 262, 274, 354, 457, 317, 316, 402, 316, 315, 403, 315, 314, 404, 314, 313, 405, 313, 421, 406, 323, 366, 361, 292, 306, 407, 306, 291, 408, 291, 287, 409, 287, 432, 410, 427, 434, 411, 372, 264, 383, 459, 309, 457, 366, 352, 401, 1, 274, 4, 418, 421, 262, 331, 294, 358, 435, 433, 367, 392, 289, 439, 328, 462, 326, 94, 2, 370, 289, 305, 455, 339, 254, 448, 359, 255, 446, 254, 253, 449, 253, 252, 450, 252, 256, 451, 256, 341, 452, 414, 413, 463, 286, 441, 414, 286, 258, 441, 258, 257, 442, 257, 259, 443, 259, 260, 444, 260, 467, 445, 309, 459, 250, 305, 289, 290, 305, 290, 460, 401, 376, 435, 309, 250, 392, 376, 411, 433, 453, 341, 464, 357, 453, 465, 343, 357, 412, 437, 343, 399, 344, 360, 440, 420, 437, 456, 360, 420, 363, 361, 401, 288, 265, 372, 353, 390, 339, 249, 339, 448, 255];35:T5df,headRenderable = { return { vert:` precision mediump float; uniform mat4 projection, viewMatrix, modelMatrix; uniform mat3 normalMatrix; attribute vec3 position, normal; varying vec3 fragNormal, fragPosition; void main () { vec4 mPosition = modelMatrix * vec4(position, 1.0); fragPosition = mPosition.xyz; fragNormal = normalize(normal); gl_PointSize = 4.; gl_Position = projection*viewMatrix*mPosition; }`, frag: ` precision mediump float; uniform vec3 materialColor; varying vec3 fragNormal, fragPosition; uniform vec4 light; vec3 computeColor() { vec3 lightVector = light.xyz; if (light.w > 0.) lightVector = light.xyz - fragPosition; return materialColor*clamp(dot(normalize(lightVector), normalize(fragNormal)), 0., 1.); } void main () { vec3 color = computeColor(); gl_FragColor = vec4(color,1); }`, // This converts the vertices of the mesh into the position attribute attributes: { position: object_image.positions, normal: object_image.normals }, // and this converts the faces fo the mesh into elements elements: object_image.cells, uniforms: { modelMatrix: glMatrix.mat4.create(), viewMatrix: headViewMatrix, projection: headPerspectiveMatrix, light: lightMatrix, materialColor: [1, 0.4980392156862745, 0] }, primitive: "points" }; }36:T5ea,headRenderable_tex = { return { // This converts the vertices of the mesh into the position attribute attributes: { position: object_image.positions, normal: object_image.normals, uv: object_image.uv }, // and this converts the faces fo the mesh into elements elements: object_image.cells, count: TRIANGULATION.length, uniforms: { modelMatrix: glMatrix.mat4.create(), normalMatrix: glMatrix.mat3.normalFromMat4([], glMatrix.mat4.create()), viewMatrix: headViewMatrix, projection: headPerspectiveMatrix, texture: texture }, primitive: "triangles", vert: ` precision mediump float; uniform mat4 projection, viewMatrix, modelMatrix; uniform mat3 normalMatrix; attribute vec3 position, normal; varying vec3 fragNormal, fragPosition; attribute vec2 uv; varying vec2 fragUV; void main () { vec4 mPosition = modelMatrix * vec4(position, 1.0); fragPosition = mPosition.xyz; fragNormal = normalize(normal); fragUV = uv; gl_PointSize = 4.; gl_Position = projection*viewMatrix*mPosition; }`, frag: ` precision mediump float; uniform sampler2D texture; varying vec2 fragUV; vec3 computeColor() { vec3 materialColor = texture2D(texture,fragUV).rgb; return materialColor; } void main () { vec3 color = computeColor(); gl_FragColor = vec4(color,1); }` }; }37:T5d9,baseRenderable = { return { vert:` precision mediump float; uniform mat4 projection, viewMatrix, modelMatrix; uniform mat3 normalMatrix; attribute vec3 position, normal; varying vec3 fragNormal, fragPosition; void main () { vec4 mPosition = modelMatrix * vec4(position, 1.0); fragPosition = mPosition.xyz; fragNormal = normalize(normal); gl_PointSize = 4.; gl_Position = projection*viewMatrix*mPosition; }`, frag: ` precision mediump float; uniform vec3 materialColor; varying vec3 fragNormal, fragPosition; uniform vec4 light; vec3 computeColor() { vec3 lightVector = light.xyz; if (light.w > 0.) lightVector = light.xyz - fragPosition; return materialColor*clamp(dot(normalize(lightVector), normalize(fragNormal)), 0., 1.); } void main () { vec3 color = computeColor(); gl_FragColor = vec4(color,1); }`, // This converts the vertices of the mesh into the position attribute attributes: { position: baseModel.positions, normal: baseModel.normals }, // and this converts the faces fo the mesh into elements elements: baseModel.cells, uniforms: { modelMatrix: glMatrix.mat4.create(), viewMatrix: headViewMatrix, projection: headPerspectiveMatrix, light: lightMatrix, materialColor: [1, 0.4980392156862745, 0] }, primitive: "triangles" }; }38:T5ed,mouthOpenRenderable = { return { vert:` precision mediump float; uniform mat4 projection, viewMatrix, modelMatrix; uniform mat3 normalMatrix; attribute vec3 position, normal; varying vec3 fragNormal, fragPosition; void main () { vec4 mPosition = modelMatrix * vec4(position, 1.0); fragPosition = mPosition.xyz; fragNormal = normalize(normal); gl_PointSize = 4.; gl_Position = projection*viewMatrix*mPosition; }`, frag: ` precision mediump float; uniform vec3 materialColor; varying vec3 fragNormal, fragPosition; uniform vec4 light; vec3 computeColor() { vec3 lightVector = light.xyz; if (light.w > 0.) lightVector = light.xyz - fragPosition; return materialColor*clamp(dot(normalize(lightVector), normalize(fragNormal)), 0., 1.); } void main () { vec3 color = computeColor(); gl_FragColor = vec4(color,1); }`, // This converts the vertices of the mesh into the position attribute attributes: { position: mouthOpenModel.positions, normal: mouthOpenModel.normals }, // and this converts the faces fo the mesh into elements elements: mouthOpenModel.cells, uniforms: { modelMatrix: glMatrix.mat4.create(), viewMatrix: headViewMatrix, projection: headPerspectiveMatrix, light: lightMatrix, materialColor: [1, 0.4980392156862745, 0] }, primitive: "triangles" }; }39:T5fe,md`***Joel Mora*** Contributed greatly on the creation of .obj files, 1:1 mapping on the faceMesh API to .obj, as well as initial research on Point Set Registration. I discussed with the GTA on why the Pint set registration did not work for us. Point set registration ended up being too complicated to implement as all the models we had were a 5:1 mapping minimum. So mapping these 5:1 vertices required (https://en.wikipedia.org/wiki/Point_set_registration#Coherent_point_drift) which I could not understand. And even after we got that implemented we would still need to use interpolation to move the rest of the points. After speaking with the GTA he gave us the idea of generating a 3D model in which we would have 1:1 mapping. >- Helped on research with Point Cloud Registration. (https://en.wikipedia.org/wiki/Point_set_registration) >- Reorganized the whole notebook from Jacobs start to be more readable and expandable. >- Created the faceMesh Object that we use in the "Mapping" and "Texture" options. >- Worked on researching a way to create .obj files by reverse engineering the professors obj2sc function >- Wrote the blender script that ultimately built our object that got exported to a .obj >- Helped organize and coordinate team with Jacob throughout the project. >- Assisted in editing every object we use in this project through blender. I scaled and exported all the morph heads. >- Assisted in creating the logic to hook up the faceMeshAPI to object points. >- Studied Blender and Blender scripts for project. `3a:T52f,md`***Abdool Shakur*** > Member of the Tensflow API Team. >- Helped in software design by coming up with ideas for this project. These included vertex mapping and morphing using multiple models. >- Collaborated with the team to extract facial landmarks from the facemesh API for future use in the mapping. >- Reworked the notebook to allow readability and less code, which means less prone to errors. >- Created a slider to slown down rendering time and allow for freezing the facemesh API, which allowed me to extract the vertices, vertex textures, vertex normals, and faces from the facemesh API. This ended up being the key component in recreating the facemesh API into an obj file to allow 1:1 mapping for our final product. >- In addition, I also created secondary options for this project (in case the 1:1 mapping failed) by creating real time face tracking via morphing. Morphing means that, based upon what expression the user is doing on the webcam (such as opening their mouth), the rendered model on screen would quickly changed to a model with its mouth open to mimic the user. This was done seamlessly to create the effect of a model reacting in real time to the player. >- Helped in debugging and troubleshooting code. >- Implemented face landmark tracking algorithm to detect what expressions a user was doing.`3b:[{"id":"b89b31275e7b73e757da8ceb613cb66c3327f57e1ca0c1fb469996d82c0d19d8a1a4c12dc92c8049c483771edb4697aa86329c0104af876389b5c8922555d4ae","href":"https://static.observableusercontent.com/files/b89b31275e7b73e757da8ceb613cb66c3327f57e1ca0c1fb469996d82c0d19d8a1a4c12dc92c8049c483771edb4697aa86329c0104af876389b5c8922555d4ae","name":"male_head.obj","type":"application/octet-stream","lastModified":1606269333258.87,"size":629041},{"id":"e16058aa7754ed62a76ae9fee2d18771eb03d6f12b20627c6a97c664e0a0b4e891a790c34878ee87f4e0b5f401646279ecd2a6fec5957c89f41d1442632ba153","href":"https://static.observableusercontent.com/files/e16058aa7754ed62a76ae9fee2d18771eb03d6f12b20627c6a97c664e0a0b4e891a790c34878ee87f4e0b5f401646279ecd2a6fec5957c89f41d1442632ba153","name":"smol_head.obj","type":"application/octet-stream","lastModified":1606422886610.059,"size":497391},{"id":"46f5c458f6ee56a43e85a542859703318027d898dc58b17ce2dcc85dc17d2659784ea68b16da8a4c94113ac6e97be0484d47d58f92de8b2a6fd210a0f73cd363","href":"https://static.observableusercontent.com/files/46f5c458f6ee56a43e85a542859703318027d898dc58b17ce2dcc85dc17d2659784ea68b16da8a4c94113ac6e97be0484d47d58f92de8b2a6fd210a0f73cd363","name":"smol_head2.obj","type":"application/octet-stream","lastModified":1607028212356.754,"size":301064},{"id":"38bc6ccc2055f6720e82cb62df577bceb2304c55daa885b50d54c1f8528ee66c4f4b4533acbcaf8a5b62cf7494dfc731936ba93b7cec94db543dba637aeaf2fc","href":"https://static.observableusercontent.com/files/38bc6ccc2055f6720e82cb62df577bceb2304c55daa885b50d54c1f8528ee66c4f4b4533acbcaf8a5b62cf7494dfc731936ba93b7cec94db543dba637aeaf2fc","name":"base1.obj","type":"application/octet-stream","lastModified":1607483169659.402,"size":791810},{"id":"4067a8a98510ba734d34c05030920fc409bebb235a62e885eaa6f7b8acf0b24650c8a5d9bcc55c879d6fc11ed5545e855368c03b04d8e9c79661de6bebb5f6ea","href":"https://static.observableusercontent.com/files/4067a8a98510ba734d34c05030920fc409bebb235a62e885eaa6f7b8acf0b24650c8a5d9bcc55c879d6fc11ed5545e855368c03b04d8e9c79661de6bebb5f6ea","name":"faceMeshAPI.obj","type":"application/octet-stream","lastModified":1607483169659.402,"size":61854},{"id":"be01268da4a27fda18f826ccb9da8d28e27c34bafef1be4c6c19ff6ef72c716d02f721d368ae2d1015b9f04c952d301cc915d95af24baa180517cd8e8fa893ca","href":"https://static.observableusercontent.com/files/be01268da4a27fda18f826ccb9da8d28e27c34bafef1be4c6c19ff6ef72c716d02f721d368ae2d1015b9f04c952d301cc915d95af24baa180517cd8e8fa893ca","name":"morph_7.obj","type":"application/octet-stream","lastModified":1607483169659.402,"size":610282},{"id":"5687b540b8930f5491ad2f22f69c0977ac506a316c7b21af5f2a707e6e7dd36bee637dd65e6ccd1c72e0004f9e1503680eed7898200546d5001eefd0b988e14e","href":"https://static.observableusercontent.com/files/5687b540b8930f5491ad2f22f69c0977ac506a316c7b21af5f2a707e6e7dd36bee637dd65e6ccd1c72e0004f9e1503680eed7898200546d5001eefd0b988e14e","name":"morph4.obj","type":"application/octet-stream","lastModified":1607483169659.402,"size":609912},{"id":"68c58653fcbc5704bb1d3e5fe89c4d9a49d6fcdc48189d387c3f4d6ea3e2e21004eba2cc9b5915dd5199eea28776f20ea1f67e9b54dcb95a32a48c9204f33dcb","href":"https://static.observableusercontent.com/files/68c58653fcbc5704bb1d3e5fe89c4d9a49d6fcdc48189d387c3f4d6ea3e2e21004eba2cc9b5915dd5199eea28776f20ea1f67e9b54dcb95a32a48c9204f33dcb","name":"morph5.obj","type":"application/octet-stream","lastModified":1607483169659.402,"size":609959},{"id":"5023f10ec9fe67819020755c921e9cdab73feb00c27f2eaa38c39146ab5da75e96f3fb95d051ca0897f2bee4c0abb63ef8e588d1cd582a23f97e064f8040a71e","href":"https://static.observableusercontent.com/files/5023f10ec9fe67819020755c921e9cdab73feb00c27f2eaa38c39146ab5da75e96f3fb95d051ca0897f2bee4c0abb63ef8e588d1cd582a23f97e064f8040a71e","name":"untitled2.obj","type":"application/octet-stream","lastModified":1607542370622.212,"size":80998},{"id":"71d9cd15b6319345b5ea0f3f7634fafd06049ae07333b9134216853e9781649477132af05921721ef837453aad7615b18f0ddd975520c9450e7b91b0a75fd01d","href":"https://static.observableusercontent.com/files/71d9cd15b6319345b5ea0f3f7634fafd06049ae07333b9134216853e9781649477132af05921721ef837453aad7615b18f0ddd975520c9450e7b91b0a75fd01d","name":"face@6.jpg","type":"image/jpeg","lastModified":1607399943356.496,"size":105856},{"id":"e38bb32c61bdbeb3e8ec7e9666aa2f10c032036d7331974a1faac9c30f120ae45f08bebedad733bad9be9510064bef967a04eb4fbeb35b837c2faf0d88f9e1c5","href":"https://static.observableusercontent.com/files/e38bb32c61bdbeb3e8ec7e9666aa2f10c032036d7331974a1faac9c30f120ae45f08bebedad733bad9be9510064bef967a04eb4fbeb35b837c2faf0d88f9e1c5","name":"untitled@4.obj","type":"application/octet-stream","lastModified":1607399902497.232,"size":79605},{"id":"863cff24068184ac79c4c4fa7e3e087c2234faff27471cc8e0a89c62006fe7b670c9523f8af76b658de07e43d3f480d86168748f1e8b76750ea29b11dc2860c8","href":"https://static.observableusercontent.com/files/863cff24068184ac79c4c4fa7e3e087c2234faff27471cc8e0a89c62006fe7b670c9523f8af76b658de07e43d3f480d86168748f1e8b76750ea29b11dc2860c8","name":"FaceTexture@1.jpg","type":"image/jpeg","lastModified":1607401086190.247,"size":75426},{"id":"503f512941d6b0d1a4cf3e74ebd7096fe66a56aee71e00631c0b8af139317977ac9afcf1d3a8a14cdbeafc1cf6d05b6936a4eb32466561102ca14e2dcf42125e","href":"https://static.observableusercontent.com/files/503f512941d6b0d1a4cf3e74ebd7096fe66a56aee71e00631c0b8af139317977ac9afcf1d3a8a14cdbeafc1cf6d05b6936a4eb32466561102ca14e2dcf42125e","name":"untitled@5.obj","type":"application/octet-stream","lastModified":1607401388531.597,"size":79644},{"id":"66968118b335230ffc00a200b52417496fea06c3259feb4b83e8dc17d37bb807fbf0f8cf4b41c2bef9a40f90f083414e4e286bba3896cc4a3c2ff69794a28cfa","href":"https://static.observableusercontent.com/files/66968118b335230ffc00a200b52417496fea06c3259feb4b83e8dc17d37bb807fbf0f8cf4b41c2bef9a40f90f083414e4e286bba3896cc4a3c2ff69794a28cfa","name":"smiling-face.png","type":"image/png","lastModified":1607546438514.997,"size":206430}] 2f:{"id":"3e0c2ef1ff245c53","slug":"3d-emoji","title":"3D Emoji","thumbnail":"b368e8f596245a6950c30855525975a30dede3d2d3ecf85f36ec07fc37315069","access_level":"public","create_time":"$D2020-10-14T03:37:57.619Z","update_time":"$D2020-12-10T04:54:40.456Z","view_time":null,"first_public_time":"$D2020-11-10T19:46:29.824Z","fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"eab2e7df086996a9","login":"goodmancode","name":"Jacob Goodman","avatar_url":"https://avatars-next.observableusercontent.com/9b59f68fdadcb104868d0db0a3fa78dd534a539060ce25c2df321f209a53a57a","tier":"starter_2024"},"version":3175,"publish_version":3175,"role":null,"authored":false,"authors":[{"type":"individual","id":"1424b7f67a4ac88d","login":"goodmancode","name":"Jacob Goodman","avatar_url":"https://avatars-next.observableusercontent.com/9b59f68fdadcb104868d0db0a3fa78dd534a539060ce25c2df321f209a53a57a","tier":null}],"members":[{"type":"individual","id":"1424b7f67a4ac88d","login":"goodmancode","name":"Jacob Goodman","avatar_url":"https://avatars-next.observableusercontent.com/9b59f68fdadcb104868d0db0a3fa78dd534a539060ce25c2df321f209a53a57a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":22,"collection":null,"type":"notebook","body":{"title":"3D Emoji","cells":[{"id":0,"value":"md`# 3D Emoji`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1163,"value":"viewof toggleWebcam = checkbox({\n options: [{ value: \"toggle\", label: \"Enable webcam\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":762,"value":"viewof toggleFacemesh = checkbox({\n options: [{ value: \"toggle\", label: \"Enable facemesh (takes a bit to load)\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2822,"value":"viewof attempt = radio({\n title: '3 attempts for our face tracking emoji',\n options: [\n { label: 'Mapping', value: 'mapping' },\n { label: 'Morphing', value: 'morphing' },\n { label: 'Texture', value: 'texture' },\n ]\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":2771,"value":"viewof selectTex = radio({\n description: 'Select a texture to use for Option 3',\n options: [\n { label: 'Face 1', value: 'face1' },\n { label: 'Face 2', value: 'face2' },\n { label: 'Face 3', value: 'face3' },\n ],\n value: 'face1'\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":809,"value":"viewof options = columns({\n slowdownTimer: slider({min: 0.1, max: 10, value: 0.1, step: 0.1, description: \"Refresh delay (sec)\"}),\n eyeDistance: slider({min:0,max:10,step:0.1,value:4,description:\"Eye Distance\"}),\n fov: slider({min:0,max:180,step:1,value:30,description:\"FOV\"})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2704,"value":"md `## Mapping Options\n^{Does not apply to texture}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2703,"value":"viewof uniforms = columns({\n ambient: slider({\n description: 'ambient lighting intensity',\n step: 0.1,\n value: 0.3\n }),\n emission: slider({\n description: 'emission',\n step: 0.1,\n value: 0.0\n }),\n diffuse: slider({\n description: 'diffusion',\n step: 0.1,\n value:0.6\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2702,"value":"viewof uniforms2 = columns({\n specular: slider ({\n description: 'Specular mapping',\n step: 0.1,\n value: 0.1\n }),\n shininess: slider({\n description: 'Shininess',\n step: 1,\n min: 0,\n max: 100,\n value: 30\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2701,"value":"viewof colors = columns({\n faceColor: color({\n description: `Face Color`,\n value: `#97c5e7`\n}),\n lightColor: color({\n description: `Light Color`,\n value: `#ffffff`\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":972,"value":"viewof output = columns({\n facemesh_render: myCanvas,\n webcam: webcamStream\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2700,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2852,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2150,"value":"md`## Render to Canvas`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2149,"value":"{ \n regl.clear({color: [0.97,0.97,0.97,1]});\n \n switch(attempt) {\n case 'mapping': regl(createRenderable(object_image))(); break;\n case 'morphing':\n if(isMouthOpen) {\n regl(createRenderable_morph(mouthOpenModel))();\n break;\n }\n else if(isRightBrowUp) {\n regl(createRenderable_morph(rightEyeModel))();\n break;\n }\n else if(isLeftBrowUp) {\n regl(createRenderable_morph(leftEyeModel))();\n break;\n }\n else {\n regl(createRenderable_morph(baseModel))();\n break;\n }\n case 'texture': regl(headRenderable_tex)(); break;\n }\n \n return md`***>>> Main Rendering <<<***`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2148,"value":"md`# Camera and Canvas Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2147,"value":"md`## Define webcamStream`","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"webcamStream = {\n const constraints = {\n video: {\n width: canvasWidth,\n height: canvasWidth,\n }\n };\n const video = document.createElement('video');\n video.setAttribute('autoplay', true);\n video.setAttribute('class', 'stream');\n\n if (toggleWebcam) {\n await navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {\n /* use the stream */\n video.srcObject = stream;\n }).catch(function(err) {\n /* handle the error */\n console.error('Couldn’t get media', err);\n });\n \n return video;\n }\n else {\n const noWebcam = document.createElement('IMG');\n noWebcam.src = \"https://static.thenounproject.com/png/468715-200.png\";\n noWebcam.width = canvasWidth/2;\n noWebcam.vspace = canvasWidth/4;\n return noWebcam;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2145,"value":"md`## Define myCanvas`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2144,"value":"myCanvas = DOM.canvas(canvasWidth,canvasHeight);","pinned":false,"hidden":false,"mode":"ojs"},{"id":2143,"value":"canvasWidth = (width/2)-30;","pinned":false,"hidden":false,"mode":"ojs"},{"id":2142,"value":"canvasHeight = canvasWidth","pinned":false,"hidden":false,"mode":"ojs"},{"id":2141,"value":"md`## Setup myCanvas`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1071,"value":"faceMeshCanvas = {\n myCanvas.style.transform = \"rotate(180deg)\" // Easy way to fix rendered upside-down\n regl.clear({color: [0.97,0.97,0.97,1]}); // Start with gray canvas\n return \"Setup Canvas\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2139,"value":"md`## Link up predictions to webcamStream`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1195,"value":"{\n // Webcam status color\n if (toggleWebcam) webcamStream.style.borderBottom = \"thick solid lightgreen\";\n else {\n webcamStream.style.borderBottom = \"thick solid lightgrey\";\n }\n \n // Facemesh status color\n myCanvas.style.borderTop = \"thick solid lightgrey\";\n if (!toggleWebcam || !predictions || predictions.length == 0) myCanvas.style.borderTop = \"thick solid red\";\n else myCanvas.style.borderTop = \"thick solid lightgreen\";\n\n return \"Status bars\" \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":715,"value":"md`The webcam stream can be accessed via the element name 'webcamStream'`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2693,"value":"md`## Face Detection Helper Functions \n(LAPTOP HAS TO BE AT 90 DEGREE ANGLE & USER MUST HAVE A FACE CENTERED)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2692,"value":"isMouthOpen = {\n if (predictions) {\n return Math.abs(difference(predictions[0].annotations.lipsUpperInner[0], predictions[0].annotations.lipsLowerInner[1])) > 10\n } else {\n return \"Predictions not found!\"\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2691,"value":"isLeftSmirk = {\n if (predictions) {\n return difference(predictions[0].annotations.leftCheek[0], predictions[0].annotations.rightCheek[0]);\n } else {\n return \"Predictions not found!\"\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2690,"value":"isRightSmirk = {\n if (predictions) {\n return difference(predictions[0].annotations.rightCheek[0], predictions[0].annotations.leftCheek[0]);\n } else {\n return \"Predictions not found!\"\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2689,"value":"isRightBrowUp = {\n if (predictions) {\n return predictions[0].annotations.leftEyebrowUpper[0][1] - predictions[0].annotations.rightEyebrowUpper[0][1] > 5\n } else {\n return \"Predictions not found!\"\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2688,"value":"isLeftBrowUp = {\n if (predictions) {\n return predictions[0].annotations.leftEyebrowUpper[0][1] - predictions[0].annotations.rightEyebrowUpper[0][1] < -5\n } else {\n return \"Predictions not found!\"\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2687,"value":"function difference(f1, f2)\n{\n var x1 = f1[0];\n var y1 = f1[1];\n var z1 = f1[2];\n \n var x2 = f2[0];\n var y2 = f2[1];\n var z2 = f2[2];\n \n var total = (x2 - x1) + (y2 - y1) + (z2 - z1);\n \n return total;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2686,"value":"function normalize(vertices)\n{\n var arr = [];\n for(var i = 0; i < vertices.length; i++)\n {\n var normal = glMatrix.vec3.normalize([], vertices[i]);\n arr.push(normal);\n }\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"md`# Facemesh API`","pinned":false,"hidden":false,"mode":"ojs"},{"id":910,"value":"model = await facemesh.load()","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"predictions = {\n if (!toggleWebcam)\n return false;\n if (toggleFacemesh) {\n function* estimateFace () {\n while (true)\n yield model.estimateFaces(webcamStream);\n }\n let first = await estimateFace().next().value;\n first.push(slowdownRerenders);\n return first;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2135,"value":"slowdownRerenders = Generators.observe(notify => {\n let rerenderSpeedInSeconds;\n if(options.slowdownTimer == 10)\n rerenderSpeedInSeconds = 60 * 60 * 24; // cheap way to make it stop ( lasts a full day tbh :p )\n else\n rerenderSpeedInSeconds = options.slowdownTimer;\n let i = 0;\n notify(i);\n let interval = setInterval(() => notify(++i), rerenderSpeedInSeconds*1000);\n return () => clearInterval(interval);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1760,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1770,"value":"triPoints = {\n const points = [];\n for (let i = 0; i < TRIANGULATION.length/3; i++) {\n points.push([TRIANGULATION[i*3], TRIANGULATION[i*3+1], TRIANGULATION[i*3+2]]);\n }\n return points;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":721,"value":"uvCords = facemesh.FaceMesh.getUVCoords()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1698,"value":"function getUvs(pos) {\n var arr = []; \n var size = pos.length;\n \n for (var i = 0 ; i < size; i++)\n arr.push(uvCords[i]);\n \n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1697,"value":"function getNormals(pos) {\n if (!predictions)\n return \"Predictions not found!\";\n var arr = [];\n var size = pos.length;\n \n for (var i = 0 ; i < size; i++)\n arr.push(predictions[0].scaledMesh[i]);\n \n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2004,"value":"md`## Prediction Outputs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1653,"value":"wholeFace = {\n if (predictions)\n return ({\n positions: predictions[0].mesh,\n normals: predictions[0].scaledMesh,\n uvs: uvCords,\n cells: triPoints\n })\n else\n return \"Predictions not found!\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1632,"value":"md `## partialFace components`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1695,"value":"total = {\n if (predictions)\n return [...leftEye, ...rightEye, ...mouth]\n else\n return \"Predictions not found!\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1631,"value":"rightEye = {\n if (predictions)\n return [...predictions[0].annotations.rightEyeUpper0,\n ...predictions[0].annotations.rightEyeLower0,\n ...predictions[0].annotations.rightEyeUpper1,\n ...predictions[0].annotations.rightEyeLower1,\n ...predictions[0].annotations.rightEyeUpper2,\n ...predictions[0].annotations.rightEyeLower2,\n ...predictions[0].annotations.rightEyeLower3,\n ]\n else\n return \"Predictions not found!\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1629,"value":"leftEye = {\n if (predictions)\n return [...predictions[0].annotations.leftEyeUpper0,\n ...predictions[0].annotations.leftEyeLower0,\n ...predictions[0].annotations.leftEyeUpper1,\n ...predictions[0].annotations.leftEyeLower1,\n ...predictions[0].annotations.leftEyeUpper2,\n ...predictions[0].annotations.leftEyeLower2,\n ...predictions[0].annotations.leftEyeLower3,\n ]\n else\n return \"Predictions not found!\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1694,"value":"mouth = {\n if (predictions)\n return [...predictions[0].annotations.lipsLowerInner,\n ...predictions[0].annotations.lipsLowerOuter,\n ...predictions[0].annotations.lipsUpperInner,\n ...predictions[0].annotations.lipsUpperOuter,\n ]\n else\n return \"Predictions not found!\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1630,"value":"md `## Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"objectDims = {\n if (predictions)\n return getScDimensions(wholeFace)\n else\n return \"Predictions not found!\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2127,"value":"function verifyPrediction (ret) {\n if (predictions)\n return ret\n else\n return \"Predictions not found!\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2052,"value":"md`___`","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"md`# REGL / Rendering`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2126,"value":"md`## facemeshRenderable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1271,"value":"facemeshRenderable = {\n if (predictions)\n return {\n primitive: \"points\",\n attributes: {\n position: wholeFace.positions,\n normal: wholeFace.normals,\n },\n uniforms: {\n modelMatrix: glMatrix.mat4.create(),\n viewMatrix: viewMatrix,\n projection: perspectiveMatrix,\n light: lightMatrix,\n texture: texture\n },\n elements: wholeFace.cells,\n count: TRIANGULATION.length,\n vert: vertexShader,\n frag: fragShader\n }\n else\n return \"Predictions not found!\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":774,"value":"vertexShader = `\n precision mediump float;\n uniform mat4 projection, viewMatrix, modelMatrix;\n uniform mat3 normalMatrix;\n attribute vec3 position, normal;\n varying vec3 fragNormal, fragPosition;\n void main () {\n vec4 mPosition = modelMatrix * vec4(position, 1.0);\n fragPosition = mPosition.xyz;\n fragNormal = normalize(normal);\n gl_PointSize = 4.;\n gl_Position = projection*viewMatrix*mPosition;\n }`","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"fragShader = `\n precision mediump float;\n uniform sampler2D texture;\n varying vec3 fragNormal, fragPosition;\n uniform vec4 light;\n vec3 computeColor() {\n vec3 materialColor = texture2D(texture,vec2(0.,0.)).rgb;\n vec3 lightVector = light.xyz;\n if (light.w > 0.) lightVector = light.xyz - fragPosition;\n return materialColor*clamp(dot(normalize(lightVector), normalize(fragNormal)), 0., 1.);\n }\n void main () {\n vec3 color = computeColor();\n gl_FragColor = vec4(color,1);\n }`","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"lightMatrix = glMatrix.vec4.transformQuat([],[0,1,0,0], glMatrix.quat.fromEuler([], 0, 0, options.lightAngle))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2119,"value":"rotationMatrix = glMatrix.mat4.fromQuat([], glMatrix.quat.fromEuler([], 360, 0, 0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1001,"value":"viewMatrix = {\n if (!predictions)\n return \"Predictions not found!\";\n const center = objectDims.center;\n const distance = options.eyeDistance * objectDims.radius;\n const viewDirection = glMatrix.vec3.transformMat4([],[0,0,distance],rotationMatrix);\n const eye = [center[0]+viewDirection[0],center[1]+viewDirection[1],center[2]+viewDirection[2]];\n return glMatrix.mat4.lookAt([], eye, center, glMatrix.vec3.rotateZ([],[0,1,0],[0,0,0],0));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1102,"value":"perspectiveMatrix = computePerspectiveMatrix(objectDims.radius, options.fov, canvasWidth/canvasHeight)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2055,"value":"md`___`","pinned":false,"hidden":false,"mode":"ojs"},{"id":827,"value":"md`# Texture`","pinned":false,"hidden":false,"mode":"ojs"},{"id":835,"value":"image = {\n switch(selectTex) {\n case 'face1': return image_from_URL(await FileAttachment(\"face@6.jpg\").url());\n case 'face2': return image_from_URL(await FileAttachment(\"FaceTexture@1.jpg\").url());\n case 'face3': return image_from_URL(await FileAttachment(\"smiling-face.png\").url());\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":839,"value":"texture = regl.texture({\n data: image,\n flipY: true,\n wrap: \"clamp\",\n min: \"mipmap\",\n mag: \"linear\"\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":831,"value":"image_from_URL = (url) =>{\n return new Promise(resolve => {\n const im = new Image();\n im.crossOrigin = \"anonymous\";\n im.src = url;\n im.onload = () => resolve(im);\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3021,"value":"md`___`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2019,"value":"md`# 3D Model`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2684,"value":"md`## face tracking model via mapping`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2384,"value":"faceTrackingObj = obj2sc(await FileAttachment(\"untitled2.obj\").text());","pinned":false,"hidden":false,"mode":"ojs"},{"id":2682,"value":"faceTrackingObjAfterMapping = {\n var ret = JSON.parse(JSON.stringify(faceTrackingObj));\n var orgPositions = faceTrackingObj.positions;\n for (var i = 0; i < orgPositions.length; i++) {\n if (predictions) {\n ret.positions[i] = wholeFace.positions[i];\n }\n }\n return ret\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2681,"value":"object_image = faceTrackingObjAfterMapping","pinned":false,"hidden":false,"mode":"ojs"},{"id":2680,"value":"headDimensions = getScDimensions(object_image)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2711,"value":"rotateValue = (attempt == 'morphing') ? 0: 180;","pinned":false,"hidden":false,"mode":"ojs"},{"id":2111,"value":"headRotationMatrix = glMatrix.mat4.fromQuat([], glMatrix.quat.fromEuler([], rotateValue, 0, 0));","pinned":false,"hidden":false,"mode":"ojs"},{"id":2110,"value":"headViewMatrix = {\n const center = headDimensions.center;\n const distance = options.eyeDistance * headDimensions.radius;\n const viewDirection = glMatrix.vec3.transformMat4([],[0,0,distance],headRotationMatrix);\n const eye = [center[0]+viewDirection[0],center[1]+viewDirection[1],center[2]+viewDirection[2]];\n return glMatrix.mat4.lookAt([], eye, center, glMatrix.vec3.rotateZ([],[0,1,0],[0,0,0],0));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2109,"value":"headPerspectiveMatrix = computePerspectiveMatrix(headDimensions.radius, options.fov, canvasWidth/canvasHeight)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2679,"value":"md`## dynamic emotion-switching models`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2678,"value":"baseModel = scaledSC(obj2sc(await FileAttachment(\"base1.obj\").text()));","pinned":false,"hidden":false,"mode":"ojs"},{"id":2677,"value":"mouthOpenModel = scaledSC(obj2sc(await FileAttachment(\"morph_7.obj\").text()));","pinned":false,"hidden":false,"mode":"ojs"},{"id":2676,"value":"rightEyeModel = scaledSC(obj2sc(await FileAttachment(\"morph4.obj\").text()));","pinned":false,"hidden":false,"mode":"ojs"},{"id":2675,"value":"leftEyeModel = scaledSC(obj2sc(await FileAttachment(\"morph5.obj\").text()));","pinned":false,"hidden":false,"mode":"ojs"},{"id":2860,"value":"emotionRotationMatrix = glMatrix.mat4.fromQuat([], glMatrix.quat.fromEuler([], 0, 0, 0));","pinned":false,"hidden":false,"mode":"ojs"},{"id":2854,"value":"function emotionViewMatrix(model) {\n const dimensions = getScDimensions(model);\n const center = dimensions.center;\n const distance = options.eyeDistance * dimensions.radius;\n const viewDirection = glMatrix.vec3.transformMat4([],[0,0,distance],emotionRotationMatrix);\n const eye = [center[0]+viewDirection[0],center[1]+viewDirection[1],center[2]+viewDirection[2]];\n return glMatrix.mat4.lookAt([], eye, center, [0,-1,0]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2866,"value":"function emotionPerspectiveMatrix(model) {\n return computePerspectiveMatrix(getScDimensions(model).radius, options.fov, canvasWidth/canvasHeight);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3024,"value":"md`___`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2108,"value":"md`# REGL Renderables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2673,"value":"md`## face tracking models`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2107,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2592,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2672,"value":"md`## base emotion-switching models`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2671,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2670,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":2106,"value":"md`# Helper Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2105,"value":"computePerspectiveMatrix = function(D, FOV, aspect){\n const near = 0.001*D;\n const far = 10*D;\n return glMatrix.mat4.perspective([], toRadians(FOV), aspect, near, far)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2104,"value":"function toRadians(degrees) {\n return glMatrix.glMatrix.toRadian(degrees);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2334,"value":"function pointDistance(pointA, pointB) {\n const xDiff = Math.pow((pointB[0] - pointA[0]), 2);\n const yDiff = Math.pow((pointB[1] - pointA[1]), 2);\n const zDiff = Math.pow((pointB[2] - pointA[2]), 2);\n return Math.sqrt(xDiff+yDiff+zDiff);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2340,"value":"function distFromRefArray(refPoint, positions) {\n var arr = [];\n const len = positions.length;\n for(var i = 0; i < len; i++) {\n arr.push(pointDistance(refPoint, positions[i]));\n }\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2669,"value":"hex2rgb = hex => (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(l => parseInt(hex.length%2 ? l+l : l, 16)/255)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3027,"value":"md`___`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"md`# Imports & Requires`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2103,"value":"import { multiplyManyMat4, createGL } from \"@joelbolt35/helper-functions\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"createREGL = require(\"regl\") // Use the latest Version","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"regl = createREGL({canvas:myCanvas})","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2076,"value":"three = require(\"three@0.119.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":796,"value":"glMatrix = require('https://bundle.run/gl-matrix@3.3.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"import {button, checkbox, slider, radio, color} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":745,"value":"import {columns} from \"@bcardiff/observable-columns\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"import {getImageData} from \"@ehouais/utils\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1922,"value":"import {scaledSC} from \"@spattana/ply-data-for-regl\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":842,"value":"import {getScDimensions, getSCSdimensions, obj2sc} from \"@spattana/obj-parser-obj2sc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2102,"value":"facemesh = require(\"@tensorflow-models/facemesh@0.0.3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3018,"value":"md`___`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3013,"value":"md`# Project Report`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3061,"value":"md`The following sections detail our progress, setbacks, and solutions that have led our project to it's current state. Also listed are individual contributions to project development`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3064,"value":"md`### Project Summary`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3154,"value":"md`The 3D Emoji project was created using WebGL and Regl. The team spent the initial two weeks doing research on existing facial recognition API's and how to integrate them Observable.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3153,"value":"md`Step 1: How do we allow face tracking?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3152,"value":"md`To solve this problem, we had to research what resources was at there. We knew that in order to allow for face tracking, we must be able to have some way for our webcam to be able to detect human faces and points within that face to display the eyes, mouth, etc. In addition, it was essential that this face tracking algorithm was able to also move in accordance to how the user was moving within the webcam. We found two libraries:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3151,"value":"md`-Tensflow Facemesh API with MediaPipe`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3150,"value":"md`-jeelizWeboji`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3149,"value":"md`We decided to use Tensflow's API due to the fact that Tensorflow is a widely used and known machine learning library by Google. So we had strong faith in its algorithm. In addition, it had all the requirements we needed: Face-tracking, facial landmarks recognitions, and more.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3148,"value":"md`We eventually ended up using jeelizWeboji later on in another idea known as Morphing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3147,"value":"md`Step 2: How do we map our vertices from our obj to the API?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3146,"value":"md`Using blender we were able to reduce the original number of Vertices from our .Obj model. Originally the model had oveer 5000 vertices, however, even this was not enough, as the goal was to get it to a 1:1 ratio to map the faceMesh API to our obj model.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3145,"value":"md`This issue was eventually solved this by recreating an obj model using the vertices from the facemesh API and handcoding the cells of that model using Blender and Python`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3144,"value":"md`Thanks to the vertex mapping of 1:1 from faceMesh API map 1:1 to the obj model the movement tracking and and expressions were improved considerable, specially compared to our original mapping of 10:1.`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":3143,"value":"md`At one point we were thinking we would not be able to actually solve this issue, so just in case we were not able to properly do a 1:1 mapping, some of the team members started working on a plan B in parallel to the mapping to ensure we would be able to have a working project. This is where Morphing from Jeelizweboji comes into play`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3142,"value":"md`Step 3: How to improve the appearence of our 3D Emoji?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3141,"value":"md`The rendering of the model was improved using some of the knowledge learned in class, such as ambient, diffuse, and specular lighting, shininess, and a custom texture created on blender`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3067,"value":"md`### Individual Contributions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3071,"value":"md`***Jacob Goodman*** (team lead)\n>As the designated team lead I helped with adminstrative tasks and setting up time to collaborate, in addition to reviewing progress and determining areas of needed development.\n>- Initial Observable page creation and maintenance, including merging of teammate forks when new changes were developed.\n>- Scoping of machine learning models and provided the import method and initial functionality of the ML model (facemesh).\n>- Texture mapping and UV map generation in REGL and Blender, respectively.\n>- Some code refactoring and cleaning for ease-of-use on the Observable page.\n>- Well-rounded knowledge of the the project functionality allowed me to troubleshoot when needed.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3140,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":3105,"value":"md`***Juan S Rodriguez***\n>Contributed in the development of the face mapping, as well as with the rendering the face model. In addition I provided idea for problem solving issues in face mapping the points and adding resources like the some of the .obj files used.\n>- Helped with troubleshooting with the facemesh renderable code. \n>- Worked on rendering the initial facemesh, however do to issues that model was deprecated do to 1:1 but much of the renderable code initially contributed did not changed.\n>- Collaborated in the ideas and logic that took place to mapping and morphing the model.\n>- Some code refactoring in the face renderable.`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":3114,"value":"md`***Miguel Severino***\n> I am part of the face-API and Tensorflow processing sub-team. My job, along with my teammates, was to capture facial expressions and reflect the captured data onto a synthesized face.\n\n>- I isolated points of interest within the facemesh that allowed the team to reduce the complexity of the problem by reducing the working set. This reduction allowed the team to focus on specific areas to attain a better understanding of the mapping issues we were facing.\n\n>- I aided in the implementation of the algorithms and subsequent functions used to detect facial expressions. These additions allowed us to differentiate between facial expressions within a reasonable degree of accuracy.\n\n>- I assisted my teammates in troubleshooting different areas of the project.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3115,"value":"md`***Victor Olazabal***\n>Development of head morphing. Contribution to the development of the head rendering as well as mapping feature.\n>- Addition of rendering the original head object to the notebook, which we were unable to used due to the vast difference in points between the object and our facemesh \n>- Contributed to mapping the points from the facemesh API to the head object\n>- Addition of the head morphing to detect when user has an open mouth, closed eyelid, etc.\n>- Helped to develop the new head object used to map the facemesh API `","pinned":false,"hidden":false,"mode":"ojs"},{"id":3136,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":3117,"value":"md`***Hylton Williamson***\n>I worked on the developement of the mapping options for the non textured model. This allows the user more customization when interacting with the mapping option.\n>- Implementing Ambient lighting, emission, diffusion, shininess, and specular mapping for model render.\n>- Adding color change options for both the facemesh and the lighting.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3134,"value":"md`***Morgan Wilkinson***\n> I worked as a team member of the 3D modeling and texturing team. \n>- Created a texture face texture in blender and affinity designer.\n>- Added obj of fire.\n>- Aided in the rescearch of blender methods and functions for the creation of obj files.\n>- Research into how our implementation of regl and a texture created in blender would be affected when used with an exported textured obj.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3133,"value":"md`***Saitejas Mopuri***\n> I worked as a team member of the Tensorflow Team. \n>- Helped with researching the Tensorflow API and tensorflow implementation.\n>- Helped with finish the reporting.\n>- Helped with brainstorming and algorthmic analysis.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3161,"value":"md`***Marco Muratti***\n>- I participated on the collab sessions and assisted with ideas. \n>- Helped writing the final project report.\n>- Researched vertex mapping but unfortunately it did not end up working.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3168,"value":"md`***Kevin Zheng***\n> I worked as a team member of the 3D Team. \n>- Helped with researching the Tensorflow API and checking its functions to map points to each other.\n>- Helped with creating the first head object model, but it had to many points for the facemesh.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3129,"value":"md`___`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3030,"value":"md`# References`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3043,"value":"md`MediaPipe Face Mesh\n- https://google.github.io/mediapipe/solutions/face_mesh.html\n- https://github.com/tensorflow/tfjs-models/tree/master/facemesh`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3050,"value":"md`Blender\n\n- https://www.blender.org`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3058,"value":"md`jeelizWeboji\n- https://github.com/jeeliz/jeelizWeboji`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3031,"value":"md `Wikipedia, Wikipedia. “Inverse Kinematics.” Wikipedia, Wikimedia Foundation, 19 Nov. 2020, en.wikipedia.org/wiki/Inverse_kinematics. \n\n- https://en.wikipedia.org/wiki/Inverse_kinematics`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3034,"value":"md `Wikipedia, Wikipedia. “Point Set Registration.” Wikipedia, Wikimedia Foundation, 30 Oct. 2020,\n\n- https://en.wikipedia.org/wiki/Point_set_registration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3036,"value":"md `Yuan, Ann, and Andrey Vakunov. “Face and Hand Tracking in the Browser with MediaPipe and TensorFlow.js.” The TensorFlow Blog, 2020,\n\n- https://blog.tensorflow.org/2020/03/face-and-hand-tracking-in-browser-with-mediapipe-and-tensorflowjs.html`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 30:"$2f:body"