Resolve View constructor issues

examples/fps/main.ts

@@ -16,30 +16,71 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 
 const {
 	doc, Image: Img, gl, glfw,
-} = init({
-	isGles3: true,
-	isWebGL2: true,
-});
+} = init({ isGles3: true, isWebGL2: true });
 
 addThreeHelpers(three, gl);
 
 doc.setPointerCapture();
 
-const { QmlOverlay, Property, loop, release } = initQml({ doc, gl, cwd: __dirname, three });
+const {
+    QmlOverlay, Property, View, loop, release, textureFromId,
+} = initQml({ doc, gl, cwd: __dirname, three });
 
 const icon = new Img(__dirname + '/../qml.png');
 icon.on('load', () => { doc.icon = icon; });
 doc.title = 'QML FPS';
 
+type THudState = 'hud' | 'esc';
+let hudState: THudState = 'hud';
+let gameScore: number = 0;
+
 const clock = new three.Clock();
 
+const renderer = new three.WebGLRenderer({ antialias: true });
+renderer.setPixelRatio(window.devicePixelRatio);
+renderer.setSize(doc.w, doc.h);
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = three.VSMShadowMap;
+renderer.toneMapping = three.ACESFilmicToneMapping;
+
 const scene = new three.Scene();
 scene.background = new three.Color(0x88ccee);
 scene.fog = new three.Fog(0x88ccee, 0, 50);
 
 const overlay = new QmlOverlay({ file: `${__dirname}/qml/Hud.qml` });
 scene.add(overlay.mesh);
 
+const scoreView = new View({ file: `${__dirname}/qml/Score.qml` });
+
+const materialScore = new three.SpriteMaterial();
+materialScore.map = textureFromId(scoreView.textureId, renderer);
+scoreView.on('reset', (textureId) => {
+    release();
+    materialScore.map = textureFromId(textureId, renderer);
+});
+
+const spriteScore = new three.Sprite(materialScore);
+spriteScore.position.set(0, 5, 0);
+spriteScore.scale.set(5, 5, 1);
+scene.add(spriteScore);
+
+const propScore = new Property<number>({
+    view: scoreView, name: 'score', key: 'score', value: gameScore,
+});
+
+setInterval(
+    () => {
+        gameScore++;
+        propScore.value = gameScore;
+    },
+    1000,
+);
+
+
+const propHudMode = new Property<THudState>({
+    view: overlay, name: 'hud', key: 'mode', value: hudState,
+});
+
 overlay.on('custom-esc', (event) => {
     release();
     if (event.button === 'resume') {
@@ -52,13 +93,6 @@ overlay.on('custom-esc', (event) => {
     }
 });
 
-type THudState = 'hud' | 'esc';
-let hudState: THudState = 'hud';
-
-const propHudMode = new Property<THudState>({
-    view: overlay, name: 'hud', key: 'mode', value: hudState,
-});
-
 const camera = new three.PerspectiveCamera(95, doc.w / doc.h, 0.1, 1000);
 camera.rotation.order = 'YXZ';
 
@@ -81,13 +115,6 @@ directionalLight.shadow.radius = 4;
 directionalLight.shadow.bias = -0.00006;
 scene.add(directionalLight);
 
-const renderer = new three.WebGLRenderer({ antialias: true });
-renderer.setPixelRatio(window.devicePixelRatio);
-renderer.setSize(doc.w, doc.h);
-renderer.shadowMap.enabled = true;
-renderer.shadowMap.type = three.VSMShadowMap;
-renderer.toneMapping = three.ACESFilmicToneMapping;
-
 const GRAVITY = 30;
 const NUM_SPHERES = 100;
 const SPHERE_RADIUS = 0.2;

examples/fps/qml/EscMenu.qml

@@ -10,13 +10,13 @@ Rectangle {
 		anchors.centerIn: parent
 		spacing: 32
 
-		EscMenuItem {
+		MenuItem {
 			text: 'Resume'
 			Layout.alignment: Qt.AlignCenter
 			onPressed: eventEmit('custom-esc', { button: 'resume' });
 		}
 
-		EscMenuItem {
+		MenuItem {
 			text: 'Quit'
 			Layout.alignment: Qt.AlignCenter
 			onPressed: eventEmit('custom-esc', { button: 'quit' });

examples/fps/qml/Hud.qml

@@ -4,7 +4,6 @@ import QtQuick.Layouts 1.3
 
 Item {
 	objectName: 'hud'
-
 	anchors.fill: parent
 
 	FontLoader { id: future; source: 'fonts/Kenney Future Narrow.ttf' }

examples/fps/qml/Score.qml

@@ -0,0 +1,48 @@
+import QtQuick 2.7
+import QtQuick.Layouts 1.3
+
+
+Item {
+	readonly property int fontSizeTitle: 84
+	readonly property int fontSizeValue: 110
+	readonly property string shadowColor: '#222222'
+
+	id: root
+	objectName: 'score'
+	anchors.fill: parent
+
+	property real score: 0
+
+	FontLoader { id: future; source: 'fonts/Kenney Future Narrow.ttf' }
+	FontLoader { id: bookxel; source: 'fonts/Bookxel.otf' }
+
+	ColumnLayout {
+		anchors.centerIn: parent
+
+		Text {
+			text: 'SCORE'
+			Layout.alignment: Qt.AlignCenter
+
+			font.pixelSize: fontSizeTitle
+			font.bold: true
+			font.family: future.name
+			color: '#FAFACC'
+
+			style: Text.Outline
+			styleColor: root.shadowColor
+		}
+
+		Text {
+			text: root.score
+			Layout.alignment: Qt.AlignCenter
+
+			font.pixelSize: fontSizeValue
+			font.bold: true
+			font.family: bookxel.name
+			color: 'white'
+
+			style: Text.Outline
+			styleColor: root.shadowColor
+		}
+	}
+}

examples/fps/qml/_preview.pro

@@ -30,8 +30,9 @@ else: unix:!android: target.path = /opt/$${TARGET}/bin
 
 DISTFILES += \
     EscMenu.qml \
-    EscMenuItem.qml \
     Hud.qml \
     HudTextSmall.qml \
     HudView.qml \
+    MenuItem.qml \
+    Score.qml \
     _preview.qml

examples/fps/qml/_preview.qml

@@ -14,18 +14,18 @@ Window {
 	}
 
 	Image {
-		id: image
 		anchors.fill: parent
 		source: "_preview.png"
 		fillMode: Image.Stretch
 	}
 
 	Hud {
-		id: hud
-		x: 243
-		y: 19
 		mode: "hud"
 	}
+
+	Score {
+		score: 123
+	}
 }
 
 

index.d.ts

@@ -2,41 +2,36 @@ declare module "3d-qml-raub" {
 	type TQml = typeof import('qml-raub');
 	type TThree = typeof import('three');
 	type TWebgl = typeof import('webgl-raub');
-	type RawShaderMaterial = typeof import('three').RawShaderMaterial;
+	type ShaderMaterial = typeof import('three').ShaderMaterial;
+	type WebGLRenderer = typeof import('three').WebGLRenderer;
+	type Texture = typeof import('three').Texture;
 	type Mesh = typeof import('three').Mesh;
 	type TOptsView = import('qml-raub').TOptsView;
 	type View = typeof import('qml-raub').View;
 	type Document = import('glfw-raub').Document;
-	type WebGLTexture = typeof import('webgl-raub').WebGLTexture;
-
-	type TUnknownObject = Readonly<{ [id: string]: unknown }>;
 
 	type TLoop = (cb: (i: number) => void) => void;
 
-	type RawShaderMaterialInstance = InstanceType<RawShaderMaterial>;
-	type OptsMaterialInstance = ConstructorParameters<RawShaderMaterial>[0];
+	type WebGLRendererInstance = InstanceType<WebGLRenderer>;
+	type TextureInstance = InstanceType<Texture>;
+	type ShaderMaterialInstance = InstanceType<ShaderMaterial>;
+	type OptsMaterialInstance = ConstructorParameters<ShaderMaterial>[0];
 
-	type TOpt<T, P extends string> = T extends { [id: string]: unknown } ? T[P] : undefined;
+	type TMaterialInstance = ShaderMaterialInstance & {
+		/**
+		 * QML Texture ID.
+		*/
+		textureId: number | null;
+	};
 
-	type TOptsQmlOverlayMaterial = Readonly<Partial<{
-		side: TOpt<OptsMaterialInstance, 'side'>;
-		uniforms: TOpt<OptsMaterialInstance, 'uniforms'>;
-		depthWrite: TOpt<OptsMaterialInstance, 'depthWrite'>;
-		depthTest: TOpt<OptsMaterialInstance, 'depthTest'>;
-		transparent: TOpt<OptsMaterialInstance, 'transparent'>;
-		lights: TOpt<OptsMaterialInstance, 'lights'>;
-		vertexShader: TOpt<OptsMaterialInstance, 'vertexShader'>;
-		fragmentShader: TOpt<OptsMaterialInstance, 'fragmentShader'>;
-		glslVersion: TOpt<OptsMaterialInstance, 'glslVersion'>;
-	}>>;
+	interface TNewableQmlMaterial extends ShaderMaterial {
+		new(opts: OptsMaterialInstance): TMaterialInstance;
+
+	}
 
-	interface TNewableQmlOverlayMaterial extends RawShaderMaterial {
-		new(opts: TOptsQmlOverlayMaterial): TNewableQmlOverlayMaterial;
+	interface TNewableQmlOverlayMaterial extends TNewableQmlMaterial {
+		new(opts: OptsMaterialInstance): TMaterialInstance;
 
-		/**
-		 * QML Texture for fullscreen rendering.
-		*/
-		texture: WebGLTexture;
 	}
 
 	type TViewInstance = InstanceType<View>;
@@ -80,6 +75,14 @@ declare module "3d-qml-raub" {
 		 */
 		release: () => void;
 
+		/**
+		 * Create a `THREE.Texture` from a raw OpenGL resource ID.
+		 * 
+		 * Wraps ID into a `WebGLTexture` and then wraps that into a `THREE.Texture`.
+		 * Some special hacks provide that the THREE's texture lookup works properly.
+		 */
+		textureFromId: (id: number | null, renderer: WebGLRendererInstance) => TextureInstance;
+
 		/**
 		 * Adjusted frame-loop helper, calls `release` automatically.
 		 */
@@ -92,6 +95,13 @@ declare module "3d-qml-raub" {
 		*/
 		QmlOverlay: TNewableQmlOverlay,
 
+		/**
+		 * QML basic material.
+		 * 
+		 * Basic unlit material with a QML texture on it.
+		*/
+		QmlMaterial: TNewableQmlMaterial,
+
 		/**
 		 * Fullscreen QML overlay material.
 		 * 

js/index.js

@@ -56,7 +56,7 @@ const _init = (opts = {}) => {
 
 	return {
 		View, Property, Method,
-		release, loop,
+		release, loop, textureFromId,
 		QmlMaterial, QmlOverlayMaterial, QmlOverlay,
 	};
 };

js/qml-overlay.js

@@ -30,15 +30,15 @@ const _init = ({ doc, three }) => {
 
 			super(optsFinal);
 
+			release();
+
 			this._isVisible = true;
 			this._isDisabled = false;
 			this._mat = new QmlOverlayMaterial();
 			this._mesh = new three.Mesh(new three.PlaneGeometry(2, 2), this._mat);
 			this._mesh.frustumCulled = false;
 			this._mesh.renderOrder = Infinity;
 
-			release();
-
 			doc.on('resize', ({ width, height }) => { this.wh = [width, height]; });
 
 			this._mat.textureId = this.textureId;