Merge pull request #9 from wowserhq/feature/rendering

Feature: Preliminary rendering

.eslintrc

@@ -8,6 +8,7 @@
   "rules": {
     "camelcase": "off",
     "import/order": ["error"],
+    "no-console": "off",
     "no-unused-vars": ["error", {
       "argsIgnorePattern": "^_",
       "varsIgnorePattern": "^_"

.gitignore

@@ -1,2 +1,4 @@
 /node_modules/
-/public/
+/public/*
+!/public/Shaders
+!/public/Wowser

README.md

@@ -1,8 +1,88 @@
 # Wowser Client
 
-[![Join chat](https://img.shields.io/badge/gitter-join_chat-blue.svg?style=flat)](https://gitter.im/wowserhq/wowser)
-[![Build Status](https://travis-ci.org/wowserhq/ui.svg?branch=master)](https://travis-ci.org/wowserhq/client)
+![Node Version](https://badgen.net/badge/node/12+/green)
+[![MIT License](https://badgen.net/github/license/wowserhq/client)](LICENSE.md)
+![Checks](https://badgen.net/github/checks/wowserhq/client)
+[![Join chat](https://badgen.net/badge/gitter/join%20chat/red)](https://gitter.im/wowserhq/wowser)
 
-Web client for Wowser.
+World of Warcraft in the browser using JavaScript and WebGL.
+
+This repository contains the web client.
 
 Licensed under the [**MIT** license](LICENSE).
+
+## Background
+
+Wowser is a proof-of-concept of getting a triple-A game to run in a webbrowser.
+
+See the [Wowser] umbrella repository for more information.
+
+## Status
+
+This repository contains the Wowser web client, which currently has support for:
+
+- Loading Blizzard UI files (`.toc`, `.xml` and `.lua`)
+- Extremely primitive scene rendering using WebGL 2 (frames and textures mostly)
+- GLSL ES 300 shaders and PNG textures (no BLP support yet)
+
+**Note:** Only Wrath of the Lich King (3.3.5a) is currently supported. A copy of
+the official client is required.
+
+## Development
+
+Wowser is written in [ES2015+], modularized using [ECMAScript modules] and
+developed with [webpack].
+
+1. Clone the repository:
+
+   ```shell
+   git clone git://github.com/wowserhq/wowser.git
+   ```
+
+2. Download and install [Node.js] – including `npm` – for your platform.
+
+3. Install dependencies:
+
+   ```shell
+   npm install
+   ```
+
+4. Extract interface files from the official Wrath of the Lich King client into
+   the `public` folder, resulting in the following structure:
+
+   ```
+   public
+     ├── Interface
+     ├── Shaders
+     └── Wowser
+   ```
+
+   In addition, convert BLP files to PNGs, using [BLPConverter].
+
+   This entire step will be obsolete [soon™].
+
+5. Run the dev server:
+
+   ```shell
+   npm run start:dev
+   ```
+
+   **Disclaimer:** Wowser serves up resources to the browser over HTTP. Depending
+   on your network configuration these may be available to others. Respect laws and
+   do not distribute game data you do not own.
+
+## Contribution
+
+When contributing, please:
+
+- Fork the repository
+- Open a pull request (preferably on a separate branch)
+
+[BLPConverter]: https://github.com/wowserhq/blizzardry#blp
+[ECMAScript modules]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
+[ES2015+]: https://babeljs.io/docs/learn-es2015/
+[Node.js]: http://nodejs.org/#download
+[StormLib]: https://github.com/wowserhq/blizzardry#mpq
+[Wowser]: https://github.com/wowserhq/wowser
+[soon™]: http://www.wowwiki.com/Soon
+[webpack]: http://webpack.github.io/

package.json

@@ -22,6 +22,7 @@
     "wow"
   ],
   "dependencies": {
+    "@wowserhq/math": "^0.1.0",
     "fengari": "^0.1.4"
   },
   "devDependencies": {

public/Shaders/pixel/glsles300/DebugLine.frag

@@ -0,0 +1,8 @@
+#version 300 es
+precision highp float;
+
+out vec4 outColor;
+
+void main() {
+  outColor = vec4(1.0, 0.0, 0.0, 1.0);
+}

public/Shaders/pixel/glsles300/UI.frag

@@ -0,0 +1,12 @@
+#version 300 es
+precision highp float;
+
+in vec2 vTextureCoords;
+
+uniform sampler2D uTexture;
+
+out vec4 outColor;
+
+void main() {
+  outColor = texture(uTexture, vTextureCoords);
+}

public/Shaders/vertex/glsles300/DebugLine.vert

@@ -0,0 +1,7 @@
+#version 300 es
+
+in vec4 position;
+
+void main() {
+  gl_Position = position;
+}

public/Shaders/vertex/glsles300/UI.vert

@@ -0,0 +1,15 @@
+#version 300 es
+
+in vec4 position;
+in vec4 color;
+in vec2 textureCoords;
+
+uniform mat4 viewProjMatrix;
+uniform sampler2D vTexture;
+
+out vec2 vTextureCoords;
+
+void main() {
+  gl_Position = position * viewProjMatrix;
+  vTextureCoords = textureCoords;
+}

public/Wowser/Wowser.toc

@@ -0,0 +1,5 @@
+..\Interface\GlueXML\GlueFonts.xml
+..\Interface\GlueXML\GlueFontStyles.xml
+
+WowserFrame.xml
+WowserParent.xml

public/Wowser/WowserFrame.xml

@@ -0,0 +1,87 @@
+<Ui xmlns="http://www.blizzard.com/wow/ui/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.blizzard.com/wow/ui/
+..\FrameXML\UI.xsd">
+  <Frame name="WowserFrame" parent="WowserParent" toplevel="true" setAllPoints="true" hidden="true">
+    <Frames>
+      <Frame name="WowserUI" setAllPoints="true">
+        <Layers>
+          <Layer level="ARTWORK">
+            <Texture name="Background" file="Interface\Glues\LoadingScreens\LOADSCREENNORTHREND">
+              <Size>
+                <AbsDimension x="1024" y="768" />
+              </Size>
+              <Anchors>
+                <Anchor point="TOPLEFT" />
+                <Anchor point="BOTTOMRIGHT" />
+              </Anchors>
+            </Texture>
+
+            <Texture name="BlizzardLogo" file="Interface\Glues\Mainmenu\Glues-BlizzardLogo">
+              <Size>
+                <AbsDimension x="100" y="100" />
+              </Size>
+              <Anchors>
+                <Anchor point="BOTTOM">
+                  <Offset>
+                    <AbsDimension x="0" y="10" />
+                  </Offset>
+                </Anchor>
+              </Anchors>
+            </Texture>
+
+            <FontString name="Version" text="A small version text in the corner" inherits="GlueFontNormalSmall" justifyH="LEFT">
+              <Anchors>
+                <Anchor point="BOTTOMLEFT">
+                  <Offset>
+                    <AbsDimension x="10" y="10" />
+                  </Offset>
+                </Anchor>
+              </Anchors>
+            </FontString>
+          </Layer>
+        </Layers>
+
+        <Frames>
+          <Frame name="WowserBox">
+            <Size x="300" y="300" />
+            <Anchors>
+              <Anchor point="CENTER" />
+            </Anchors>
+            <Backdrop bgFile="Interface\DialogFrame\UI-DialogBox-Background" edgeFile="Interface\DialogFrame\UI-DialogBox-Border" tile="true">
+              <BackgroundInsets>
+                <AbsInset left="11" right="12" top="12" bottom="11"/>
+              </BackgroundInsets>
+              <TileSize>
+                <AbsValue val="32"/>
+              </TileSize>
+              <EdgeSize>
+                <AbsValue val="32"/>
+              </EdgeSize>
+            </Backdrop>
+            <Layers>
+              <Layer level="ARTWORK">
+                <FontString name="Message" inherits="GlueFontNormalSmall" text="This is a Wowser test scene.">
+                  <Anchors>
+                    <Anchor point="CENTER">
+                      <Offset>
+                        <AbsDimension x="0" y="-80" />
+                      </Offset>
+                    </Anchor>
+                  </Anchors>
+                </FontString>
+
+                <Texture name="Logo" file="Interface\Glues\Common\Glues-WoW-WotLKLogo">
+                  <Size>
+                    <AbsDimension x="256" y="128" />
+                  </Size>
+                  <Anchors>
+                    <Anchor point="CENTER" />
+                  </Anchors>
+                </Texture>
+              </Layer>
+            </Layers>
+          </Frame>
+        </Frames>
+      </Frame>
+    </Frames>
+  </Frame>
+</Ui>

public/Wowser/WowserParent.xml

@@ -0,0 +1,10 @@
+<Ui xmlns="http://www.blizzard.com/wow/ui/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.blizzard.com/wow/ui/
+..\FrameXML\UI.xsd">
+  <Frame name="WowserParent" setAllPoints="true">
+    <Scripts>
+      <OnLoad>
+        WowserFrame:Show();
+      </OnLoad>
+    </Scripts>
+  </Frame>
+</Ui>

src/Client.mjs

@@ -1,14 +1,28 @@
+import WebGL2Device from './gfx/apis/webgl2/WebGL2Device';
+import WebGPUDevice from './gfx/apis/webgpu/WebGPUDevice';
 import Screen from './gfx/Screen';
+import TextureRegistry from './gfx/Texture/Registry';
 import UIContext from './ui/Context';
 import { fetch } from './utils';
 
 class Client {
-  constructor() {
+  constructor(canvas, { api }) {
     this.constructor.instance = this;
 
     this.fetch = fetch;
 
-    this.screen = new Screen();
+    switch (api) {
+      default:
+      case 'webgl2':
+        this.device = new WebGL2Device(canvas);
+        break;
+      case 'webgpu':
+        this.device = new WebGPUDevice(canvas);
+        break;
+    }
+
+    this.screen = new Screen(canvas);
+    this.textures = new TextureRegistry();
     this.ui = new UIContext();
   }
 }

src/gfx/Color.mjs

@@ -0,0 +1,9 @@
+class Color {
+  constructor(value = 0x00000000) {
+    this.value = value;
+  }
+
+  // TODO: Getter/setters for r, g, b and a
+}
+
+export default Color;

src/gfx/Device/index.mjs

@@ -0,0 +1,19 @@
+import ShaderRegistry from '../Shader/Registry';
+
+class Device {
+  constructor() {
+    Device.instance = this;
+
+    this.shaders = new ShaderRegistry();
+  }
+
+  createShader() {
+    throw new Error(`${this.constructor.name} must implement 'createShader'`);
+  }
+
+  draw() {
+    throw new Error(`${this.constructor.name} must implement 'draw'`);
+  }
+}
+
+export default Device;

src/gfx/Screen/Layer.mjs

@@ -1,17 +1,17 @@
 import { LinkedListLink } from '../../utils';
-import { Rect } from '../../math';
+import { EdgeRect } from '../../math';
 
 class ScreenLayer {
   constructor(rect, zorder, flags, param, render) {
-    this.rect = rect || new Rect(0, 0, 1, 1);
+    this.rect = rect || new EdgeRect({ right: 1, top: 1 });
     this.zorder = zorder || 0.0;
     this.flags = flags || 0;
     this.param = param;
     this.render = render;
 
     this.zorderLink = new LinkedListLink(this);
 
-    this.visibleRect = new Rect();
+    this.visibleRect = new EdgeRect();
   }
 }