javascript - How to transform vertices without changing the format? -
if want change size or position of object in webgl, take original vertex-data {x,y,z} of object , pass vertex-shader, it's multiplied matrix, holds information transformations, resulting in new set of coordinates, known gpu, invisible me.
that works fine, far thing counts, picture on screen, want able save transformed vertices without additional information matrix multiplications, x,y,z-values, original data.
the idea was, take final step of multiplying transformation-matrix original vertex-data own in javascript, don't working!
i wrote following function multiply 4x4-matrix array of x,y,z-values, adding fourth value {1.0} change vec3-data vec4-data...
function matrixvectorproduct (mat4, data) { var result = new array( ); (var = 0; < data.length / 3; i++) { var n = * 3; var vec4 = [data[n], data[n + 1], data[n + 2], 1.0]; var x = mat4[0] * vec4[0] + mat4[1] * vec4[1] + mat4[2] * vec4[2] + mat4[3] * vec4[3]; var y = mat4[4] * vec4[0] + mat4[5] * vec4[1] + mat4[6] * vec4[2] + mat4[7] * vec4[3]; var z = mat4[8] * vec4[0] + mat4[9] * vec4[1] + mat4[10] * vec4[2] + mat4[11] * vec4[3]; var w = mat4[12] * vec4[0] + mat4[13] * vec4[1] + mat4[14] * vec4[2] + mat4[15] * vec4[3]; result.push(x, y, z, w); } return result; } ...but beside fact have no idea of how convert vec4-values vec3-values, there must wrong concept whole:
let's suppose have vertices simple triangle like
var vertices = [0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0]; and create 4x4-matrix with
function createmat4 ( ) { var mat4 = new float32array(16); mat4[0] = 1; mat4[1] = 0; mat4[2] = 0; mat4[3] = 0; mat4[4] = 0; mat4[5] = 1; mat4[6] = 0; mat4[7] = 0; mat4[8] = 0; mat4[9] = 0; mat4[10] = 1; mat4[11] = 0; mat4[12] = 0; mat4[13] = 0; mat4[14] = 0; mat4[15] = 1; return mat4; } translate - let's [0, 0, -5] - using function
function translatemat4 (mat4, vec3) { var x = vec3[0], y = vec3[1], z = vec3[2]; var = mat4; mat4[12] = a[0] * x + a[4] * y + a[8] * z + a[12]; mat4[13] = a[1] * x + a[5] * y + a[9] * z + a[13]; mat4[14] = a[2] * x + a[6] * y + a[10] * z + a[14]; mat4[15] = a[3] * x + a[7] * y + a[11] * z + a[15]; return mat4; } and multiply created , translated matrix vertex-data stored in vertices using matrixvectorproduct-function noted above, result should
translatedvertices = [0.0, 1.0, -5.0, -1.0, -1.0, -5.0, 1.0, -1.0, -5.0]; but [x,y,z,1], because -5 x 0.0 (z-value) equals 0, cannot work way.
what doing wrong?
you close. implement start, case.
lets have simple model of triangle vertices:
var trianglevertices = [ 0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0 ]; now create mat4 represent transformations done on model. no transformation represented identity matrix wich 0 1 on diagonal.
var identitymatrix = [ 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0 ]; var modelmatrix = identitymatrix.slice(0); // slice = clone array we ready translations, rotations or scale. best way apply on model create mat4 wich represent our desired transformation, multiply model matrix transformation matrix. way can multiple transformations in desired order few matrix operations , dont have bother vertices @ now.
so lets create translation matrix wich easy. start identity matrix , must change mat[12, 13, 14] x, y, z.
translate - let's [0, 0, -5] - using function
var translate = [ 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0,-5.0, 1.0 ]; transformation matrix done , want multiply our model matrix. multipling matrices transformation, transformation. function matrix multiplication have done right now. should work hope :) math source wiki.
var mat4multiply = (function () { function abproduct(i, j, a, b) { var k, sum = 0; (k = 0; k < 4; k++) { sum += a[i * 4 + k] * b[j + k * 4]; } return sum; } function mat4multiply(a, b) { var i, j, product = []; (i = 0; < 4; i++) { (j = 0; j < 4; j++) { product[i * 4 + j] = abproduct(i, j, a, b); } } return product; } return mat4multiply; })(); // = model matrix, b = transformation just demonstrate how multiplication, short code:
modelmatrix = mat4multiply(modelmatrix, translate); // change mind , want move model again 3 in z translate = [ 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 3.0, 1.0 ]; modelmatrix = mat4multiply(modelmatrix, translate); // after content of modelmatrix is: // [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, -2, 1] now must final transformation of vertices. said, translation easy transformation translation function, this related article wiki.
note
dont confused picture:
this representation used in opengl later decided use transposed version of matrix, wich simple operation on following picture:
end note
translation function:
function vec3translatemat4(vec, mat4) { vec[0] += mat4[12]; vec[1] += mat4[13]; vec[2] += mat4[14]; return vec; } to translate triangle vertices must do:
var i, vertex; for(i=0;i<trianglevertices.length;i+=3) { vertex = trianglevertices.slice(i, i+3); vertex = vec3translatemat4(vertex, modelmatrix) trianglevertices[i] = vertex[0]; trianglevertices[i+1] = vertex[1]; trianglevertices[i+2] = vertex[2]; } once applied transformation matrix, should set model matrix identity matrix again. after that, can new transformations on modified vertices.
and done. personaly use gl matrix library contains operations matrices , vectors need.
transformations , without matrices
all transformations done without matrices. matrix allow keep current location in 1 variable without need transform vertices immediately. vertex transformations long , time consuming.
another reason can go few core functions, mat4multiply , vec3transformmat4 (i didnt show one). see how rotation , scale integrated in matrix (left part of image, right part camera).
Comments
Post a Comment