Похожая функция drawTriangles(flash) в html5?

@Katerina1993 · Регистрация: 17.01.2017

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

Мне нужно перевести код Flash в html5, не знаю какая альтернативная функция drawTriangles, есть в html5. Вот функция flash.

ActionScript 3
1
2
graphics.drawTriangles(Vector.<Number>([0, 0, width1, 0, 0, height1]),// вектор вершин расположение по x и y
                       Vector.<int>([0, 2, 1])); // вектор с индексами этих вершин

Первый параметр это координаты вершин. Второй параметр индекс этих вершин [0,2,1]. Каждое значение индекса ссылается на вектор по x и y, например
0-индекс ссылается на точку (0,0).
2 – ссылается на точку (0,height1)
1 – на точку (width1,0), таким образом из общей картинки отображается только часть, в нашем случае треугольник.

Похожая функция drawTriangles(flash) в html5?

Как перевести код flash на html5, альтернатива drawTriangles(flash)?

Полностью код на flash.

ActionScript 3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
package
{
  import flash.display.Sprite;
  import flash.display.BitmapData;
  import flash.display.Bitmap;
  public class Main extends Sprite
  {
        var archer1:BitmapData = new archer(0, 0);
        var width1:int = 350;
        var height1:int = 200;
 
        public function Main():void
        {
            var bitmap:Bitmap = new Bitmap(archer1);
            
            graphics.beginBitmapFill(bitmap.bitmapData)
            graphics.lineStyle(1, 0x999999);
            
            
            graphics.drawTriangles(Vector.<Number>([0, 0, width1, 0, 0, height1]),// вектор вершин расположение по x и y
                       Vector.<int>([0, 2, 1])); // вектор с индексами этих вершин
        }
  }
}

@8Observer8 · 01.07.2025, 19:05

Простой треугольник без трансформаций. Для трансформаций можно использовать glMatrix, как в примере: https://plnkr.co/edit/qT6ZTwvncLPRamK5?preview

На русском:

На английском:

Исходники примера:

Запись в блоге

@8Observer8 · 17.01.2026, 18:52

Треугольник на WebGPU

Следующий пример выводит вращающийся треугольник на WebGPU. Для математики (для операций с матрицами и векторами) используется используется библиотека "wgpu-matrix" (https://www.jsdelivr.com/package/npm/wgpu-matrix), которая подключается так:

PHP/HTML
1
2
3
4
5
6
7
    <script type="importmap">
        {
            "imports": {
                "wgpu-matrix": "https://cdn.jsdelivr.net/npm/wgpu-matrix@3.4.0/dist/3.x/wgpu-matrix.module.min.js"
            }
        }
    </script>

Демка в песочнице Plunker: https://plnkr.co/edit/vyUslXljinKg4nJJ (эта песочница открывается с помощью VPN)

Название: webgpu-transform-js.gif
Просмотров: 48

Размер: 282.3 Кб

Название: webgpu-transform-js.gif
Просмотров: 48

Размер: 282.3 Кб

Полный код примера в одной файле 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
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
<!DOCTYPE html>
<html lang="ru">
 
<head>
    <meta charset="UTF-8">
    <title>WebGPU + wgpu-matrix: Transform</title>
    <style>
        body {
            margin: 0;
            background: #1a1a1a;
            overflow: hidden;
        }
 
        canvas {
            width: 100vw;
            height: 100vh;
            display: block;
        }
    </style>
</head>
 
<body>
    <canvas id="gpuCanvas"></canvas>
 
    <!-- Подключаем wgpu-matrix из CDN -->
    <script type="importmap">
        {
            "imports": {
                "wgpu-matrix": "https://cdn.jsdelivr.net/npm/wgpu-matrix@3.4.0/dist/3.x/wgpu-matrix.module.min.js"
            }
        }
    </script>
 
    <script type="module">
        import { mat4 } from 'wgpu-matrix';
 
        async function init() {
            if (!navigator.gpu) return alert("WebGPU не поддерживается");
 
            const adapter = await navigator.gpu.requestAdapter();
            const device = await adapter.requestDevice();
            const canvas = document.getElementById('gpuCanvas');
            const context = canvas.getContext('webgpu');
            const format = navigator.gpu.getPreferredCanvasFormat();
 
            const devicePixelRatio = window.devicePixelRatio || 1;
            canvas.width = canvas.clientWidth * devicePixelRatio;
            canvas.height = canvas.clientHeight * devicePixelRatio;
 
            context.configure({
                device: device,
                format: format,
                alphaMode: 'premultiplied'
            });
 
            context.configure({ device, format });
 
            // Шейдер: принимает матрицу (uniform) и умножает на неё позицию
            const shaderModule = device.createShaderModule({
                code: `
                    struct Uniforms { matrix: mat4x4<f32> };
                    @group(0) @binding(0) var<uniform> uni: Uniforms;
 
                    @vertex
                    fn vs_main(@location(0) pos: vec2<f32>) -> @builtin(position) vec4<f32> {
                        return uni.matrix * vec4<f32>(pos, 0.0, 1.0);
                    }
 
                    @fragment
                    fn fs_main() -> @location(0) vec4<f32> {
                        return vec4<f32>(1.0, 0.5, 0.0, 1.0); // Оранжевый цвет
                    }
                `
            });
 
            // Данные треугольника (в локальных координатах, центр в 0,0)
            const vertices = new Float32Array([
                0.0, 0.5,
                -0.5, -0.5,
                0.5, -0.5,
            ]);
            const vertexBuffer = device.createBuffer({
                size: vertices.byteLength,
                usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
                mappedAtCreation: true
            });
            new Float32Array(vertexBuffer.getMappedRange()).set(vertices);
            vertexBuffer.unmap();
 
            // Буфер для матрицы (mat4x4 = 16 float = 64 байта)
            const uniformBuffer = device.createBuffer({
                size: 64,
                usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
            });
 
            const pipeline = device.createRenderPipeline({
                layout: 'auto',
                vertex: {
                    module: shaderModule,
                    entryPoint: 'vs_main',
                    buffers: [{
                        arrayStride: 8,
                        attributes: [{ shaderLocation: 0, offset: 0, format: 'float32x2' }]
                    }]
                },
                fragment: {
                    module: shaderModule,
                    entryPoint: 'fs_main',
                    targets: [{ format }]
                },
                primitive: { topology: 'triangle-list' }
            });
 
            const bindGroup = device.createBindGroup({
                layout: pipeline.getBindGroupLayout(0),
                entries: [{ binding: 0, resource: { buffer: uniformBuffer } }]
            });
 
            function render(time) {
                const now = time * 0.001; // время в секундах
 
                // --- МАТЕМАТИКА ТРАНСФОРМАЦИИ ---
                const projection = mat4.ortho(0, canvas.clientWidth, canvas.clientHeight, 0, -1, 1);
                const model = mat4.identity();
 
                // 1. Позиция (Translate): в центр экрана
                mat4.translate(model, [canvas.clientWidth / 2, canvas.clientHeight / 2, 0], model);
 
                // 2. Поворот (Rotate): вокруг оси Z
                mat4.rotateZ(model, now, model);
 
                // 3. Размер (Scale): увеличиваем в 200 раз (так как исходный треугольник 0.5 пикселя)
                mat4.scale(model, [200, 200, 1], model);
 
                // Итоговая матрица = Проекция * Модель
                const mvp = mat4.multiply(projection, model);
 
                // Копируем матрицу в GPU
                device.queue.writeBuffer(uniformBuffer, 0, mvp);
 
                const commandEncoder = device.createCommandEncoder();
                const pass = commandEncoder.beginRenderPass({
                    colorAttachments: [{
                        view: context.getCurrentTexture().createView(),
                        clearValue: { r: 0.1, g: 0.1, b: 0.1, a: 1 },
                        loadOp: 'clear',
                        storeOp: 'store'
                    }]
                });
                pass.setPipeline(pipeline);
                pass.setBindGroup(0, bindGroup);
                pass.setVertexBuffer(0, vertexBuffer);
                pass.draw(3);
                pass.end();
 
                device.queue.submit([commandEncoder.finish()]);
                requestAnimationFrame(render);
            }
 
            requestAnimationFrame(render);
        }
 
        init();
    </script>
</body>
 
</html>

Размер файла index.html всего 7 КБайт (прикрепил к сообщению). Запускается двойным кликом на Window 10. Должно работать по двойному клику на Linux и macOS. Правда, это размер без учёта библиотеки wgpu-matrix@3.4.0. Файл wgpu-matrix.module.min.js весит 38.1 КБайт, но этот файл при первом запуске приложения сохраняется в кэш браузера. Прикрепил библиотеку wgpu-matrix@3.4.0 в архиве.

С помощью математической библиотеки "wgpu-matrix" создаётся матрица ортогональной проекции, которая задаёт размеры полю вывода графики (матрица projection). Далее создаются матрицы: позиции, поворота и размера треугольника. Создаётся общая матрица (mvp), которая копируется в GPU:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// --- МАТЕМАТИКА ТРАНСФОРМАЦИИ ---
const projection = mat4.ortho(0, canvas.clientWidth, canvas.clientHeight, 0, -1, 1);
const model = mat4.identity();
 
// 1. Позиция (Translate): в центр экрана
mat4.translate(model, [canvas.clientWidth / 2, canvas.clientHeight / 2, 0], model);
 
// 2. Поворот (Rotate): вокруг оси Z
mat4.rotateZ(model, now, model);
 
// 3. Размер (Scale): увеличиваем в 200 раз (так как исходный треугольник 0.5 пикселя)
mat4.scale(model, [200, 200, 1], model);
 
// Итоговая матрица = Проекция * Модель
const mvp = mat4.multiply(projection, model);
 
// Копируем матрицу в GPU
device.queue.writeBuffer(uniformBuffer, 0, mvp);

Информация от Gemini 3:

WebGPU - это стандарт графики для браузеров, Desktop, Android и т.д. WebGPU активно используется как легкая и безопасная альтернатива сложным API вроде Vulkan или DirectX 12 для обычных компьютерных программ. Идея создания нового графического стандарта для веба была впервые предложена командой Apple WebKit в 2017 году. Несмотря на приставку «Web», WebGPU в 2026 году является универсальным кроссплатформенным стандартом, который работает далеко за пределами браузеров. В отличие от WebGL, который базировался на OpenGL, WebGPU разрабатывался «с чистого листа», чтобы эффективно работать с современными системными API: Vulkan (Khronos), Direct3D 12 (Microsoft) и Metal (Apple).

HTML5-элемент <canvas> кроме графики "2d", "webgl", "webgl2", позволяет ещё выводить графику на "webgpu". В функцию getContext нужно передать "webgpu" следующим образом:

JavaScript
1
const context = canvas.getContext('webgpu');

Новые блоги и статьи Все статьи Все блоги /
Благородство как наказание Maks 24.04.2026 У хорошего человека отношения с женщинами всегда складываются трудно. А я человек хороший. Заявляю без тени смущения, потому что гордиться тут нечем. От хорошего человека ждут соответствующего. . .	Валидация и контроль данных табличной части документа перед записью Maks 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .	Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .
Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .	Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .

Опции темы