This tutorial will walk you through setting up a basic development environment for luma.gl applications using webpack. Later tutorials will build on this one, so we recommend going through it first.

Note: It is assumed for these tutorials that you have some knowledge of the WebGL API. If you are unfamiliar with how to draw with WebGL, we highly recommend the excellent WebGL 2 Fundamentals.

From the command line, first run

mkdir luma-demo
cd luma-demo
npm init -y

to set up our project directory and initialize npm.

Next run

npm i @luma.gl/engine @luma.gl/webgl
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin

to install our dependencies.

Open the file package.json (created when we initialized npm), and add the following to the scripts block:

"start": "webpack-dev-server --open"

The full contents of the package.json should be the following (dependency version numbers might differ):

{
  "name": "luma-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
   "@luma.gl/core": "8.4.0-alpha.1"
  },
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.9.0"
  }
}

Create a file webpack.config.js in the project root and add the following to it:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './index.js',
  plugins: [
    new HtmlWebpackPlugin({
      title: 'luma.gl Demo'
    })
  ],
  output: {
    filename: 'bundle.js'
  }
};

(For more information on Webpack, visit their excellent documentation).

Now create a file index.js in the project root and add the following to it:

import {AnimationLoop} from '@luma.gl/engine';

const loop = new AnimationLoop({
  onInitialize({gl}) {
    // Setup logic goes here
  },

  onRender({gl}) {
    // Drawing logic goes here
  }
});

loop.start();

This will be the basic structure of most luma.gl applications. To make sure everything works, let's add a draw command:

import {AnimationLoop} from '@luma.gl/engine';
import {clear} from '@luma.gl/webgl';

const loop = new AnimationLoop({
  onInitialize({gl}) {
    // Setup logic goes here
  },

  onRender({gl}) {
    // Drawing logic goes here
    clear(gl, {color: [0, 0, 0, 1]});
  }
});

loop.start();

and run

npm start

from the command line. If all went well, a tab should open in your default browser, and you should see a black rectangle at the top left of your screen.