Отрисовка 3Д фигур

@egor2116 · Регистрация: 20.01.2013

Студворк — интернет-сервис помощи студентам

Добрый день!
Есть сложность в программирование 3Д фигуры(куб). Подскажите порядок преобразований для отрисовки фигуры. В данный момент использую такой:
1. Рисую куб в 2Д в мировых координатах(ресую один квадрат, затем другой и соединяю их вершины)
2. С помощью матрицы преобразований перевожу координаты вершин куба в видовые координаты
3. С помощью матрицы(ортографической) преобразований перевожу координаты вершин куба(они уже видовые) в координаты проекции
4. Преобразовую в декартовы координаты

Вопрос не связан с OpenGL или конкретным языком, подумал тут есть люди разбирающиеся в координатной геометрии.

@vxg · 19.04.2017, 15:43

egor2116, обычно так:
-есть вектор в однородных координатах (координаты вершины)
-есть матрица в однородных координатах задающая преобразование полученная перемножением в требуемой очередности нужных матриц поворота, переноса, отражения, масштабирования и проецирования
-умножая их получаем преобразованный вектор который переводится в растр по заданным правилам обычно путем приведения двух из четырех координат вектора к координатам окна на экране

@egor2116 · 19.04.2017, 15:48 **[ТС]**

О, первый вопрос, почему матрицы 4х разрядные, у нас же координаты вершин фигуры 3х(x,y,z), зачем нужна четвертая координата, она нигде в расчетах не участвует ?

@vxg · 19.04.2017, 15:57

egor2116, человек взывающий к людям разбирающимся в координатной геометрии должен знать зачем нужна четвертая координата. я думаю. я читал вот это "компьютерная графика шикин боресков"

@egor2116 · 19.04.2017, 16:01 **[ТС]**

человек взывающий к людям разбирающимся в координатной геометрии

Вот именно т.к. я не знаком и думал помогут знающие.
Выше вы описали тоже что и я. Я уже написал программу, только есть ряд проблем и главная из них что после перевода в декартову систему куб становится пирамидой

Добавлено через 22 секунды
Спс за книгу, посмотрю.

@vxg · 19.04.2017, 16:13

egor2116, смысл в том что есть определённые математические приемы. Если вы изобрели их повторно что в принципе несложно для простейших случаев но что-то пошло не так давайте рассмотрим ваши выкладки

@egor2116 · 20.04.2017, 08:26 **[ТС]**

Если вы изобрели их повторно

Ничего я не изобретал, есть определенный методический материал, но он будет понятен только при условии что человек и так владеет данным вопросом, там даже просматриваеться последовательная связь при вычислениях, но есть моменты где непонятно откуда это взялось и зачем.

давайте рассмотрим ваши выкладки

Давайте,я только за

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
 // ВЕКТОР НАБЛЮДЕНИЯ (КАМЕРА)
     var e = new Vector3(ro, fi, t); // ро фи тета КРУТИТЬ ПО X Z Y
     
     // ТОЧКА НАБЛЮДЕНИЯ, НАЧАЛО СИСТЕМЫ ВИДОВЫХ КООРДИНАТ
     var E = new Vector3(e.x * Math.cos(e.y) * Math.sin(e.z),
                                  e.x * Math.sin(e.y) * Math.sin(e.z),
                                  e.x * Math.cos(e.z));
     
     // МАТРИЦА ПРЕОБРАЗОВАНИЯ В ВИДОВЫЕ КООРДИНАТЫ
     var V = [[-1 * Math.sin(e.y), -1 * Math.cos(e.z) * Math.cos(e.y), -1 * Math.sin(e.z) * Math.cos(e.y)],
                    [Math.cos(e.y), -1 * Math.cos(e.z) * Math.sin(e.y), -1 * Math.sin(e.z) * Math.sin(e.y)],
                    [0, Math.sin(e.z), -1 * Math.cos(e.z)]];
    
    // РАССТОЯНИЕ ДО ЭКРАНА
    var d = _d;
    // РАСТОЯНИЕ ПО ОСИ Z
    var c = _c;
    // МАТРИЦА ПРОЕКЦИЙ ОРТО
    var Q = [[1,0,0],
                [0,1,0],
                [0,0, -1 * (d / (c - d))]];
 
    // ПОЛУЧАЕМ ЗНАЧЕНИЕ ПОЛЯ ОБЬЕКТА ПО ИНДЕКСУ     
     function getValueObjToIdx(obj, idx){ // return Numeric
         var counter = 0;
         for(var o in obj){
             if(idx == counter)
                 return obj[o];
             ++counter;
         }
         return -1;
     }
     
     // ПРЕБРАЗОВАНИЕ В ВИДОВЫЕ КООРДИНАТЫ
     function vertexWorldToView(vec){ // return Vector3
            var transformVector = new Vector3(0, 0, 0);
            for(var i = 0; i < V.length; i++){
                //console.log(getValueObjToIdx(vec, i));
                var tmp = 0;
                for(var j = 0; j < V[i].length; j++){
                    tmp += V[i][j] * getValueObjToIdx(vec, j);
                }
                if(i == 0){ // x
                    transformVector.x = tmp;
                }
                else if(i == 1){ // y
                    transformVector.y = tmp;
                }
                else if(i == 2){ // z
                    transformVector.z = tmp;
                }
                else{
                    console.log("unknow idx");
                }
            }
            return transformVector;
     }
     
     // ОПРЕДЕЛЕНИЕ КООРДИНАТ ПРОЕКЦИИ
     function vertexViewToScreen(vec){
         var transformVector = new Vector3(0, 0, 0);
            for(var i = 0; i < Q.length; i++){
                //console.log(getValueObjToIdx(vec, i));
                var tmp = 0;
                for(var j = 0; j < Q[i].length; j++){
                    tmp += Q[i][j] * getValueObjToIdx(vec, j);
                }
                if(i == 0){ // x
                    transformVector.x = tmp;
                }
                else if(i == 1){ // y
                    transformVector.y = tmp;
                }
                else if(i == 2){ // z
                    transformVector.z = tmp;
                }
                else{
                    console.log("unknow idx");
                }
            }
            return transformVector;
     }
     
    // ОПРЕДЕЛЕНИЕ ДЕКАРТОВЫХ КООРДИНАТ
    function vertexScreenToDec(vec){
         var transformVector = new Vector3(0, 0, 0);
            transformVector.x = vec.x * d / vec.z;
            transformVector.y = vec.y * d / vec.z;
            transformVector.z = 0;
            return transformVector;
    }
// СТРОИМ КУБ ПО ВЕРШИНАМ, ПО ЧАСОВОЙ
    var cub = new Cub(new Vector3(-100, 100, 100), new Vector3(100, 100, 100), 
                                new Vector3(100 , -100 , 100), new Vector3(-100, -100, 100),
                                new Vector3(-100 , 100, -100), new Vector3(100, 100, -100), 
                                new Vector3(100, -100, -100), new Vector3(-100, -100, -100));
    //cub.draw();
    
    // ПРЕОБРАЗОВЫВАЕМ В ВИДОВЫЕ КООРДИНАТЫ
    cub.vec3_1 = vertexWorldToView(cub.vec3_1);
    cub.vec3_2 = vertexWorldToView(cub.vec3_2);
    cub.vec3_3 = vertexWorldToView(cub.vec3_3);
    cub.vec3_4 = vertexWorldToView(cub.vec3_4);
    cub.vec3_5 = vertexWorldToView(cub.vec3_5);
    cub.vec3_6 = vertexWorldToView(cub.vec3_6);
    cub.vec3_7 = vertexWorldToView(cub.vec3_7);
    cub.vec3_8 = vertexWorldToView(cub.vec3_8);  
    
/*  cub.print();
    
    cub.draw(250, 250); */
    
    // ПРЕБРАЗОВАНИЕ В КООРДИНАТЫ ПРОЕКЦИИ
    cub.vec3_1 = vertexViewToScreen(cub.vec3_1);
    cub.vec3_2 = vertexViewToScreen(cub.vec3_2);
    cub.vec3_3 = vertexViewToScreen(cub.vec3_3);
    cub.vec3_4 = vertexViewToScreen(cub.vec3_4);
    cub.vec3_5 = vertexViewToScreen(cub.vec3_5);
    cub.vec3_6 = vertexViewToScreen(cub.vec3_6);
    cub.vec3_7 = vertexViewToScreen(cub.vec3_7);
    cub.vec3_8 = vertexViewToScreen(cub.vec3_8); 
    
/*  cub.print();
    
    cub.draw(250, 250); */
    
    // ПРЕОБРАЗОВАНИЕ В ДЕКАРТОВЫ КООРДИНАТЫ
    cub.vec3_1 = vertexScreenToDec(cub.vec3_1);
    cub.vec3_2 = vertexScreenToDec(cub.vec3_2);
    cub.vec3_3 = vertexScreenToDec(cub.vec3_3);
    cub.vec3_4 = vertexScreenToDec(cub.vec3_4);
    cub.vec3_5 = vertexScreenToDec(cub.vec3_5);
    cub.vec3_6 = vertexScreenToDec(cub.vec3_6);
    cub.vec3_7 = vertexScreenToDec(cub.vec3_7);
    cub.vec3_8 = vertexScreenToDec(cub.vec3_8); 
    
    //cub.print();
    
    cub.draw(250, 250);

@8Observer8 · 20.04.2017, 09:25

Сообщение от egor2116

О, первый вопрос, почему матрицы 4х разрядные, у нас же координаты вершин фигуры 3х(x,y,z), зачем нужна четвертая координата, она нигде в расчетах не участвует ?

Координаты 4 разрядные: (x/w, y/w, z/w, w). Параметр w обычно равен единице. Этот параметр, наверное, используется где-то в расчётах, но я пока не сталкивался с этим. Матрицы 4х разрядные ещё, потому что если выводить их математически, то для определения свободных коэффициентов $https://www.cyberforum.ru/cgi-bin/latex.cgi?{T}_{x}$ , $https://www.cyberforum.ru/cgi-bin/latex.cgi?{T}_{y}$ и $https://www.cyberforum.ru/cgi-bin/latex.cgi?{T}_{z}$ не хватает размерности, поэтому её искусственно вводят. Там и появлятся w. Вам нужно посмотреть вывод трёх матриц преобразований, откуда они вообще получаются. В математике всё откуда-нибудь да выводится.

Добавлено через 8 минут
egor2116, вот так рисуется кубик на JavaScript и WebGL: ch08/PointLightedCube_animation

index.html

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
    <canvas id="webgl" width="400" height="400">
        Please use a browser that supports "canvas"
    </canvas>
 
    <script type="x-shader/x-vertex" id="VertexShader">
        attribute vec4 a_Position;
        attribute vec4 a_Color;
        attribute vec4 a_Normal;
        uniform mat4 u_MvpMatrix;
        uniform mat4 u_ModelMatrix;     // Model matrix
        uniform mat4 u_NormalMatrix;    // Transformation matrix of the normal
        uniform vec3 u_LightColor;      // Light color
        uniform vec3 u_LightPosition;   // Position of the light source
        uniform vec3 u_AmbientLight;    // Ambient light color
        varying vec4 v_Color;
 
        void main()
        {
            gl_Position = u_MvpMatrix * a_Position;
 
            // Recalculate the normal based on the model matrix and
            // make its length 1
            vec3 normal = normalize(vec3(u_NormalMatrix * a_Normal));
 
            // Calculate world coordinate of vertex
            vec4 vertexPosition = u_ModelMatrix * a_Position;
 
            // Calculate the light direction and make it 1.0 in length
            vec3 lightDirection = normalize(u_LightPosition - vec3(vertexPosition));
 
            // Calculate the dot product of the normal and light direction
            float nDotL = max(dot(lightDirection, normal), 0.0);
 
            // Calculate the color due to diffuse reflection
            vec3 diffuse = u_LightColor * a_Color.rgb * nDotL;
 
            // Calculate the color due to ambient reflection
            vec3 ambient = u_AmbientLight * a_Color.rgb;
 
            // Add the surface colors due to diffuse
            // reflection and ambient reflection
            v_Color = vec4(diffuse + ambient, a_Color.a);
        }
    </script>
 
    <script type="x-shader/x-fragment" id="FragmentShader">
        precision mediump float;
 
        varying vec4 v_Color;
 
        void main()
        {
            gl_FragColor = v_Color;
        }
    </script>
 
    <script src="https://dl.dropboxusercontent.com/s/ylw7v7a44xtrwv0/webgl-utils.js"></script>
    <script src="https://dl.dropboxusercontent.com/s/iz1n21c8xafd76n/webgl-debug.js"></script>
    <script src="https://dl.dropboxusercontent.com/s/subm1yzylxuao8v/cuon-utils.js"></script>
    <script src="https://dl.dropboxusercontent.com/s/jw3p82lq1cjwekg/cuon-matrix.js"></script>

main.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
// PointLightedCube_animation.js (c) 2012 matsuda
// This is an example from the book "WebGL Programming Guide"
// by Kouichi Matsuda and Rodger Lea
 
// Rotation angle (degrees/second)
var ANGLE_STEP = 30.0;
 
// Last time that this function was called
var g_last = Date.now();
 
main();
//window.onload = main;
 
function main()
{
    // Retrieve <canvas> element
    var canvas = document.getElementById('webgl');
 
    // Get the rendering context for WebGL
    var gl = getWebGLContext(canvas);
    if (!gl)
    {
        console.log('Failed to get the rendering context for WebGL');
        return;
    }
 
    // Get shader elements
    var vShaderElement = document.getElementById("VertexShader");
    var fShaderElement = document.getElementById("FragmentShader");
    if (vShaderElement == null)
    {
        console.log("Failed to get the vertex shader element");
        return;
    }
    if (fShaderElement == null)
    {
        console.log("Failed to get the fragment shader element");
        return;
    }
 
    // Get shader sources
    var vShaderSource = vShaderElement.firstChild.textContent;
    var fShaderSource = fShaderElement.firstChild.textContent;
 
    // Initialize shaders
    if (!initShaders(gl, vShaderSource, fShaderSource))
    {
        console.log('Failed to intialize shaders');
        return;
    }
 
    // Set the vertex coordinates, the color and the normal
    var n = initVertexBuffers(gl);
    if (n < 0)
    {
        console.log('Failed to set the vertex information');
        return;
    }
 
    // Set the clear color and enable the depth test
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.enable(gl.DEPTH_TEST);
 
    // Get the storage locations of uniform variables and so on
    var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
    var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix');
    var u_NormalMatrix = gl.getUniformLocation(gl.program, 'u_NormalMatrix');
    var u_LightColor = gl.getUniformLocation(gl.program, 'u_LightColor');
    var u_LightPosition = gl.getUniformLocation(gl.program, 'u_LightPosition');
    var u_AmbientLight = gl.getUniformLocation(gl.program, 'u_AmbientLight');
    if (!u_MvpMatrix || !u_NormalMatrix || !u_LightColor || !u_LightPosition || !u_AmbientLight)
    {
        console.log('Failed to get the storage location');
        return;
    }
 
    var vpMatrix = new Matrix4();   // View projection matrix
    vpMatrix.setPerspective(30, canvas.width / canvas.height, 1, 100);
    vpMatrix.lookAt(6, 6, 14, 0, 0, 0, 0, 1, 0);
 
    // Set the light color (white)
    gl.uniform3f(u_LightColor, 1.0, 1.0, 1.0);
    // Set the light direction (in the world coordinate)
    gl.uniform3f(u_LightPosition, 2.3, 4.0, 3.5);
    // Set the ambient light
    gl.uniform3f(u_AmbientLight, 0.2, 0.2, 0.2);
 
    var currentAngle = 0.0;  // Current rotation angle
    var modelMatrix = new Matrix4();  // Model matrix
    var mvpMatrix = new Matrix4();    // Model view projection matrix
    var normalMatrix = new Matrix4(); // Transformation matrix for normals
 
    var tick = function ()
    {
        currentAngle = animate(currentAngle);  // Update the rotation angle
 
        // Calculate the model matrix
        modelMatrix.setRotate(currentAngle, 0, 1, 0); // Rotate around the y-axis
        // Pass the model matrix to u_ModelMatrix
        gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);
 
        // Pass the model view projection matrix to u_MvpMatrix
        mvpMatrix.set(vpMatrix).multiply(modelMatrix);
        gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
 
        // Pass the matrix to transform the normal based on the model matrix to u_NormalMatrix
        normalMatrix.setInverseOf(modelMatrix);
        normalMatrix.transpose();
        gl.uniformMatrix4fv(u_NormalMatrix, false, normalMatrix.elements);
 
        // Clear color and depth buffer
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
        // Draw the cube
        gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
 
        requestAnimationFrame(tick, canvas); // Request that the browser ?calls tick
    };
    tick();
}
 
function initVertexBuffers(gl)
{
    // Create a cube
    //    v6----- v5
    //   /|      /|
    //  v1------v0|
    //  | |     | |
    //  | |v7---|-|v4
    //  |/      |/
    //  v2------v3
    // Coordinates
    var vertices = new Float32Array([
       2.0, 2.0, 2.0, -2.0, 2.0, 2.0, -2.0, -2.0, 2.0, 2.0, -2.0, 2.0, // v0-v1-v2-v3 front
       2.0, 2.0, 2.0, 2.0, -2.0, 2.0, 2.0, -2.0, -2.0, 2.0, 2.0, -2.0, // v0-v3-v4-v5 right
       2.0, 2.0, 2.0, 2.0, 2.0, -2.0, -2.0, 2.0, -2.0, -2.0, 2.0, 2.0, // v0-v5-v6-v1 up
      -2.0, 2.0, 2.0, -2.0, 2.0, -2.0, -2.0, -2.0, -2.0, -2.0, -2.0, 2.0, // v1-v6-v7-v2 left
      -2.0, -2.0, -2.0, 2.0, -2.0, -2.0, 2.0, -2.0, 2.0, -2.0, -2.0, 2.0, // v7-v4-v3-v2 down
       2.0, -2.0, -2.0, -2.0, -2.0, -2.0, -2.0, 2.0, -2.0, 2.0, 2.0, -2.0  // v4-v7-v6-v5 back
    ]);
 
    // Colors
    var colors = new Float32Array([
      1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v0-v1-v2-v3 front
      1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v0-v3-v4-v5 right
      1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v0-v5-v6-v1 up
      1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v1-v6-v7-v2 left
      1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v7-v4-v3-v2 down
      1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0　    // v4-v7-v6-v5 back
    ]);
 
    // Normal
    var normals = new Float32Array([
      0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0,  // v0-v1-v2-v3 front
      1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0,  // v0-v3-v4-v5 right
      0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0,  // v0-v5-v6-v1 up
     -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0,  // v1-v6-v7-v2 left
      0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0,  // v7-v4-v3-v2 down
      0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0   // v4-v7-v6-v5 back
    ]);
 
    // Indices of the vertices
    var indices = new Uint8Array([
       0, 1, 2, 0, 2, 3,    // front
       4, 5, 6, 4, 6, 7,    // right
       8, 9, 10, 8, 10, 11,    // up
      12, 13, 14, 12, 14, 15,    // left
      16, 17, 18, 16, 18, 19,    // down
      20, 21, 22, 20, 22, 23     // back
    ]);
 
    // Write the vertex property to buffers (coordinates, colors and normals)
    if (!initArrayBuffer(gl, 'a_Position', vertices, 3, gl.FLOAT)) return -1;
    if (!initArrayBuffer(gl, 'a_Color', colors, 3, gl.FLOAT)) return -1;
    if (!initArrayBuffer(gl, 'a_Normal', normals, 3, gl.FLOAT)) return -1;
 
    // Unbind the buffer object
    gl.bindBuffer(gl.ARRAY_BUFFER, null);
 
    // Write the indices to the buffer object
    var indexBuffer = gl.createBuffer();
    if (!indexBuffer)
    {
        console.log('Failed to create the buffer object');
        return false;
    }
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
 
    return indices.length;
}
 
function initArrayBuffer(gl, attribute, data, num, type)
{
    // Create a buffer object
    var buffer = gl.createBuffer();
    if (!buffer)
    {
        console.log('Failed to create the buffer object');
        return false;
    }
    // Write date into the buffer object
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
    // Assign the buffer object to the attribute variable
    var a_attribute = gl.getAttribLocation(gl.program, attribute);
    if (a_attribute < 0)
    {
        console.log('Failed to get the storage location of ' + attribute);
        return false;
    }
    gl.vertexAttribPointer(a_attribute, num, type, false, 0, 0);
    // Enable the assignment of the buffer object to the attribute variable
    gl.enableVertexAttribArray(a_attribute);
 
    return true;
}
 
