bhouston / threeify Goto Github PK

Per:

The default attribute value is 0, 0, 0, 1
I see this all the time. Someone declares a position attribute as vec3 and then manually sets w to 1.

https://games.greggman.com/game/opengl-trivia/

Next steps for a beautiful code base:

• implement commitizen
• implement semantic-release
• finish the eslint/prettier setup (there are still a few snags but it the brunt of it is done in #18
• setup linting for glsl files
• inspect the linting and "modernise" the code, by using the # for private members, avoiding null types (#39), using single object parameters (#40),
• setup a github action that verifies the linting for new commits
• remove all the any types necessary right now. A big one coming from threejs right now is the uniforms, that are all any.
• remove additional warnings from the linter
• can eslint understand vscode import sorting? Or does the Code extension for import sorting have a script to be run on CI? Currently eslint is silenced for imports but it still implements it and the packages for it are still there. If it's impossible, remove them.
• tackle the typedoc part

• not release at every commit. Release from command line? Release every month?
• update package.json's version
• update readme
• have different writing for alpha (which is supposed to do many breaking changes) or study pre-release branches?

We need a way to be able to navigate examples and also display them.

Currently I have a directory for each example. Inside I have a index.js that contains the content for that example.

I could add a example.json file in each of those directories as well that contains the title and description.

I think that it maybe possible to write some type of automation that reads this data and creates a table of contents. My dream is that the table of contents has a screenshot of each example and shows up as a wall of pictures with titles under them. We could then also publish this to the website.

I think this will help people see what they should expect.

I am open to ideas. Should we statically generate HTML? Could we create markup that is converted to HTML via a static site generator? OR should we create a Koa webserver that run-time generates the HTML via React or similar? I guess I do not know where to go on this front.

But I think attractive and easy to access and east to create examples are key to a successful library.

I do feel that a React + Kao website that is dynamically generated would be really nice. There may be a way to use that to generate static HTML pages that can be checked in...

I want to create the quintessential getting started example of an RGB triangle. I will create it in the examples folder. It will not use the scene graph.

Instead it will have:

• its own simple glsl shaders which will be transpiled via the threeify-glsl-transpiler.
• manually set uniforms.
• An attribute geometry converted to a buffer geometry that holds the data.

It will show how to manually render things. It tests the underlying infrastructure in a simple fashion.

Current error blocking semantic-release:

An error occurred while running semantic-release: 
Error: Command failed with exit code 1: 
git push --tags https://x-access-token:[secure]@github.com/bhouston/threeify HEAD:master
To https://github.com/bhouston/threeify
 ! [remote rejected] HEAD -> master (permission denied)
error: failed to push some refs to 'https://github.com/bhouston/threeify'

I wonder if Github has a problem with generated secret tokens in CI from transferred repos.

glBindTexture(GL_TEXTURE_2D, 0);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA8, 1, 1, 0, GL_RGBA, GL_UNSIGNED_BYTE, oneRedPixel);

per: https://games.greggman.com/game/opengl-trivia/

One should follow how this is specified in the glTF format. I believe one of these is colored, while the other isn't. One could pack these into one texture then with 4 distinct values. This would be following the method from The Order: 1886: https://pdfs.semanticscholar.org/5e89/fa62e24100a07301e6a335299f3b48f65f3e.pdf

https://github.com/semantic-release/semantic-release

Some thoughts: @bhouston you mentioned that you'd like this project to be able to talk to webgl2 as well as webgpu. Others might even like webgl1. I think it's a good opportunity to make it modular: have the math stuff as a module, a module for the renderer API, one for the material API, and then one module with webgl2 (actual renderer+shaders), same for webgpu... We could have a module for orbit controls then etc. This would turn the structure into the trendy lerna monorepo thing. The big advantage is that it would make the project the more friendly to use and let people transition across webgl1/2/webgpu. The code could look something like:

import { Vector3 } from "@threeify/maths";
import { Box } from "@threeify/geometries";
import { Mesh, Scene } from "@threeify/scene-graph";
import { Renderer } from "@threeify/renderer";
import { PBRMaterial } from "@threeify/materials";
import { webgl2 } from "@threeify/webgl2";

const renderer = new Renderer(webgl2);
const material = new PBRMaterial();
const geometry = new Box();
const mesh = new Mesh({ geometry, material });

TODO: Benchmark how PlayCanvas and Babylon did their webgl2 and webgpu demos from their existing library stack

It would be amazing if we could have the glsl code automatically formatted upon save to a consistent scheme. I believe there is a way to do this via our prettier.

The most obvious solution is to port the latest Three.js PMREM generator.

I understand that Sheen may require a lookup for for IBL purposes as well. I heard that maybe Babylon.js includes this precomputed value in their pre-computed environments -- but I haven't found code evidence of that yet.

If we use RGBD for the PMREM generator, there is no channel left for the Sheen component. Thus this suggests it can not be packed into it. Thus might as well just port across the Three.js PMREM generator?

Q: What does play canvas do currently?
Q: What does filament's offline pre-generator do specifically?

I did this because of the tangent flow maps, but I think it was incorrect because now I have to swizzle all normal maps. I will have to undo this rotation.

This would be very useful. It should be infinitely scaleable and also cache the results.

What is the most popular unit test framework these days? I think it is jest.

This is required for the examples website.

"This reminds me of something related-ish, have you used the KHR_parallel_shader_compile extension yet?
I've found it reduces compilation related stalls entirely but then you need to retrieve attributes and uniforms locations which also creates a stall."
https://twitter.com/frguthmann/status/1268208728773472258

@bhouston for history clarity, in the "settings" tab of the repo, you may want to disable "allow merge commits" because it adds a commit message ala "Merge pull request #x from " on the target branch for each merged branch.

