initial commit

.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+    node: true,
+  },
+  extends: ['eslint:recommended', 'plugin:react/recommended'],
+  parser: 'babel-eslint',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2018,
+    sourceType: 'module',
+  },
+  plugins: ['react', 'babel', 'react-hooks'],
+  rules: {
+    'react/jsx-uses-vars': 2,
+    indent: ['error', 2, { SwitchCase: 1 }],
+    'linebreak-style': ['error', 'unix'],
+    quotes: ['error', 'single'],
+    semi: ['error', 'never'],
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+  },
+}

.gitignore

@@ -0,0 +1,8 @@
+.DS_Store
+node_modules
+
+dist
+umd
+
+.next
+out

.prettierignore

@@ -0,0 +1,5 @@
+.next
+out
+esm
+cjs
+

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Steve Hall
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,114 @@
+# React Vertex
+
+Hooks-based WebGL Library for React
+
+**This library is experimental and has not been officially released. Expected to be stable by Summer of 2019.**
+
+### [Documentation and Examples](https://react-vertex.com)
+
+## Packages
+
+### @react-vertex/core
+
+[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/sghall/react-vertex/blob/master/packages/core/LICENSE)
+[![bundlephobia](https://badgen.net/bundlephobia/minzip/@react-vertex/core)](https://bundlephobia.com/result?p=@react-vertex/core)
+[![npm version](https://img.shields.io/npm/v/@react-vertex/core.svg)](https://www.npmjs.com/package/@react-vertex/core)
+
+React components, renderer and hooks for WebGL scenes.
+
+```npm install @react-vertex/core```
+
+##### [Documentation for Core](https://react-vertex.com/docs-core-hooks/)
+
+### @react-vertex/geometry-hooks
+
+[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/sghall/react-vertex/blob/master/packages/geometry-hooks/LICENSE)
+[![bundlephobia](https://badgen.net/bundlephobia/minzip/@react-vertex/geometry-hooks)](https://bundlephobia.com/result?p=@react-vertex/geometry-hooks)
+[![npm version](https://img.shields.io/npm/v/@react-vertex/geometry-hooks.svg)](https://www.npmjs.com/package/@react-vertex/geometry-hooks)
+
+React hooks for working with geometries in React Vertex. 
+
+```npm install @react-vertex/geometry-hooks```
+
+##### [Documentation for Geometry Hooks](https://react-vertex.com/docs-geometry-hooks/)
+
+### @react-vertex/material-hooks
+
+[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/sghall/react-vertex/blob/master/packages/material-hooks/LICENSE)
+[![bundlephobia](https://badgen.net/bundlephobia/minzip/@react-vertex/material-hooks)](https://bundlephobia.com/result?p=@react-vertex/material-hooks)
+[![npm version](https://img.shields.io/npm/v/@react-vertex/material-hooks.svg)](https://www.npmjs.com/package/@react-vertex/material-hooks)
+
+React hooks for working with materials in React Vertex.
+
+```npm install @react-vertex/material-hooks```
+
+##### [Documentation for Material Hooks](https://react-vertex.com/docs-material-hooks/)
+
+### @react-vertex/math-hooks
+
+[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/sghall/react-vertex/blob/master/packages/math-hooks/LICENSE)
+[![bundlephobia](https://badgen.net/bundlephobia/minzip/@react-vertex/math-hooks)](https://bundlephobia.com/result?p=@react-vertex/math-hooks)
+[![npm version](https://img.shields.io/npm/v/@react-vertex/math-hooks.svg)](https://www.npmjs.com/package/@react-vertex/math-hooks)
+
+React hooks for working with vectors and matrices in WebGL.
+
+```npm install @react-vertex/math-hooks```
+
+##### [Documentation for Math Hooks](https://react-vertex.com/docs-matrix-hooks/)
+
+### @react-vertex/orbit-camera
+
+[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/sghall/react-vertex/blob/master/packages/orbit-camera/LICENSE)
+[![bundlephobia](https://badgen.net/bundlephobia/minzip/@react-vertex/orbit-camera)](https://bundlephobia.com/result?p=@react-vertex/orbit-camera)
+[![npm version](https://img.shields.io/npm/v/@react-vertex/orbit-camera.svg)](https://www.npmjs.com/package/@react-vertex/orbit-camera)
+
+React hooks for a basic orbit camera and controls.
+
+```npm install @react-vertex/orbit-camera```
+
+##### [Documentation for Orbit Camera](https://react-vertex.com/docs-orbit-camera/)
+
+### @react-vertex/color-hooks
+
+[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/sghall/react-vertex/blob/master/packages/color-hooks/LICENSE)
+[![bundlephobia](https://badgen.net/bundlephobia/minzip/@react-vertex/color-hooks)](https://bundlephobia.com/result?p=@react-vertex/color-hooks)
+[![npm version](https://img.shields.io/npm/v/@react-vertex/color-hooks.svg)](https://www.npmjs.com/package/@react-vertex/color-hooks)
+
+Hooks and utility functions to convert colors to WebGL friendly formats.
+
+```npm install @react-vertex/color-hooks```
+
+#### [Documentation for Color Hooks](https://react-vertex.com/docs-color-hooks/)
+
+## Running the repo locally
+
+```
+git clone git@github.com:sghall/react-vertex.git
+cd react-vertex
+npm install && npm run dev
+
+// You may need to bootstrap lerna as well
+npx lerna bootstrap
+```
+
+## Adding a demo
+
+First, note that the root of the repo is a nextjs app.  There's a `pages` folder and a `static` folder and so on.  There's a `babel.config.js` at the root of the repo that aliases the packages so you can use them directly from source in the demos.
+
+### Steps:
+
+1. Probably easiest to copy an existing demo in the `demos` folder and give it a new name (something short and sweet that is at least vaguely descriptive).  **Pro-tip:** Get the existing demo running at the new location and THEN add your demo code.
+
+2. Add a page (copy an existing) to the `pages` folder using the convention `demo-my-demo.js` (this a static site with no dynamic pages that the reason for the "demo-" prefix). All of the code should be in the `demos` folder so someone can see the whole thing without hunting around and copy it to their environment etc. So just make a minimal page pointing to your demo...
+
+```js
+// inside pages/demo-my-demo.js
+
+import MyDemo from 'demos/MyDemo'
+
+export default MyDemo
+```
+
+3. Add your demo to `demosList` in the `docs/config.js` so it will appear on the sidebar menu.
+
+4. Then (if you have already run ```npm install```) type ```npm run dev``` to start developing.

babel.config.js

@@ -0,0 +1,61 @@
+const packageAliases = {
+  '@react-vertex/core': './packages/core/src',
+  '@react-vertex/geometry-hooks': './packages/geometry-hooks/src',
+  '@react-vertex/material-hooks': './packages/material-hooks/src',
+  '@react-vertex/orbit-camera': './packages/orbit-camera/src',
+  '@react-vertex/scene-helpers': './packages/scene-helpers/src',
+  '@react-vertex/color-hooks': './packages/color-hooks/src',
+  '@react-vertex/math-hooks': './packages/math-hooks/src',
+  '@react-vertex/dom-hooks': './packages/dom-hooks/src',
+}
+
+module.exports = {
+  env: {
+    cjs: {
+      presets: [
+        '@babel/preset-react',
+        ['@babel/preset-env', { modules: 'commonjs' }],
+      ],
+      plugins: [
+        'glsl',
+        ['@babel/plugin-proposal-class-properties', { loose: true }],
+        '@babel/plugin-transform-object-assign',
+        '@babel/plugin-transform-runtime',
+      ],
+    },
+    esm: {
+      presets: [
+        '@babel/preset-react',
+        ['@babel/preset-env', { modules: false }],
+      ],
+      plugins: [
+        'glsl',
+        ['@babel/plugin-proposal-class-properties', { loose: true }],
+        '@babel/plugin-transform-object-assign',
+        '@babel/plugin-transform-runtime',
+      ],
+    },
+    docs: {
+      presets: ['@babel/preset-react'],
+      plugins: [
+        'glsl',
+        ['@babel/plugin-proposal-class-properties', { loose: true }],
+        '@babel/plugin-transform-object-assign',
+        '@babel/plugin-transform-runtime',
+        [
+          'babel-plugin-module-resolver',
+          {
+            alias: {
+              ...packageAliases,
+              docs: './docs',
+              pages: './pages',
+              static: './static',
+              packages: './packages',
+              demos: './demos',
+            },
+          },
+        ],
+      ],
+    },
+  },
+}

demos/AxesHelper/Scene.js

@@ -0,0 +1,47 @@
+import React, { memo, useState, useEffect } from 'react'
+import { timer } from 'd3-timer'
+import PropTypes from 'prop-types'
+import { useOrbitCamera, useOrbitControls } from '@react-vertex/orbit-camera'
+import { useCanvasSize, useRender, usePointLight } from '@react-vertex/core'
+import { useHex } from '@react-vertex/color-hooks'
+import Torus from './Torus'
+import Spheres from './Spheres'
+import { AxesHelper } from '@react-vertex/scene-helpers'
+
+function Scene({ showAxes }) {
+  const { width, height } = useCanvasSize()
+
+  const camera = useOrbitCamera(55, width / height, 1, 5000, c => {
+    c.setPosition([0, 0, 30])
+  })
+  useOrbitControls(camera)
+
+  const [elapsed, setElapsed] = useState(0)
+  const renderScene = useRender()
+
+  const lightColor = useHex('#fff')
+  usePointLight(lightColor, [0, 0, 0])
+
+  useEffect(() => {
+    const timerLoop = timer(e => {
+      renderScene()
+      setElapsed(e)
+    })
+
+    return () => timerLoop.stop()
+  }, [renderScene])
+
+  return (
+    <camera camera={camera}>
+      {showAxes && <AxesHelper size={10} />}
+      <Torus />
+      <Spheres elapsed={elapsed} showAxes={showAxes} />
+    </camera>
+  )
+}
+
+Scene.propTypes = {
+  showAxes: PropTypes.bool.isRequired,
+}
+
+export default memo(Scene)

demos/AxesHelper/Spheres.js

@@ -0,0 +1,82 @@
+import React, { memo, useMemo } from 'react'
+import PropTypes from 'prop-types'
+import {
+  useWebGLContext,
+  useStaticBuffer,
+  useAttribute,
+} from '@react-vertex/core'
+import { useVector3 } from '@react-vertex/math-hooks'
+import { useSphereGeometry } from '@react-vertex/geometry-hooks'
+import {
+  useAxesHelperMaterial,
+  useAxesHelperElements,
+} from '@react-vertex/scene-helpers'
+import { useHex } from '@react-vertex/color-hooks'
+import { usePhong } from '@react-vertex/material-hooks'
+
+const sphereCount = 30
+const P2 = Math.PI * 2
+
+function Spheres({ elapsed, showAxes }) {
+  const gl = useWebGLContext()
+  const { indices, vertices, normals } = useSphereGeometry(0.75, 10, 10)
+  const sphereDiffuse = useHex('#a7a7a7', true)
+  const sphereProgram = usePhong(sphereDiffuse)
+
+  const positionBuffer = useStaticBuffer(gl, vertices, false, 'F32')
+  const position = useAttribute(gl, 3, positionBuffer)
+
+  const normalBuffer = useStaticBuffer(gl, normals, false, 'F32')
+  const normal = useAttribute(gl, 3, normalBuffer)
+
+  const indexBuffer = useStaticBuffer(gl, indices, true, 'U16')
+
+  const attributes = useMemo(() => {
+    return { position, normal }
+  }, [position, normal])
+
+  const spheres = []
+
+  const groupPosition = useVector3(10, 0, 0)
+  const geometryPosition = useVector3(3, 0, 0)
+
+  const axesMaterial = useAxesHelperMaterial()
+  const axesElements = useAxesHelperElements(10)
+
+  for (let i = 0; i < sphereCount; i++) {
+    const offset = (P2 * (i + 1)) / sphereCount
+
+    spheres.push(
+      <group key={i} rotation={[0, 0, P2 * ((i + 1) / sphereCount)]}>
+        <group
+          position={groupPosition}
+          rotation={[0, offset + elapsed * 0.003, 0]}
+        >
+          {showAxes ? (
+            <material program={axesMaterial}>
+              <geometry {...axesElements} />
+            </material>
+          ) : null}
+          <geometry
+            position={geometryPosition}
+            drawElements={{
+              mode: 'TRIANGLES',
+              count: indices.length,
+            }}
+            index={indexBuffer}
+            attributes={attributes}
+          />
+        </group>
+      </group>,
+    )
+  }
+
+  return <material program={sphereProgram}>{spheres}</material>
+}
+
+Spheres.propTypes = {
+  elapsed: PropTypes.number.isRequired,
+  showAxes: PropTypes.bool.isRequired,
+}
+
+export default memo(Spheres)

demos/AxesHelper/Torus.js

@@ -0,0 +1,25 @@
+import React, { memo } from 'react'
+import { useWebGLContext, useUniform2fv } from '@react-vertex/core'
+import { useTexturedPhong } from '@react-vertex/material-hooks'
+import { useTorusElements } from '@react-vertex/geometry-hooks'
+import tilesDiffUrl from 'static/textures/tiles_pink_diff.png'
+
+const uVScale = [6.0, 3.0]
+
+function Torus() {
+  const gl = useWebGLContext()
+  const program = useTexturedPhong(tilesDiffUrl)
+  useUniform2fv(gl, program, 'uVScale', uVScale)
+
+  const torusElements = useTorusElements(10, 1, 16, 100)
+
+  return (
+    <material program={program}>
+      <geometry {...torusElements} />
+    </material>
+  )
+}
+
+Torus.propTypes = {}
+
+export default memo(Torus)