Форум программистов, компьютерный форум, киберфорум
Наши страницы
TypeScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
gdrfd
2 / 2 / 0
Регистрация: 30.01.2017
Сообщений: 15
#1

Литература по webGL на TS

02.03.2017, 11:22. Просмотров 850. Ответов 4
Метки нет (Все метки)

Доброго времени суток, скоро предстоит написание проекта с использованием webGL на TypeScript. Что посоветуете почитать максимально близкое к данной теме?

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

0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
02.03.2017, 11:22
Ответы с готовыми решениями:

WebGL
Подскажите, как можно пустить объект вдоль определенной линии, например землю...

Матрицы и webgl
Здравствуйте, уважаемые программисты! Помогите разобраться с матрицами( как их...

фотогалерея WebGL
Подскажите пожалуйста! Проблема такая: создаю фото галерею в WebGL в виде...

фрэймворк WebGL
В блоге Sencha 22 февраля был представлен новый фрэймворк под названием...

WEBGL и Blender
Подскажите пожалуйста, как из Blender'а экспортировать массив вершин и...

4
8Observer8
2069 / 1362 / 224
Регистрация: 05.10.2013
Сообщений: 4,287
Записей в блоге: 56
05.03.2017, 12:29 #2
Лучший ответ Сообщение было отмечено gdrfd как решение

Решение

Если ещё не изучаете эту книгу, то вот: WebGL. Программирование трехмерной графики

TypeScript и JavaScript очень тесно связаны, в том плане, что нужны хорошие знания JavaScript. Так что поизучайте пока отдельно WebGL+JS и отдельно TS и делайте попытки их объединять.

Я пока не пробовал TS с WebGL. Знаю, что графический движок BabylonJS очень хорошо работает c TS, я сам пробовал. Скорее всего, ThreeJS тоже.
1
gdrfd
2 / 2 / 0
Регистрация: 30.01.2017
Сообщений: 15
05.03.2017, 17:29  [ТС] #3
Спасибо, за крайне годный материал, до этого находил только небольшие статьи и уроки адаптированные с openGL.
1
8Observer8
2069 / 1362 / 224
Регистрация: 05.10.2013
Сообщений: 4,287
Записей в блоге: 56
21.04.2017, 15:28 #4
Вам удалось найти что-нибудь интересное?

Я нашёл выступление Андерса Хейлсберга (создателя TypeScript, C#, Turbo Pascal и Delphi) Anders Hejlsberg: Introducing TypeScript
0
8Observer8
2069 / 1362 / 224
Регистрация: 05.10.2013
Сообщений: 4,287
Записей в блоге: 56
27.04.2018, 19:17 #5

Не по теме:

Эту тему забыли перенести в раздел TypeScript: http://www.cyberforum.ru/typescript/



Больше года прошло. Литературы по WebGL, где примеры на TS, по-моему, точно нет. Туторов не находил.

Много книг по WebGL на JS. Просто нужно переводить примеры на TS. Это несложно, если изучаешь TS.

Вдруг кто-то набредёт на эту тему, оставлю здесь полезную информацию для старта TS + WebGL.

В песочнице Plunker есть поддержка TS и tsconfig.json. Можно выкладывать исходники примеров, тут же их запускать, делать Fork, менять, сохранять, делиться ссылками с друзьями. Чтобы разбить TS файлы на модули в Plunker'е, можно использовать Require.js (компиляцию в AMD)

Мой пример в ООП стиле на TS, который рисует треугольник на WebGL: https://plnkr.co/edit/PkqSZGwhv9zKSnUNSiXo?p=preview

Код из песочницы:

index.html
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
    <title>Triangle in TypeScript and WebGL</title>
 
    <link rel="stylesheet" href="./style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js" data-main="./RequireConfig.js"></script>
</head>
 
<body>
    <canvas id="renderCanvas" width="250" height="250"></canvas>
</body>
 
</html>
Program.ts
Javascript
1
2
3
4
5
6
7
8
9
import { Scene } from "./Scene";
 
export class Program {
    public static main() {
        let scene = new Scene("renderCanvas");
    }
}
 
Program.main();
Scene.ts
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
import { Triangle } from "./Triangle";
import { ShaderProgram } from "./ShaderProgram";
 
export class Scene {
    private triangle: Triangle;
    private gl: WebGLRenderingContext;
 
    public constructor(canvasID: string) {
 
        // Get reference to canvas element
        let canvas = <HTMLCanvasElement>document.getElementById(canvasID);
        if (canvas === null) {
            console.log("Failed to get canvas element, canvasID = " + canvasID);
            return;
        }
 
        // Get WebGL context
        this.gl = canvas.getContext("webgl");
 
        let shaderProgram = new ShaderProgram(this.gl);
        this.triangle = new Triangle(this.gl, shaderProgram.program);
 
        console.log("Scene was created");
        this.Draw();
    }
 
    private Draw(): void {
        this.gl.clear(this.gl.COLOR_BUFFER_BIT)
        this.triangle.Draw();
    }
}
ShaderProgram.ts
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
export class ShaderProgram {
    public program: WebGLProgram;
 
    public constructor(private gl: WebGLRenderingContext) {
        let vertexShaderSource =
            `attribute vec2 a_Position;
            
            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
            }`;
 
        let fragmentShaderSource =
            `void main()
            {
                gl_FragColor = vec4(0.4, 0.7, 0.4, 1.0);
            }`;
 
        let vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);
 
        let fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);
 
        this.program = gl.createProgram();
        gl.attachShader(this.program, vShader);
        gl.attachShader(this.program, fShader);
        gl.linkProgram(this.program);
        gl.useProgram(this.program);
    }
}
Triangle.ts
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
export class Triangle {
    private gl: WebGLRenderingContext;
    private program: WebGLProgram;
    private points: number[];
 
    public constructor(gl: WebGLRenderingContext, shaderProgram: WebGLProgram) {
        console.log("Triangle was created");
        this.gl = gl;
        this.program = shaderProgram;
        this.points = [
            0.0, 0.7,   // First point
            -0.7, -0.7, // Second point
            0.7, -0.7   // Third point
        ];
 
        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.points), gl.STATIC_DRAW);
 
        var a_Position = gl.getAttribLocation(this.program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);
    }
 
    public Draw(): void {
        console.log("Triangle was drawn");
        this.gl.drawArrays(this.gl.TRIANGLES, 0, this.points.length / 2);
    }
}
RequireConfig.ts

Javascript
1
2
3
require(['Program'], (Program) => {
 
});
tsconfig.json
JSON
1
2
3
4
5
6
7
8
{
    "compilerOptions": {
        "module": "amd",
        "target": "es5",
        "sourceMap": false,
        "noImplicitAny": false
    }
}
0
27.04.2018, 19:17
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
27.04.2018, 19:17

Alpha blending в webgl
Здравствуйте, программисты. Есть проблема с прозрачностью объектов в webgl....

Оптимизировать WebGL useProgram
Я оптимизировал в WebGL уже все что мог, у меня динамические объекты,...

Мощная презентация WebGL
Разработчики Blend4Web одновременно с релизом опубликовали новую, крутую...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru