Собственный движок WebGL. Статья №3. Примитивы
В продолжении статьи [1]
В первой статье [2] уже использовался самый первый примитив, который можно назвать просто «произвольная форма».
Перед описанием примитивов-объектов еще раз повторю два основных требования-замечания от нашей системы:
- Каждый примитив должен содержать вектор вершин и вектор индексов (vertex, indices).
- Строится каждый примитив по индексам через треугольники (TRIANGLE), то есть каждые 3 точки образуют независимый треугольник.
По мимо требований к каждому примитиву мы можем подключить матрицу [1]. После подключения можно с легкостью производить следующие манипуляции:
- Перемещение по любой из осей. Перемещение на определенное кол-во единиц или перемещение к любой точки в пространстве
- Поворот вокруг любой точки. При подключении матрицы нам становится известен центр, соответственно, мы можем поворачивать примитив вокруг любой точки указав точку или же вокруг собственного центра.
Сами примитивы можно разделить:
- Простые. Состоят только из одного примитива.
- Сложные-составные. Состоят из нескольких примитивов
Простые примитивы
Plain
Описание
Данный примитив из себя представляет плоский прямоугольник. Для построения достаточно 2 треугольника. Необходимый минимум входных данных, который мы должны получить — это центр нашей фигуры, его ширина и высота. На выходе мы должны получить как минимум 2 массива: массив вершин, массив индексов. Каждую вершину рассчитываем через центр, ширину и высоту, так верхняя левая вершина — это точка, у которой x смещен от центра на половину ширины влево, а y на половину высоты вверх, z не смещается — фигура плоская. Таким же образом находим и все остальные вершины.
[this.frontCenter[0] - width / 2, this.frontCenter[1] + height / 2, this.frontCenter[2], /*верхняя левая точка - 0*/
this.frontCenter[0] + width / 2, this.frontCenter[1] + height / 2, this.frontCenter[2], /*верхняя правая точка - 1*/
this.frontCenter[0] + width / 2, this.frontCenter[1] - height / 2, this.frontCenter[2], /*нижняя правая точка - 2*/
this.frontCenter[0] - width / 2, this.frontCenter[1] - height / 2, this.frontCenter[2]]; /*нижняя левая точка - 3*/
В массиве индексов мы определяем, как наши точки будут объединяться. В данном примитиве 2 треугольника
Верхняя левая точка, верхняя правая точка, нижняя левая точка. В массиве вершин это элементы — 0,1,3
Верхняя правая точка, нижняя правая точка, нижняя левая точка. В массиве вершин это элементы — 1,2,3
Соответственно, массив индексов выглядит следующим образом:
[0,1,3,1,2,3,];
Порядок индексов меняться не будет, а вот с вершинами могут быть некие изменения. Для того, чтобы легко было совершать манипуляции с нашим примитивом, переведем массив вершин в матрицу.
this.matrix = new botuMatrix(this.vertex,3);
Операции с примитивом
При манипуляции с матрицей [1] будет изменяться массив, переданный как входящий параметр, в данном случае массив вершин. При описании матрицы [1] были указаны возможные манипуляции с матрицей. Подключим данные манипуляции к нашему примитиву.
moveByX:function(value){
this.matrix.move(value,0);
},
moveByY:function(value){
this.matrix.move(value,1);
},
moveByZ:function(value){
this.matrix.move(value,2);
},
testToPoint:function(value){
this.matrix.toPoint(value);
},
rotateAroundCenter:function(angle,xyzType)
{
this.matrix.rotate(angle,this.matrix.center,xyzType);
},
rotateAroundMaxPoint:function(angle,xyzType)
{
this.matrix.rotate(angle,this.matrix.maxval,xyzType);
},
rotateAroundPoint:function(angle,point,xyzType)
{
this.matrix.rotate(angle,point,xyzType);
},
- moveByX,moveByY,moveByZ — перемещение примитива по X, Y и Z, соответственно. Единственный входящий параметр — кол-во единиц. Пример, obj.moveByX(50) — перемещение obj на 50 единиц вправо.
- testToPoint — перемещаем примитив (ориентируясь на цент) к определенной точки. Входящий параметр — вектор-точка. Пример, obj.testToPoint([0,50,10]);
- rotateAroundCenter,rotateAroundMaxPoint — разворот вокруг центра или вокруг максимальных координат. (в примере с прямоугольником, максимальные координаты совпадают с правой верхней точкой, однако максимальные координаты не всегда совпадают с какой либо точкой примитива. Если грубо каждый трехмерный объект упаковывать в куб, то максимальная координата — это верхняя дальняя точка этого куба.). Входящий параметр — угол разворота и ось по которой должен быть разворот. Пример: obj.rotateAroundCenter(45,«byX») — разворот вокруг оси X на 45 градусов. Угол указывается в градусах, оси — «byX»,«byY»,«byZ».
- rotateAroundPoint — разворот вокруг произвольной точки в пространстве. Пример, obj.rotateAroundPoint(45,[0,0,0],«byZ»);
Данные операции не зависят от примитива, поэтому в дальнейшем будем их подключать без комментариев.
Cub
Данный примитив представляет из себя гексаэдр. Почти куб, только грани могут быть как квадраты, так и прямоугольники.
Описание будет такое же, как и у прямоугольника, только добавим ещё один входящий параметр — глубину.
У куба будет 8 вершин, как будто дальний и ближний прямоугольник. От простого прямоугольника, описанного выше, отличие будет заключаться в расчете координаты Z, которая в ближнем прямоугольнике будет уменьшаться на половину глубины, а в дальнем увеличиваться также на половину глубины.
Для этого просто возьмем два центра
this.frontCenter=[centerPoint[0],centerPoint[1],centerPoint[2] - depth / 2];
this.backCenter=[centerPoint[0],centerPoint[1],centerPoint[2] + depth / 2];
И в массиве будем создавать 2 прямоугольника, первый с центром frontCenter, второй с центром backCenter.
/*ближниий прямоугольник*/
this.frontCenter[0] - width / 2, this.frontCenter[1] + height / 2, this.frontCenter[2], /*индекс - 0*/
this.frontCenter[0] + width / 2, this.frontCenter[1] + height / 2, this.frontCenter[2],/*индекс - 1*/
this.frontCenter[0] + width / 2, this.frontCenter[1] - height / 2, this.frontCenter[2],/*индекс - 2*/
this.frontCenter[0] - width / 2, this.frontCenter[1] - height / 2, this.frontCenter[2],/*индекс - 3*/
/*дальний прямоугольник*/
this.backCenter[0] - width / 2, this.backCenter[1] + height / 2, this.backCenter[2],/*индекс - 4*/
this.backCenter[0] + width / 2, this.backCenter[1] + height / 2, this.backCenter[2],/*индекс - 5*/
this.backCenter[0] + width / 2, this.backCenter[1] - height / 2, this.backCenter[2],/*индекс - 6*/
this.backCenter[0] - width / 2, this.backCenter[1] - height / 2, this.backCenter[2]/*индекс - 7*/
По поводу вершин индексов. В кубе 6 граней, каждая из который состоит из 2-х треугольников.
/*ближайший к нам прямоугольник, единственный, который мы видим, до манипуляций с кубом*/
0,1,3,
1,2,3,
/*левая грань*/
0,4,7,
0,3,7,
/*нижняя грань*/
3,7,6,
6,3,2,
/*правая грань*/
2,6,1,
1,5,6,
/*верхняя грань*/
0,4,5,
0,5,1,
/*задняя грань*/
7,4,5,
7,5,6
Сложные-составные примитивы
Простые примитивы. которые мы создали состоят из треугольников, и перед тем как создать данный примитив мы мысленно разбивали его на треугольники. Сложные примитивы будут состоять из любой другой геометрической, двухмерной фигуры. В данной статье будет рассмотрен единственный «сложный примитив» — шар. Который будет состоять из прямоугольников.
Шар
Что необходимо знать, чтобы нарисовать шар — координаты и радиус? Да. Но я добавлю ещё 1 маленький параметр — детализация.
Здесь один и тот же круг, с одним и тем же радиусом, только разной детализацией. О том, что в описании примитива будет пониматься под детализацией — чуть позже.
Детализация — 35
Детализация — 10
Алгоритм:
- Строим прямоугольник по касательной, то есть центр прямоугольника — это центр круга смещенный по оси Z на величину радиуса. Высота и ширина прямоугольника — длина окружности, которая рассчитывается через радиус, разделенная на детализацию. Чем больше детализация, чем меньше высота-ширина прямоугольников, тем больше самих прямоугольников.
- Сверху добавляем ещё один прямоугольник, развернутый на угол, равный 360* / (кол-во прямоугольников, которое было найдено на предыдущем шаге).
- Повторяю предыдущий этап n-раз. Где n — кол-во прямоугольников. В результате получаем колесо.
- Делаем копию данного колеса с разворотом по оси Y на угол, равный 360* / (длинна круга, деленная на ширину).
- Повторяем предыдущую операцию n-раз, где n — это длина круга, деленная на ширину.
Для реализации данного алгоритма
- Создаем объект к которому можно подсоединять другие объекты. С точки зрения кода, в массивы вершин и индексов добавляются массивы вершин и индексов разных объектов.
function botuGroupedObject(){ this.vertex = []; this.indices = []; } botuGroupedObject.prototype = { addObject:function(obj){ this.vertex.size = obj.vertex.size; var next = Math.max(this.vertex.length / this.vertex.size,0); this.vertex = this.vertex.concat(obj.vertex); this.indices = this.indices.concat(obj.indices.map(function(i){return i + next})); this.vertex.size = obj.vertex.size; } } - Создаем вспомогательную функцию создания копии объекта в новом объекте.
function makeCopy(object,type){ var vertex = object.vertex.slice(0); var indices = object.indices.slice(0); return new type(vertex,indices); } - К примитиву Plain добавляем метод
connectUP:function(anotherPlain){ var downLeftPoint = anotherPlain.getDownLeft(); var dvPoint = downLeftPoint.map(function(value,index){return value - this.getUpperLeft()[index]},this); this.testToPoint(dvPoint); }, которые строит примитив — plain вплотную к верхней границе другого примитива plain. getDownLeft() — это нижняя левая точка, то есть элемент из массива вершин с индексом 3. (см. выше в описании примитива Plain). getUpperLeft() — это верхняя левая точка, то есть элемент из массива вершин с индексом 0.
Полный код первых 3-х статей
function makeCopy(object,type){
var vertex = object.vertex.slice(0);
var indices = object.indices.slice(0);
return new type(vertex,indices);
}
function vectorByMatrix(vector,matrix)
{
var resultVector = [];
if (vector.length == matrix.rowNumbers)
{
var columnCount = 0;
while(columnCount < matrix.columnNumbers){
var rowCount = 0;
var value = 0;
while(rowCount < matrix.rowNumbers)
{
value += vector[rowCount] * matrix.column[columnCount][rowCount];
rowCount++;
}
resultVector.push(value);
columnCount++;
}
}
return resultVector;
}
function botuMatrix (source,columns)
{
this.source = source;
this.columnNumbers = columns;
this.rowNumbers = source.length / columns;
this.rows = [];
this.minval = [];
this.maxval = [];
this.radius = [];
this.center = [];
this.column = [];
if (source.length > 0)
{
var count = 0;
while(count < source.length)
{
var currentRow = this.source.slice(count,count + this.columnNumbers);
this.rows.push(currentRow);
var columnCount = 0;
while(columnCount <= this.columnNumbers)
{
if (!this.column[columnCount])
{
this.column[columnCount] = [];
}
this.column[columnCount].push(currentRow[columnCount]);
columnCount += 1;
}
count = count + this.columnNumbers;
}
this.rowNumbers = this.rows.length;
if (this.rows.length > 0)
{
count = 0;
while(count < this.rows.length)
{
var tempRow = this.rows[count].slice(0);
if (count == 0 )
{
this.minval = tempRow.slice(0);
this.maxval = tempRow.slice(0);
this.radius = tempRow.slice(0);
this.center = tempRow.slice(0);
}
if (count > 0)
{
var rowcount = 0;
while(rowcount < tempRow.length)
{
this.minval.splice(rowcount,1,Math.min(this.minval[rowcount],tempRow[rowcount]));
this.maxval.splice(rowcount,1,Math.max(this.maxval[rowcount],tempRow[rowcount]));
this.radius.splice(rowcount,1,(this.maxval[rowcount] - this.minval[rowcount]) / 2);
this.center.splice(rowcount,1,this.maxval[rowcount] - this.radius[rowcount]);
rowcount = rowcount + 1;
}
}
tempRow = undefined;
count = count + 1;
}
tempRow = undefined;
}
}
}
botuMatrix.prototype = {
move: function(value,xyzw){
this.column[xyzw] = this.column[xyzw].map(function(i){return i+value;})
this.updateByColumn();
},
updateByColumn:function(){
var columnCount = 0;
while(columnCount < this.columnNumbers)
{
var rowCount = 0;
while(rowCount < this.rowNumbers)
{
this.rows[rowCount][columnCount] = this.column[columnCount][rowCount];
this.source[columnCount + rowCount * this.columnNumbers] = this.column[columnCount][rowCount];
rowCount++;
}
columnCount++;
}
},
updateByRow:function(){
var rowCount = 0;
while(rowCount < this.rowNumbers)
{
var columnCount = 0;
while(columnCount < this.columnNumbers)
{
this.column[columnCount][rowCount] = this.rows[rowCount][columnCount];
this.source[columnCount + rowCount * this.columnNumbers] = this.column[columnCount][rowCount];
columnCount++;
}
columnCount = undefined;
rowCount++;
}
columnCount = undefined;
rowCount = undefined;
},
toPoint:function(point){
if (point)
{
if(point.length == this.columnNumbers)
{
this.rows = this.rows.map(function(rowArray){
return rowArray.map(function(rowElement,index)
{
return rowElement + point[index];
}
)
});
this.updateByRow();
}
}
},
byPoint:function(point){
if (point)
{
if(point.length == this.columnNumbers)
{
this.rows = this.rows.map(function(rowArray){
return rowArray.map(function(rowElement,index)
{
return rowElement * point[index];
}
)
});
this.updateByRow();
}
}
},
rotate:function(angle,point,xyzType){
function multPointByValue(point,value){
return point.map(function(val){return value * val});
}
this.toPoint(multPointByValue(point,-1));
var rotateSource = [];
var radians = angle * Math.PI / 180.0;
switch(xyzType){
case "byX":
rotateSource = [1,0,0,
0,Math.cos(radians),Math.sin(radians),
0,-1 * Math.sin(radians),Math.cos(radians)
];
break;
case "byY":
rotateSource = [Math.cos(radians),0,-1 * Math.sin(radians),
0,1,0,
Math.sin(radians),0,Math.cos(radians)
];
break;
case "byZ":
rotateSource = [Math.cos(radians),Math.sin(radians),0,
-1 * Math.sin(radians),Math.cos(radians),0,
0,0,1];
break;
}
var rotateMatrix = new botuMatrix(rotateSource,3);
this.rows = this.rows.map(function(irow){
return vectorByMatrix(irow,rotateMatrix);
});
rotateMatrix = null;
rotateSource = null;
this.updateByRow();
this.toPoint(point);
}
}
function Scene(canvasID) {
this.backgroundColor = {red:1.0, green:1.0, blue:1.0, alpha:1.0};
this.canvas = document.getElementById(canvasID);
this.getContext();
this.indicBuffer = "";
this.vecVertex = [];
this.vecIndices = [];
}
Scene.prototype = {
clear: function(){
this.indicBuffer = "";
this.vecVertex = [];
this.vecIndices = [];
},
getContext:function(){
var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];
this.gl = null;
for (var ii = 0; ii < names.length; ++ii) {
try {
this.gl = this.canvas.getContext(names[ii]);
} catch(e) {}
if (this.gl) {
break;
}
}
},
initBuffers: function (vertex, indices) {
this.vertexBuffer = this.gl.createBuffer();
this.vertexBuffer.size = vertex.size;
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexBuffer);
this.program.botuPositionAttr = this.gl.getAttribLocation(this.program, "botuPosition");
this.gl.enableVertexAttribArray(this.program.botuPositionAttr);
this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array(vertex), this.gl.STATIC_DRAW);
if(indices)
{
this.indicBuffer = this.gl.createBuffer();
this.indicBuffer.numberOfItems = indices.length;
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.indicBuffer);
this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), this.gl.STATIC_DRAW);
}
},
initProgram: function (vxShaderDom, frShaderDom) {
var vxShader = document.getElementById(vxShaderDom).textContent;
var frShader = document.getElementById(frShaderDom).textContent;
this.program = createProgram(this.gl,vxShader, frShader);
this.gl.useProgram(this.program);
this.program.botuPositionAttr = this.gl.getAttribLocation(this.program, "botuPosition");
this.gl.enableVertexAttribArray(this.program.botuPositionAttr);
function createProgram(context, vxs, frs) {
var prg = context.createProgram();
var VertexShader = createShader(context, context.VERTEX_SHADER, vxs);
var FragmentShader = createShader(context, context.FRAGMENT_SHADER, frs);
context.attachShader(prg,VertexShader);
context.attachShader(prg,FragmentShader);
context.linkProgram(prg);
if (!context.getProgramParameter(prg, context.LINK_STATUS)) {
alert(context.getProgramInfoLog(prg));
}
return prg;
}
function createShader(context,type,shader)
{
var sh = context.createShader(type);
context.shaderSource(sh, shader);
context.compileShader(sh);
if (!context.getShaderParameter(sh, context.COMPILE_STATUS))
{
alert(context.getShaderInfoLog(sh));
}
return sh;
}
},
attributeSetup: function (attribName, attribSize) {
var attrib = this.gl.getAttribLocation(this.program, attribName);
this.gl.enableVertexAttribArray(attrib);
this.gl.vertexAttribPointer(attrib, attribSize, this.gl.FLOAT, false, 0, 0);
return attrib;
},
setViewPort: function(width,height){
this.gl.viewportWidth = width;
this.gl.viewportHeight = height;
},
setBackgroundColor: function(colorVec){
if (colorVec){
if (colorVec.length > 0)
{
this.backgroundColor.red = colorVec[0];
}
if (colorVec.length > 1)
{
this.backgroundColor.green = colorVec[1];
}
if (colorVec.length > 2)
{
this.backgroundColor.blue = colorVec[2];
}
if (colorVec.alpha > 3)
{
this.backgroundColor.red = colorVec[3];
}
}
},
AddObject: function(botuObj){
this.vecVertex.size = botuObj.vertex.size;
var next = Math.max(this.vecVertex.length / this.vecVertex.size,0);
this.vecVertex = this.vecVertex.concat(botuObj.vertex);
this.vecIndices = this.vecIndices.concat(botuObj.indices.map(function(i){return i + next}));
this.vecVertex.size = botuObj.vertex.size;
},
draw: function () {
this.initProgram("vertexShader", "fragmentShader");
this.initBuffers(this.vecVertex, this.vecIndices);
this.gl.viewport(0, 0, this.gl.viewportWidth, this.gl.viewportHeight);
this.gl.clearColor(this.backgroundColor.red,this.backgroundColor.green,this.backgroundColor.blue,this.backgroundColor.alpha);
this.gl.clear(this.gl.COLOR_BUFFER_BIT);
this.gl.vertexAttribPointer(this.program.botuPositionAttr,this.vertexBuffer.size,this.gl.FLOAT,false,0,0);
this.gl.enable(this.gl.DEPTH_TEST);
this.gl.drawElements(this.gl.TRIANGLES, this.indicBuffer.numberOfItems, this.gl.UNSIGNED_SHORT, 0);
}
}
function botuObject(vertex,indices){
this.vertex = [];
this.indices = indices;
this.matrix = new botuMatrix(vertex,3);
this.vertex = this.matrix.source;
this.vertex.size = 3;
}
botuObject.prototype = {
moveByX:function(value){
this.matrix.move(value,0);
},
moveByY:function(value){
this.matrix.move(value,1);
},
moveByZ:function(value){
this.matrix.move(value,2);
},
testToPoint:function(value){
this.matrix.toPoint(value);
},
rotateAroundCenter:function(angle,xyzType)
{
this.matrix.rotate(angle,this.matrix.center,xyzType);
},
rotateAroundMaxPoint:function(angle,xyzType)
{
this.matrix.rotate(angle,this.matrix.maxval,xyzType);
},
rotateAroundPoint:function(angle,point,xyzType)
{
this.matrix.rotate(angle,point,xyzType);
}
}
function botuGroupedObject(){
this.vertex = [];
this.indices = [];
}
botuGroupedObject.prototype = {
addObject:function(obj){
this.vertex.size = obj.vertex.size;
var next = Math.max(this.vertex.length / this.vertex.size,0);
this.vertex = this.vertex.concat(obj.vertex);
this.indices = this.indices.concat(obj.indices.map(function(i){return i + next}));
this.vertex.size = obj.vertex.size;
}
}
function cub(centerPoint,width,height,depth)
{
this.frontCenter=[centerPoint[0],centerPoint[1],centerPoint[2] + depth / 2];
this.backCenter=[centerPoint[0],centerPoint[1],centerPoint[2] - depth / 2];
this.matrix = "";
this.vertex=[];
this.indices=[0,1,3,
1,2,3,
0,4,7,
0,3,7,
3,7,6,
6,3,2,
2,6,1,
1,5,6,
0,4,5,
0,5,1,
7,4,5,
7,5,6
];
this.init(width,height);
}
cub.prototype = {
init:function(width,height){
this.matrix = new botuMatrix([ this.frontCenter[0] - width / 2, this.frontCenter[1] + height / 2, this.frontCenter[2],
this.frontCenter[0] + width / 2, this.frontCenter[1] + height / 2, this.frontCenter[2],
this.frontCenter[0] + width / 2, this.frontCenter[1] - height / 2, this.frontCenter[2],
this.frontCenter[0] - width / 2, this.frontCenter[1] - height / 2, this.frontCenter[2],
this.backCenter[0] - width / 2, this.backCenter[1] + height / 2, this.backCenter[2],
this.backCenter[0] + width / 2, this.backCenter[1] + height / 2, this.backCenter[2],
this.backCenter[0] + width / 2, this.backCenter[1] - height / 2, this.backCenter[2],
this.backCenter[0] - width / 2, this.backCenter[1] - height / 2, this.backCenter[2],
],3);
this.vertex = this.matrix.source;
this.vertex.size = 3;
},
moveByX:function(value){
this.matrix.move(value,0);
},
moveByY:function(value){
this.matrix.move(value,1);
},
moveByZ:function(value){
this.matrix.move(value,2);
},
testToPoint:function(value){
this.matrix.toPoint(value);
},
rotateAroundCenter:function(angle,xyzType)
{
this.matrix.rotate(angle,this.matrix.center,xyzType);
},
rotateAroundMaxPoint:function(angle,xyzType)
{
this.matrix.rotate(angle,this.matrix.maxval,xyzType);
},
rotateAroundPoint:function(angle,point,xyzType)
{
this.matrix.rotate(angle,point,xyzType);
}
}
function plainClass(centerPoint,width,height)
{
this.frontCenter=centerPoint;
this.matrix = "";
this.vertex=[];
this.indices=[0,1,3,
1,2,3,
];
this.init(width,height);
}
plainClass.prototype = {
init:function(width,height){
this.vertex = [ this.frontCenter[0] - width / 2, this.frontCenter[1] + height / 2, this.frontCenter[2],
this.frontCenter[0] + width / 2, this.frontCenter[1] + height / 2, this.frontCenter[2],
this.frontCenter[0] + width / 2, this.frontCenter[1] - height / 2, this.frontCenter[2],
this.frontCenter[0] - width / 2, this.frontCenter[1] - height / 2, this.frontCenter[2]];
this.matrix = new botuMatrix(this.vertex,3);
this.vertex.size = 3;
},
moveByX:function(value){
this.matrix.move(value,0);
},
moveByY:function(value){
this.matrix.move(value,1);
},
moveByZ:function(value){
this.matrix.move(value,2);
},
testToPoint:function(value){
this.matrix.toPoint(value);
},
rotateAroundCenter:function(angle,xyzType)
{
this.matrix.rotate(angle,this.matrix.center,xyzType);
},
rotateAroundMaxPoint:function(angle,xyzType)
{
this.matrix.rotate(angle,this.matrix.maxval,xyzType);
},
rotateAroundPoint:function(angle,point,xyzType)
{
this.matrix.rotate(angle,point,xyzType);
},
getUpperLeft:function(){
return this.matrix.rows[0];
},
getDownLeft:function(){
return this.matrix.rows[3];
},
getDownRight:function(){
return this.matrix.rows[2];
},
connect:function(anotherPlain){
var downLeftPoint = anotherPlain.getUpperLeft();
var dvPoint = downLeftPoint.map(function(value,index){return value - this.getUpperLeft()[index]},this);
this.testToPoint(dvPoint);
},
connectUP:function(anotherPlain){
var downLeftPoint = anotherPlain.getDownLeft();
var dvPoint = downLeftPoint.map(function(value,index){return value - this.getUpperLeft()[index]},this);
this.testToPoint(dvPoint);
},
connectLeft:function(anotherPlain){
var downRightPoint = anotherPlain.getDownRight();
var dvPoint = downRightPoint.map(function(value,index){return value - this.getDownLeft()[index]},this);
this.testToPoint(dvPoint);
}
}
function circle(centerPoint,radius,numOfPlains){
var plainWidth = 2 * Math.PI * radius / numOfPlains;
var globalAngle = 45 * plainWidth / radius; /* (1/2 width * 90) */
var numOfIterations = 360 / globalAngle;
var plainCenter = [centerPoint[0],centerPoint[1],centerPoint[2] + radius];
this.angle = 360 / numOfPlains;
this.plainObjects = [];
var plain = "";
var oldplain = "";
var grp = new botuGroupedObject();
for(var i = 1;i<=numOfPlains;i++)
{
var ang = (i-1) * this.angle
plain = new plainClass(plainCenter,plainWidth,plainWidth);
plain.rotateAroundCenter(ang,"byX");
if (i > 1){
plain.connectUP(oldplain);
}
oldplain = plain;
grp.addObject(plain);
}
plain = null;
oldplain = null;
var itt = 0;
var tempAngle = 0;
var temp = makeCopy(grp,botuObject);
while(tempAngle < 360)
{
itt++;
tempAngle = itt * globalAngle;
var grp2 = makeCopy(temp,botuObject);
grp2.rotateAroundCenter(tempAngle,"byY");
grp.addObject(grp2);
}
/* var plain = "";
var oldplain = "";
for(var i = 1;i<=numOfPlains;i++)
{
var ang = (i-1) * this.angle
plain = new plainClass(plainCenter,plainWidth,plainWidth);
plain.rotateAroundCenter(ang,"byY");
// alert(plain + " " + oldplain + " " + plainCenter + " " + plainWidth);
if (i > 1){
// alert(plain + " " + oldplain + " " + i);
plain.connectLeft(oldplain);
}
oldplain = plain;
// this.plainObjects.push(plain);
grp.addObject(plain);
}
*/
var grpobj = new botuObject(grp.vertex,grp.indices);
this.vertex = grp.vertex;
this.indices = grp.indices;
this.matrix = grpobj.matrix;
}
circle.prototype = {
init:function(width,height){
this.matrix = new botuMatrix([ this.frontCenter[0] - width / 2, this.frontCenter[1] + height / 2, this.frontCenter[2],
this.frontCenter[0] + width / 2, this.frontCenter[1] + height / 2, this.frontCenter[2],
this.frontCenter[0] + width / 2, this.frontCenter[1] - height / 2, this.frontCenter[2],
this.frontCenter[0] - width / 2, this.frontCenter[1] - height / 2, this.frontCenter[2],
this.backCenter[0] - width / 2, this.backCenter[1] + height / 2, this.backCenter[2],
this.backCenter[0] + width / 2, this.backCenter[1] + height / 2, this.backCenter[2],
this.backCenter[0] + width / 2, this.backCenter[1] - height / 2, this.backCenter[2],
this.backCenter[0] - width / 2, this.backCenter[1] - height / 2, this.backCenter[2],
],3);
this.vertex = this.matrix.source;
this.vertex.size = 3;
},
moveByX:function(value){
this.matrix.move(value,0);
},
moveByY:function(value){
this.matrix.move(value,1);
},
moveByZ:function(value){
this.matrix.move(value,2);
},
testToPoint:function(value){
this.matrix.toPoint(value);
},
rotateAroundCenter:function(angle,xyzType)
{
this.matrix.rotate(angle,this.matrix.center,xyzType);
},
rotateAroundMaxPoint:function(angle,xyzType)
{
this.matrix.rotate(angle,this.matrix.maxval,xyzType);
},
rotateAroundMinPoint:function(angle,xyzType)
{
this.matrix.rotate(angle,this.matrix.minval,xyzType);
},
rotateAroundPoint:function(angle,point,xyzType)
{
this.matrix.rotate(angle,point,xyzType);
}
}
window.onload = function () {
var scene = new Scene("webgl");
scene.setBackgroundColor([0.1,0.5,0.6,0.2]);
scene.setViewPort(300, 300);
var angle = 0;
var debugAngle = document.getElementById("debugAngle");
var speed = 0;
var cube = new cub([-100,105,0],90,90,90);
var circ = new circle([-120,-70,0],60,30);
var plain = new plainClass([100,10,10],120,130);
/* scene.AddObject(cube);
scene.AddObject(circ);
scene.AddObject(plain);
scene.draw();*/
(function animloop(){
if(angle >=90){
speed = -0.01;
}
if(angle <= 0){
speed = 0.01;
}
angle+=speed;
debugAngle.innerHTML = angle + " " + speed;
scene.clear();
cube.rotateAroundCenter(angle,"byY");
cube.rotateAroundCenter(angle,"byX");
cube.rotateAroundCenter(angle,"byZ");
plain.rotateAroundCenter(angle,"byX");
circ.rotateAroundPoint(angle,[-100,-50,20],"byZ");
scene.AddObject(cube);
scene.AddObject(circ);
scene.AddObject(plain);
scene.draw();
requestAnimFrame(animloop, scene.canvas);
})();
}
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback, element) {
return window.setTimeout(callback, 1000/100);
};
})();
HTML файл
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="default.js"></script>
<script type="x-shader" id="vertexShader">
attribute vec3 botuPosition;
varying vec4 colorPos;
void main(){
colorPos = vec4(max(botuPosition.x,(-1.0) * botuPosition.x) / 200.0, max(botuPosition.y,(-1.0) * botuPosition.y) / 200.0, max(botuPosition.z,(-1.0) * botuPosition.z) / 200.0,1.0);
gl_Position = vec4(botuPosition,200);
}
</script>
<script type="x-shader" id="fragmentShader">
precision highp float;
varying vec4 colorPos;
void main(){
gl_FragColor = colorPos;
}
</script>
</head>
<body class="phone">
<canvas id="webgl" width="300" height="300"> </canvas>
<p id="debugAngle"></p>
</body>
</html>
Автор: Botu
Источник [3]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/63185
Ссылки в тексте:
[1] статьи: http://habrahabr.ru/post/227285/
[2] статье: http://habrahabr.ru/post/227201/
[3] Источник: http://habrahabr.ru/post/227415/
Нажмите здесь для печати.