Skip to content

Commit ac4c89b

Browse files
committed
upd readme
1 parent c49a8cd commit ac4c89b

1 file changed

Lines changed: 4 additions & 79 deletions

File tree

README.md

Lines changed: 4 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -2,83 +2,8 @@
22

33
website
44

5-
# ogl-starter
5+
## Disclaimer
66

7-
The objective of this boilerplate is to set up everything the developer will need (in terms of configuration) to start an OGL project with TypeScript. ESLint and Prettier are configured to work independently of the user's IDE configuration (as long as it's VSCode).
8-
9-
![OGL + TypeScript](https://github.com/user-attachments/assets/75c3433f-c927-4a42-8a1d-16379c161724)
10-
11-
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fbasementstudio%ogl-starter&env=NEXT_PUBLIC_SITE_URL&envDescription=e.g%3A%20https%3A%2F%2Fproject-name.vercel.app)
12-
13-
## Featured Aspects of the Stack
14-
15-
- [react-ogl](https://github.com/pmndrs/react-ogl)
16-
- [TypeScript](https://www.typescriptlang.org/)
17-
- [Next.js](https://nextjs.org/)
18-
- [TailwindCSS](https://tailwindcss.com/)
19-
20-
## Things to Note
21-
22-
- Components, utilities, etc. are located under `/src`. If you are changing this, be sure to also update `tsconfig.json`'s `baseUrl`.
23-
24-
## Development
25-
26-
1. Install pnpm:
27-
28-
```
29-
npm install -g pnpm
30-
```
31-
32-
2. Install the dependencies with:
33-
34-
```
35-
pnpm
36-
```
37-
38-
3. Start developing and watch for code changes:
39-
40-
```
41-
pnpm dev
42-
```
43-
44-
## Important Things to Do
45-
46-
- [ ] Check out `.env.example` for required environment variables to run the project.
47-
- [ ] Add favicons. (Re)Place in `./public`: _32x32_ `favicon.ico`, _perfect square_ `favicon.svg` and `favicon-dark.svg` (_dark theme_), _512x512_ `icon-512.png`, _192x192_ `icon-192.png`, _180x180_ `apple-touch-icon.png`.
48-
- [ ] Replace the contents of this file (`README.md`) with the contents of the `README.example.md` file — make sure to adapt it to your project's specific needs. Finally, delete the old `README.example.md` file.
49-
50-
## Implementation details
51-
52-
### Global canvas
53-
54-
To improve performance, there is a global canvas that is created once and reused throughout the app. This canvas can be found inside of `src/app/(with-canvas)/layout.tsx`. So, if you want to add 3D elements to your page, you should create that page inside the `(with-canvas)` folder.
55-
56-
This is done so that you can split what pages that need 3D elements from those that don't.
57-
If you want the canvas to be present in all pages, you can move it inside of `src/app/layout.tsx` file.
58-
59-
### WebGL context
60-
61-
Inside of `src/app/gl/index.ts` there is a `GLOBAL_GL` variable that is the instance of the WebGL context. This is used to render all of the GL components.
62-
63-
You can use it to create programs outside of the React context.
64-
65-
```ts
66-
import { GLOBAL_GL } from "~/gl"
67-
68-
export const myCamera = new Camera(GLOBAL_GL, {
69-
fov: 75
70-
})
71-
```
72-
73-
### Debug mode
74-
75-
If you visit the site with the `?debug` param, the debug mode will be active, this will add some utils to the site:
76-
77-
- Leva panel: Inside the leva pannel, you will see shortcuts to toggle helpers, grid, device data and more.
78-
- Use `command+i` to toggle element outlines.
79-
80-
| To achieve this, we implemented a custom canvas inside of `src/app/gl/basement-canvas.tsx`, it is based on the original canvas from `react-ogl`.
81-
82-
---
83-
84-
If you find you need to make extra config to make this work more seamlessly, feel free to submit a PR suggesting your changes. Our focus is to get you up and running with the least steps and burden as possible.
7+
- Most performance/event data in this repo currently reflects the 2024-2025 season.
8+
- This website is an experiment site and includes partial data only.
9+
- This is not the official full team record.

0 commit comments

Comments
 (0)