There are two other strategies that don't create that commit: squash and rebase. They both apply the commits in the PR's branch and place them on the target branch directly. The difference between them is that the squash method also squashes the commit. It names it following the name of the PR, which defaults to the first commit's name, but which can be rewritten on Github by the person 'merging' the PR.

To support semantic-release fully, I recommend disabling the merge and squash strategies, so that we can only merge through the rebase one, which keeps all the commit names (that are validated on CI).

Now we have working CI, we should block PRs that don't pass checks

After I install the node dependencies with npm install and then start the dev server with npm run start, navigating to the server gives me a 404. npm run dev yields the same result.

Also, if I run npm run build, no new files are created.

How am I supposed to run this project?

This is done in the Order 1886 using the fresnel term.

Q: What is used by Three.js, Filament, Babylon, Dassault ePBR, Autodesk Surface?

Three.js rarely uses argument objects: we often do new Thing(1,1,true,undefined, {option: false}). It would be handy to always have objects instead:

const option = false;
const bool = true;
new Thing({ option, x: 1, y: 1, bool });

pros:

• no order
• short-hand syntax

With the new math library structure that is designed to allow tree shaking, I would like to see how effective it actually is. The way to do this is to get rollup working with them.

Details here:

https://twitter.com/BenHouston3D/status/1270751496804720640

Three.js has a lot of null in the code base. Many pointers that may have references are initiated as null when these references are not yet defined... some might say, this is what undefined is for. Should we forbid null?

I haven't yet figured out how to do this.

It could be in the vertex homogeneous coordinates, perspective matrix, or in the UVs that I am using in the plane for the pass.

These words should not be backwards:

Some discussion here:
https://doc.babylonjs.com/resources/multi-platform_compressed_textures

After a triangle I want to render a single plane with a texture on it.

I will not use the scene graph.

Rather instead it will have:

• its own simple glsl shaders which will be transpiled via the threeify-glsl-transpiler.
• manually set uniforms, one of which will be a texture.
• I will use the geometry/primitive/plane() factory function to create the geometry.

This will test out a few pieces of the infrastructure in a simple fashion.

Premise

Jest seems like a sane choice for a JavaScript unit testing framework. However it has some limitations and may not be straightforward to install.

Eg. using jest with a webpack based build system has challenges. I think the crux of problem is making jest understand various proposals and supersets of JavaScript. It seems that some plugins are available to help with this off the shelf (eg. babel-jest), while other configs may require the build tool to be customized.

Proposal

Unless a framework better suited for TypeScript is identified, I would like to propose to move forward with implementing Jest.

Definition of done

• Jest framework along with any of it's dependencies is installed via npm i or yarn
• Running jest with a single some.test.ts will load the said file.
• some.test.ts is to load some module from the library, preferably something simple
  • (but it may be a good idea to test something that imports a .glsl file if that happens)
• The test is to implement a simple it() block that instantiates a module, or calls some method if said module is static/singleton.

Will be faster. Just need to figure out how to do in typescript.

https://github.com/greggman/webgl-helpers#webgl-gl-error-checkjs

This is done via an albedo scaling technique in the Sheen glTF specification here: https://github.com/KhronosGroup/glTF/pull/1688/files#diff-fde88883403376c583dfee3d04493feeR129

Q: What is used by Three.js, Filament, Babylon, Dassault ePBR, Autodesk Surface?

Will simplify debugging in the console output. Use regexp for this.

This is done in Three.js via the clearcoatDHRApproximation:

https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/lights_physical_pars_fragment.glsl.js#L22

There was some discussion here: mrdoob/three.js#9038 (comment)

Q: What is used by Filament, Babylon, Dassault ePBR, Autodesk Surface?

Discussed here: https://twitter.com/BenHouston3D/status/1279602478594621441

Port the one from the glTF-IBL-SAmpler, or three.js

There are a number of ways this can be done. Often this is done via layering.

Here is an Autodesk Standard Surface guide to layering with hints as to how to make it energy conserving:

There is a discussion here how to layer sheen:
https://github.com/KhronosGroup/glTF/blob/971ff4d74c4f34640b6c19c8bba07d0e3b1ccff8/extensions/2.0/Khronos/KHR_materials_sheen/README.md#sheen-layering

Another simple example to show that things are working. This will not use the scene graph.

Instead this example will do the following:

• Create a box using the geometry/prmitives/box() factory function.
• Manually created simple shaders & uniform with just view and perspective transforms.
• I will use the PerspectiveCamera node to create the perspective camera.
• On each new animation frame I will rotate the box a bit.

var ENV_CUBE_LOOK_DIR = [
    new Vec3(1.0, 0.0, 0.0),
    new Vec3(-1.0, 0.0, 0.0),
    new Vec3(0.0, 1.0, 0.0),
    new Vec3(0.0, -1.0, 0.0),
    new Vec3(0.0, 0.0, 1.0),
    new Vec3(0.0, 0.0, -1.0)
];

var ENV_CUBE_LOOK_UP = [
    new Vec3(0.0, -1.0, 0.0),
    new Vec3(0.0, -1.0, 0.0),
    new Vec3(0.0, 0.0, 1.0),
    new Vec3(0.0, 0.0, -1.0),
    new Vec3(0.0, -1.0, 0.0),
    new Vec3(0.0, -1.0, 0.0)
];

 var view = mat4.lookAt(camera.pos, camera.pos + ENV_CUBE_LOOK_DIR[side], ENV_CUBE_LOOK_UP[side]);
 var CUBE_PROJECTION = mat4.perspective(Math.PI/2, aspect, near, far);

source: https://stackoverflow.com/questions/34639572/render-to-cubemap-tutorial-in-webgl

They are here: https://github.com/KhronosGroup/glTF-Sample-Environments