Skip to content

wip: porting to typescript #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from
Closed

wip: porting to typescript #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6735501
wip: porting to typescript
endel Sep 28, 2019
eab5805
porting to typescript.
endel Sep 28, 2019
1c20e48
rollback imports with .js ending for es6 module in-browser testing
endel Sep 28, 2019
9a4f319
replace all imports to the typescript compiled version
endel Sep 28, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .editorconfig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
[*]
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
indent_style = space
indent_size = 4
2 changes: 1 addition & 1 deletion examples/base-primitives.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<body>
<div class="Info">Base Primitives - Plane, Cube, Sphere</div>
<script type="module">
import {Renderer, Camera, Transform, Program, Mesh} from '../src/Core.js';
import {Renderer, Camera, Transform, Program, Mesh} from '../lib/Core.js';
import {Plane, Sphere, Box} from '../src/Extras.js';

const vertex = `
Expand Down
6 changes: 3 additions & 3 deletions examples/draw-modes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<body>
<div class="Info">Draw Modes</div>
<script type="module">
import {Renderer, Camera, Transform, Geometry, Program, Mesh} from '../src/Core.js';
import {Renderer, Camera, Transform, Geometry, Program, Mesh} from '../lib/Core.js';

const vertex = `
precision highp float;
Expand All @@ -28,9 +28,9 @@

void main() {
vUv = uv;

gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

// gl_PointSize only applicable for gl.POINTS draw mode
gl_PointSize = 5.0;
}
Expand Down
32 changes: 16 additions & 16 deletions examples/fog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
<body>
<div class="Info">Fog. Model by Google Poly</div>
<script type="module">
import {Renderer, Camera, Transform, Texture, Program, Color, Geometry, Mesh} from '../src/Core.js';
import {Renderer, Camera, Transform, Texture, Program, Color, Geometry, Mesh} from '../lib/Core.js';

const vertex = `
precision highp float;
precision highp int;
Expand All @@ -38,28 +38,28 @@

void main() {
vUv = uv;

// copy position so that we can modify the instances
vec3 pos = position;

// scale first
pos *= 0.8 + random.y * 0.3;

// pass scaled object position to fragment to add low-lying fog
vPos = pos;

// rotate around Y axis
rotate2d(pos.xz, random.x * 6.28);

// add position offset
pos += offset;

// add some hilliness to vary the height
pos.y += sin(pos.x * 0.5) * sin(pos.z * 0.5) * 0.5;
// pass model view position to fragment shader to get distance from camera

// pass model view position to fragment shader to get distance from camera
vMVPos = modelViewMatrix * vec4(pos, 1.0);

gl_Position = projectionMatrix * vMVPos;
}
`;
Expand All @@ -80,15 +80,15 @@

void main() {
vec3 tex = texture2D(tMap, vUv).rgb;

// add the fog relative to the distance from the camera
float dist = length(vMVPos);
float fog = smoothstep(uFogNear, uFogFar, dist);
tex = mix(tex, uFogColor, fog);
// add some fog along the height of each tree to simulate low-lying fog
tex = mix(tex, uFogColor, smoothstep(1.0, 0.0, vPos.y));

// add some fog along the height of each tree to simulate low-lying fog
tex = mix(tex, uFogColor, smoothstep(1.0, 0.0, vPos.y));

gl_FragColor.rgb = tex;
gl_FragColor.a = 1.0;
}
Expand Down
12 changes: 6 additions & 6 deletions examples/gpgpu-particles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@
<body>
<div class="Info">GPGPU Particles (General-Purpose computing on Graphics Processing Units)</div>
<script type="module">
import {Renderer, Camera, Geometry, Program, Texture, Mesh, Vec2} from '../src/Core.js';
import {Renderer, Camera, Geometry, Program, Texture, Mesh, Vec2} from '../lib/Core.js';
import {GPGPU} from '../src/Extras.js';

const vertex = `
precision highp float;

Expand All @@ -34,7 +34,7 @@
// Get position from texture, rather than attribute
vec4 position = texture2D(tPosition, coords);
vVelocity = texture2D(tVelocity, coords);

// Add some subtle random oscillating so it never fully stops
position.xy += sin(vec2(uTime) * vRandom.wy + vRandom.xz * 6.28) * vRandom.zy * 0.1;

Expand Down Expand Up @@ -85,7 +85,7 @@
vec4 velocity = texture2D(tVelocity, vUv);

position.xy += velocity.xy * 0.01;

// Keep in bounds
vec2 limits = vec2(1);
position.xy += (1.0 - step(-limits.xy, position.xy)) * limits.xy * 2.0;
Expand Down Expand Up @@ -143,7 +143,7 @@

// The number of particles will determine how large the GPGPU textures are,
// and therefore how expensive the GPU calculations will be.
// Below I'm using 65536 to use every pixel of a 256x256 texture. If I used one more (65537),
// Below I'm using 65536 to use every pixel of a 256x256 texture. If I used one more (65537),
// it would need to use a 512x512 texture - the GPU would then perform calculations for each pixel,
// meaning that nearly 3/4 of the texture (196607 pixels) would be redundant.
const numParticles = 65536;
Expand Down Expand Up @@ -192,7 +192,7 @@
});

// Now we can create our geometry, using the coordinates from above.
// We don't use the velocity or position data as attributes,
// We don't use the velocity or position data as attributes,
// instead we will get this from the FBO textures in the shader.
const geometry = new Geometry(gl, {
random: {size: 4, data: random},
Expand Down
6 changes: 3 additions & 3 deletions examples/high-mesh-count.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,11 @@
<input id="meshCountInput" style="width: 100px"></input>
<button id="meshCountButton" style="padding:2px; border: 1px solid #000; background-color:#fff;" onclick="setMeshCount(document.getElementById('meshCountInput').value)">Set mesh count</button>
</div>

<script type="module">
import {Renderer, Camera, Transform, Program, Mesh} from '../src/Core.js';
import {Renderer, Camera, Transform, Program, Mesh} from '../lib/Core.js';
import {Box} from '../src/Extras.js';

const vertex = `
precision highp float;
precision highp int;
Expand Down
6 changes: 3 additions & 3 deletions examples/indexed-vs-non-indexed.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
<body>
<div class="Info">Indexed vs Non-Indexed</div>
<script type="module">
import {Renderer, Camera, Transform, Geometry, Program, Mesh} from '../src/Core.js';
import {Renderer, Camera, Transform, Geometry, Program, Mesh} from '../lib/Core.js';

const vertex = `
precision highp float;
precision highp int;
Expand All @@ -28,7 +28,7 @@

void main() {
vUv = uv;

gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;
Expand Down
18 changes: 9 additions & 9 deletions examples/instancing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
<body>
<div class="Info">Instancing. Model by Google Poly</div>
<script type="module">
import {Renderer, Camera, Transform, Texture, Program, Geometry, Mesh} from '../src/Core.js';
import {Renderer, Camera, Transform, Texture, Program, Geometry, Mesh} from '../lib/Core.js';

const vertex = `
precision highp float;
precision highp int;
Expand All @@ -39,21 +39,21 @@

void main() {
vUv = uv;

// copy position so that we can modify the instances
vec3 pos = position;

// scale first
pos *= 0.9 + random.y * 0.2;

// rotate around y axis
rotate2d(pos.xz, random.x * 6.28 + 4.0 * uTime * (random.y - 0.5));

// rotate around x axis just to add some extra variation
rotate2d(pos.zy, random.z * 0.5 * sin(uTime * random.x + random.z * 3.14));

pos += offset;

gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);;
}
`;
Expand All @@ -69,7 +69,7 @@

void main() {
vec3 tex = texture2D(tMap, vUv).rgb;

gl_FragColor.rgb = tex;
gl_FragColor.a = 1.0;
}
Expand Down
8 changes: 4 additions & 4 deletions examples/load-json.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
<body>
<div class="Info">Load JSON (Javascript Object Notation). Model by Google Poly</div>
<script type="module">
import {Renderer, Camera, Transform, Texture, Program, Geometry, Mesh} from '../src/Core.js';
import {Renderer, Camera, Transform, Texture, Program, Geometry, Mesh} from '../lib/Core.js';

const vertex = `
precision highp float;
precision highp int;
Expand All @@ -32,7 +32,7 @@
void main() {
vUv = uv;
vNormal = normalize(normalMatrix * normal);

gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;
Expand All @@ -50,7 +50,7 @@
void main() {
vec3 normal = normalize(vNormal);
vec3 tex = texture2D(tMap, vUv).rgb;

vec3 light = normalize(vec3(0.5, 1.0, -0.3));
float shading = dot(normal, light) * 0.15;
gl_FragColor.rgb = tex + shading;
Expand Down
16 changes: 8 additions & 8 deletions examples/mouse-flowmap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@
<body>
<div class="Info">Mouse Flowmap. Texture by <a href="https://www.deviantart.com/berserkitty/art/Seamless-Cartoon-styled-Water-Texture-743787929" target="_blank">BerserKitty</a></div>
<script type="module">
import {Renderer, Geometry, Program, Texture, Mesh, Vec2} from '../src/Core.js';
import {Renderer, Geometry, Program, Texture, Mesh, Vec2} from '../lib/Core.js';
import {Flowmap} from '../src/Extras.js';

const vertex = `
attribute vec2 uv;
attribute vec2 position;
Expand All @@ -38,7 +38,7 @@
varying vec2 vUv;

void main() {

// R and G values are velocity in the x and y direction
// B value is the velocity length
vec3 flow = texture2D(tFlow, vUv).rgb;
Expand Down Expand Up @@ -131,19 +131,19 @@

// Calculate velocity
if (!lastTime) {

// First frame
lastTime = performance.now();
lastMouse.set(e.x, e.y);
}

const deltaX = e.x - lastMouse.x;
const deltaY = e.y - lastMouse.y;

lastMouse.set(e.x, e.y);

let time = performance.now();

// Avoid dividing by 0
let delta = Math.max(14, time - lastTime);
lastTime = time;
Expand Down
16 changes: 8 additions & 8 deletions examples/msdf-text.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@
<body>
<div class="Info">MSDF Text Glyphs (Multichannel Signed Distance Fields)</div>
<script type="module">
import {Renderer, Camera, Transform, Geometry, Texture, Program, Mesh} from '../src/Core.js';
import {Renderer, Camera, Transform, Geometry, Texture, Program, Mesh} from '../lib/Core.js';
import {Orbit, Text} from '../src/Extras.js';

const vertex100 = `
precision highp float;
precision highp int;
Expand All @@ -29,7 +29,7 @@

void main() {
vUv = uv;

gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;
Expand Down Expand Up @@ -57,7 +57,7 @@
gl_FragColor.a = alpha;
}
`;

const vertex300 = `#version 300 es
precision highp float;
precision highp int;
Expand All @@ -72,7 +72,7 @@

void main() {
vUv = uv;

gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;
Expand Down Expand Up @@ -122,7 +122,7 @@
const scene = new Transform();

/*

Instructions to generate necessary MSDF assets

Install msdf-bmfont https://github.com/soimy/msdf-bmfont-xml
Expand All @@ -144,7 +144,7 @@
img.src = 'assets/fonts/FiraSans-Bold.png';

const program = new Program(gl, {

// Get fallback shader for WebGL1 - needed for OES_standard_derivatives ext
vertex: renderer.isWebgl2 ? vertex300 : vertex100,
fragment: renderer.isWebgl2 ? fragment300 : fragment100,
Expand All @@ -159,7 +159,7 @@
loadText();
async function loadText() {
const font = await (await fetch('assets/fonts/FiraSans-Bold.json')).json();

const text = new Text({
font,
text: 'don\'t panic',
Expand Down
Loading