function animate(angle)
{
    // Calculate the elapsed time
    var now = Date.now();
    var elapsed = now - g_last;
    g_last = now;
    // Update the current rotation angle (adjusted by the elapsed time)
    var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;
    return newAngle %= 360;
}

@8Observer8 · 20.04.2017, 09:29

Тот вариант кубика с шейдингом по Гуро, а этот более продвинутый по Фонгу: ch08/LightedCube_perFragment

index.html

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
    <canvas id="webgl" width="400" height="400">
        Please use a browser that supports "canvas"
    </canvas>
 
    <script type="x-shader/x-vertex" id="VertexShader">
        attribute vec4 a_Position;
        attribute vec4 a_Color;
        attribute vec4 a_Normal;
        uniform mat4 u_MvpMatrix;
        uniform mat4 u_ModelMatrix;     // Model matrix
        uniform mat4 u_NormalMatrix;    // Transformation matrix of the normal
        varying vec3 v_Position;
        varying vec4 v_Color;
        varying vec3 v_Normal;
 
        void main()
        {
            gl_Position = u_MvpMatrix * a_Position;
 
            // Calculate the vertex position in the world coordinate
            v_Position = vec3(u_ModelMatrix * a_Position);
 
            v_Normal = normalize(vec3(u_NormalMatrix * a_Normal));
 
            v_Color = a_Color;
        }
    </script>
 
    <script type="x-shader/x-fragment" id="FragmentShader">
        precision mediump float;
 
        uniform vec3 u_LightColor;      // Light color
        uniform vec3 u_LightPosition;   // Position of the light source
        uniform vec3 u_AmbientLight;    // Ambient light color
        varying vec3 v_Position;
        varying vec4 v_Color;
        varying vec3 v_Normal;
 
        void main()
        {
            // Normalize the normal because it is interpolated and
            // not 1.0 in length any more
            vec3 normal = normalize(v_Normal);
 
            // Calculate the light direction and make its length 1
            vec3 lightDirection = normalize(u_LightPosition - v_Position);
 
            // The dot product of the light direction and the
            // orientation of a surface (the normal)
            float nDotL = max(dot(lightDirection, normal), 0.0);
 
            // Calculate the final color from diffuse reflection and
            // ambient reflection
            vec3 diffuse = u_LightColor * v_Color.rgb * nDotL;
            vec3 ambient = u_AmbientLight * v_Color.rgb;
            gl_FragColor = vec4(diffuse + ambient, v_Color.a);
        }
    </script>
 
    <script src="https://dl.dropboxusercontent.com/s/ylw7v7a44xtrwv0/webgl-utils.js"></script>
    <script src="https://dl.dropboxusercontent.com/s/iz1n21c8xafd76n/webgl-debug.js"></script>
    <script src="https://dl.dropboxusercontent.com/s/subm1yzylxuao8v/cuon-utils.js"></script>
    <script src="https://dl.dropboxusercontent.com/s/jw3p82lq1cjwekg/cuon-matrix.js"></script>

main.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
// PointLightedCube_perFragment.js (c) 2012 matsuda
// This is an example from the book "WebGL Programming Guide"
// by Kouichi Matsuda and Rodger Lea
 
main();
//window.onload = main;
 
function main()
{
    // Retrieve <canvas> element
    var canvas = document.getElementById('webgl');
 
    // Get the rendering context for WebGL
    var gl = getWebGLContext(canvas);
    if (!gl)
    {
        console.log('Failed to get the rendering context for WebGL');
        return;
    }
 
    // Get shader elements
    var vShaderElement = document.getElementById("VertexShader");
    var fShaderElement = document.getElementById("FragmentShader");
    if (vShaderElement == null)
    {
        console.log("Failed to get the vertex shader element");
        return;
    }
    if (fShaderElement == null)
    {
        console.log("Failed to get the fragment shader element");
        return;
    }
 
    // Get shader sources
    var vShaderSource = vShaderElement.firstChild.textContent;
    var fShaderSource = fShaderElement.firstChild.textContent;
 
    // Initialize shaders
    if (!initShaders(gl, vShaderSource, fShaderSource))
    {
        console.log('Failed to intialize shaders');
        return;
    }
 
    // Set the vertex information
    var n = initVertexBuffers(gl);
    if (n < 0)
    {
        console.log('Failed to set the vertex information');
        return;
    }
 
    // Set the clear color and enable the depth test
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.enable(gl.DEPTH_TEST);
 
    // Get the storage locations of uniform variables
    var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
    var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix');
    var u_NormalMatrix = gl.getUniformLocation(gl.program, 'u_NormalMatrix');
    var u_LightColor = gl.getUniformLocation(gl.program, 'u_LightColor');
    var u_LightPosition = gl.getUniformLocation(gl.program, 'u_LightPosition');
    var u_AmbientLight = gl.getUniformLocation(gl.program, 'u_AmbientLight');
    if (!u_ModelMatrix || !u_MvpMatrix || !u_NormalMatrix || !u_LightColor || !u_LightPosition || !u_AmbientLight)
    {
        console.log('Failed to get the storage location');
        return;
    }
 
    // Set the light color (white)
    gl.uniform3f(u_LightColor, 1.0, 1.0, 1.0);
    // Set the light direction (in the world coordinate)
    gl.uniform3f(u_LightPosition, 2.3, 4.0, 3.5);
    // Set the ambient light
    gl.uniform3f(u_AmbientLight, 0.2, 0.2, 0.2);
 
    var modelMatrix = new Matrix4();  // Model matrix
    var mvpMatrix = new Matrix4();    // Model view projection matrix
    var normalMatrix = new Matrix4(); // Transformation matrix for normals
 
    // Calculate the model matrix
    modelMatrix.setRotate(90, 0, 1, 0); // Rotate around the y-axis
    // Calculate the view projection matrix
    mvpMatrix.setPerspective(30, canvas.width / canvas.height, 1, 100);
    mvpMatrix.lookAt(6, 6, 14, 0, 0, 0, 0, 1, 0);
    mvpMatrix.multiply(modelMatrix);
    // Calculate the matrix to transform the normal based on the model matrix
    normalMatrix.setInverseOf(modelMatrix);
    normalMatrix.transpose();
 
    // Pass the model matrix to u_ModelMatrix
    gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);
 
    // Pass the model view projection matrix to u_mvpMatrix
    gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
 
    // Pass the transformation matrix for normals to u_NormalMatrix
    gl.uniformMatrix4fv(u_NormalMatrix, false, normalMatrix.elements);
 
    // Clear color and depth buffer
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
    // Draw the cube
    gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
}
 
function initVertexBuffers(gl)
{
    // Create a cube
    //    v6----- v5
    //   /|      /|
    //  v1------v0|
    //  | |     | |
    //  | |v7---|-|v4
    //  |/      |/
    //  v2------v3
    // Coordinates
    var vertices = new Float32Array([
       2.0, 2.0, 2.0, -2.0, 2.0, 2.0, -2.0, -2.0, 2.0, 2.0, -2.0, 2.0, // v0-v1-v2-v3 front
       2.0, 2.0, 2.0, 2.0, -2.0, 2.0, 2.0, -2.0, -2.0, 2.0, 2.0, -2.0, // v0-v3-v4-v5 right
       2.0, 2.0, 2.0, 2.0, 2.0, -2.0, -2.0, 2.0, -2.0, -2.0, 2.0, 2.0, // v0-v5-v6-v1 up
      -2.0, 2.0, 2.0, -2.0, 2.0, -2.0, -2.0, -2.0, -2.0, -2.0, -2.0, 2.0, // v1-v6-v7-v2 left
      -2.0, -2.0, -2.0, 2.0, -2.0, -2.0, 2.0, -2.0, 2.0, -2.0, -2.0, 2.0, // v7-v4-v3-v2 down
       2.0, -2.0, -2.0, -2.0, -2.0, -2.0, -2.0, 2.0, -2.0, 2.0, 2.0, -2.0  // v4-v7-v6-v5 back
    ]);
 
    // Colors
    var colors = new Float32Array([
      1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v0-v1-v2-v3 front
      1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v0-v3-v4-v5 right
      1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v0-v5-v6-v1 up
      1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v1-v6-v7-v2 left
      1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v7-v4-v3-v2 down
      1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0　    // v4-v7-v6-v5 back
    ]);
 
    // Normal
    var normals = new Float32Array([
      0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0,  // v0-v1-v2-v3 front
      1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0,  // v0-v3-v4-v5 right
      0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0,  // v0-v5-v6-v1 up
     -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0,  // v1-v6-v7-v2 left
      0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0,  // v7-v4-v3-v2 down
      0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0   // v4-v7-v6-v5 back
    ]);
 
    // Indices of the vertices
    var indices = new Uint8Array([
       0, 1, 2, 0, 2, 3,    // front
       4, 5, 6, 4, 6, 7,    // right
       8, 9, 10, 8, 10, 11,    // up
      12, 13, 14, 12, 14, 15,    // left
      16, 17, 18, 16, 18, 19,    // down
      20, 21, 22, 20, 22, 23     // back
    ]);
 
    // Write the vertex property to buffers (coordinates, colors and normals)
    if (!initArrayBuffer(gl, 'a_Position', vertices, 3)) return -1;
    if (!initArrayBuffer(gl, 'a_Color', colors, 3)) return -1;
    if (!initArrayBuffer(gl, 'a_Normal', normals, 3)) return -1;
 
    // Unbind the buffer object
    gl.bindBuffer(gl.ARRAY_BUFFER, null);
 
    // Write the indices to the buffer object
    var indexBuffer = gl.createBuffer();
    if (!indexBuffer)
    {
        console.log('Failed to create the buffer object');
        return false;
    }
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
 
    return indices.length;
}
 
function initArrayBuffer(gl, attribute, data, num)
{
    // Create a buffer object
    var buffer = gl.createBuffer();
    if (!buffer)
    {
        console.log('Failed to create the buffer object');
        return false;
    }
    // Write date into the buffer object
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
    // Assign the buffer object to the attribute variable
    var a_attribute = gl.getAttribLocation(gl.program, attribute);
    if (a_attribute < 0)
    {
        console.log('Failed to get the storage location of ' + attribute);
        return false;
    }
    gl.vertexAttribPointer(a_attribute, num, gl.FLOAT, false, 0, 0);
    // Enable the assignment of the buffer object to the attribute variable
    gl.enableVertexAttribArray(a_attribute);
 
    return true;
}

@egor2116 · 20.04.2017, 09:38 **[ТС]**

В математике всё откуда-нибудь да выводится.

Ну это очевидно. Матрицы преобразований которые я описал в коде уже подготовлены, я их не выводил, я не так долго собираюсь жить, для преобразований вершин фигуры, нужно умножать вектор(координата вершины) на матрицу, т.к. матрица 4х, а вектор 3х разрядный я убрал 4й столбец и 4ую строку из матрицы, т.к. если добавить в вектор 4й параметр и произвести вычисления которые не используються для определения в конце декартовых координат не имеет смысла(вот тут вопрос).
Может они участвуют в вычислениях дек. координат, а у меня неправильная формула ?
Еще подталкивает на это сомнение то, что в векторе наблюдения(е) первый параметр отвечающий поидее за поворот вокруг оси Х, участвует в расчете матрицы как раз в 4ой строке.

Добавлено через 4 минуты

вот так рисуется кубик

Ты наверное не понял, что у меня за вопрос.
Используя библиотеки нарисовать кубик не проблема, мне как раз нужно(в своем роде) и реализовать эту библиотеку.

@8Observer8 · 20.04.2017, 09:56

Сообщение от egor2116

Матрицы преобразований которые я описал в коде уже подготовлены, я их не выводил, я не так долго собираюсь жить,

Они выводятся в несколько строк на листочке, особенно матрица масштабирования. Самая сложнейшая - это матрица поворота. Для её вывода нужно найти учебник по геометрии за какой-то там класс и подсмотреть формулу (или погуглить):

Code
1
sin(a±b)=sin a cos b ± cos a sin b; cos(a±b)=cos a cosb ± sin a sin b

Вывод трёх матриц занимает минут 15 не больше, если знать как выводить. Я это проделывал на листоке раза три для всех трёх матриц: поворота, масштабирования и перемещения. Чего и вам желаю. Главное, найдите хорошую книгу по 3D графике для начинающих, рекомендую эту: WebGL. Программирование трехмерной графики

А всякий случай отмечу, то в тех примерах на JavaScript все операции с матрицами и другие вспомогательные функции находятся по ссылкам:

PHP/HTML
1
2
3
4
    <script src="https://dl.dropboxusercontent.com/s/ylw7v7a44xtrwv0/webgl-utils.js"></script>
    <script src="https://dl.dropboxusercontent.com/s/iz1n21c8xafd76n/webgl-debug.js"></script>
    <script src="https://dl.dropboxusercontent.com/s/subm1yzylxuao8v/cuon-utils.js"></script>
    <script src="https://dl.dropboxusercontent.com/s/jw3p82lq1cjwekg/cuon-matrix.js"></script>

Добавлено через 2 минуты

Сообщение от egor2116

Ты наверное не понял, что у меня за вопрос.
Используя библиотеки нарисовать кубик не проблема, мне как раз нужно(в своем роде) и реализовать эту библиотеку.

Там всё кодом сделано. Операции с матрицами в виде вспомогательных функций по этой ссылке: https://dl.dropboxusercontent.... -matrix.js

Добавлено через 10 минут

Сообщение от egor2116

Подскажите порядок преобразований для отрисовки фигуры.

Как я понимаю. У куба есть свои "объектные координаты", которые находятся в пространстве объекта. Мы можем создать матрицы преобразований, к примеру:
- одна матрица повернёт его на один угол вокруг какой-то оси
- вторая на другой, вокруг какого-то вектора
- третья матрица переместит на столько-то в таком-то направлении
- и т.д.

Все эти матрицы можно перемножить и получить результирующее преобразование. Такая матрица называется матрицей модели, она моделирует все проделанные преобразования. Её мы можем умножить на координаты вектор каждой вершины объекта (ModelMatrix * Position). Тогда мы переведём куб в пространство мировых координат.

Далее, мы можем создать матрицу вида хранит в себе свои преобразования (перемещение, вращение, масштабирование), которые преобразуют куб так, как мы зададим в lookAt. Мы её умножаем на предыдущий результат: ViewMatrix * ModelMatrix * Position. Так мы перевели позицию куба в мировых координатах в пространство камеры.

Потом мы можем задать плоскости отсечения, создав матрицу, которую умножаем на предыдущий результат: ProjectionMatrix ViewMatrix * ModelMatrix * Position. Тем самым мы переводим объект из пространства камеры в пространство с отсечением (в виде параллелепипеда - ortho, или пирамиды - perspective). Если это перспективная матрица, то координаты ещё испытают преобразование масштабирования. Эти преобразования зашиты в матрицу проекции. Она же проецирует 3D координаты объекта на 2D плоскость экрана. И она же получается переводит из пространства с отсечением в пространство проекции на 2D плоскость экрана.

@vxg · 20.04.2017, 10:30

Сообщение от egor2116

Матрицы преобразований которые я описал в коде уже подготовлены, я их не выводил

тогда у вас три пути - пытаться понять откуда и как они взялись, сделать заново, использовать готовую математику

Добавлено через 2 минуты
..на самом деле вращения перенос и проецирование физически реально осознать головой и карандашом

@8Observer8 · 20.04.2017, 11:23

egor2116, наиболее полная книга по компьютерной графике, 1264 страницы: Computer Graphics: Principles and Practice (3rd Edition)

@Igor3D · 20.04.2017, 12:53

Сообщение от egor2116

О, первый вопрос, почему матрицы 4х разрядные, у нас же координаты вершин фигуры 3х(x,y,z), зачем нужна четвертая координата, она нигде в расчетах не участвует ?

Ну "разрядные" звучит не очень удачно, это ведь 4 числа (а не 4 бита). По поводу мифической 4-й координаты w - сам в прошлом году разбирался

Дело в том что для перевода из 3D в пиксели нужно перспективное преобразование. Формула его простая

C++
1
2
x_pixel = x_3d * focal / z_3d;  // focal - константа 
y_pixel = y_3d * focal / z_3d;

Но беда в том что оно НЕ матричное и НЕ линейное. Напр равные отрезки не будут отображаться в равные. С точки зрения математики термин "перспективная матрица" - чушь собачья

Поэтому его и не применяют, а делитель таскают с собой. Примерный сценарий (самый простой, но его обычно и достаточно)

- задали какие-то исходные координаты с w = 1
- что-то с ними делаем, применяем матрицы, w не трогаем
- наконец применили "перспективную" матрицу проекции - в результате нужный делитель попал в w (тут он уже != 1)
- теперь просто делим на w, переходим от однородных к декартовым, получаем пиксели. НО! начиная с этого момента никакие матрицы мы уже применять не можем. Ну обычно самому на w делить и не нужно, это сделает сам рендер

Сообщение от vxg

..должен знать зачем нужна четвертая координата. я думаю. я читал вот это "компьютерная графика шикин боресков"

Ну что ж Вы так давите мальца авторитетом (должен знать и все такое)

Добавлено через 7 минут

Сообщение от 8Observer8

Далее, мы можем создать матрицу вида хранит в себе свои преобразования (перемещение, вращение, масштабирование), которые преобразуют куб так, как мы зададим в lookAt. Мы её умножаем на предыдущий результат: ViewMatrix * ModelMatrix * Position. Так мы перевели позицию куба в мировых координатах в пространство камеры.

Ну не совсем так. Если интересно - расскажу подробнее, пока пусть однородные переварит

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

Отрисовка 3Д фигур

Решение

Решение

@egor2116 584 / 387 / 216 Регистрация: 20.01.2013 Сообщений: 1,169

	Отрисовка 3Д фигур 19.04.2017, 15:32. Показов 4122. Ответов 13 Метки нет (Все метки) Добрый день! Есть сложность в программирование 3Д фигуры(куб). Подскажите порядок преобразований для отрисовки фигуры. В данный момент использую такой: 1. Рисую куб в 2Д в мировых координатах(ресую один квадрат, затем другой и соединяю их вершины) 2. С помощью матрицы преобразований перевожу координаты вершин куба в видовые координаты 3. С помощью матрицы(ортографической) преобразований перевожу координаты вершин куба(они уже видовые) в координаты проекции 4. Преобразовую в декартовы координаты Вопрос не связан с OpenGL или конкретным языком, подумал тут есть люди разбирающиеся в координатной геометрии. 0

@vxg Модератор 3406 / 2177 / 354 Регистрация: 13.01.2012 Сообщений: 8,444
	19.04.2017, 15:43
	egor2116, обычно так: -есть вектор в однородных координатах (координаты вершины) -есть матрица в однородных координатах задающая преобразование полученная перемножением в требуемой очередности нужных матриц поворота, переноса, отражения, масштабирования и проецирования -умножая их получаем преобразованный вектор который переводится в растр по заданным правилам обычно путем приведения двух из четырех координат вектора к координатам окна на экране 1

@egor2116 584 / 387 / 216 Регистрация: 20.01.2013 Сообщений: 1,169
	19.04.2017, 15:48 [ТС]
	О, первый вопрос, почему матрицы 4х разрядные, у нас же координаты вершин фигуры 3х(x,y,z), зачем нужна четвертая координата, она нигде в расчетах не участвует ? 0

@vxg Модератор 3406 / 2177 / 354 Регистрация: 13.01.2012 Сообщений: 8,444
	19.04.2017, 15:57
	egor2116, человек взывающий к людям разбирающимся в координатной геометрии должен знать зачем нужна четвертая координата. я думаю. я читал вот это "компьютерная графика шикин боресков" 1

@vxg Модератор 3406 / 2177 / 354 Регистрация: 13.01.2012 Сообщений: 8,444
	19.04.2017, 16:13
	Сообщение было отмечено egor2116 как решение Решение egor2116, смысл в том что есть определённые математические приемы. Если вы изобрели их повторно что в принципе несложно для простейших случаев но что-то пошло не так давайте рассмотрим ваши выкладки 0

@8Observer8 9036 / 2937 / 493 Регистрация: 05.10.2013 Сообщений: 7,960 Записей в блоге: 216
	20.04.2017, 11:23
	egor2116, наиболее полная книга по компьютерной графике, 1264 страницы: Computer Graphics: Principles and Practice (3rd Edition) 1