Похожая функция 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
Просмотров: 45

Размер: 282.3 Кб

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

Размер: 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');

Новые блоги и статьи Все статьи Все блоги /
Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .
Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .	Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .