Skip to content

Commit

Permalink
Merge branch 'master' of https://github.com/oframe/ogl
Browse files Browse the repository at this point in the history
  • Loading branch information
@gordonnl
gordonnl committed Oct 6, 2023
2 parents 1079c10 + 6d3cf53 commit 7c99222
Show file tree
Hide file tree
Showing 71 changed files with 935 additions and 921 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,7 @@ import { Renderer, Camera, Transform, Box, Program, Mesh } from 'ogl';

mesh.rotation.y -= 0.04;
mesh.rotation.x += 0.03;

renderer.render({ scene, camera });
}
}
Expand Down
19 changes: 8 additions & 11 deletions examples/anisotropic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<div class="Info">Anisotropic</div>
<div class="Info split"><span>Texture anisotropy: None</span> <span>Texture anisotropy: 16</span></div>
<script type="module">
import { Renderer, Camera, Transform, Texture, Program, Geometry, Mesh, Plane } from '../src/index.js';
import { Renderer, Camera, Transform, Texture, Program, Mesh, Plane } from '../src/index.js';

const vertex = /* glsl */ `
attribute vec2 uv;
Expand All @@ -46,13 +46,13 @@
uniform sampler2D tMap;
uniform sampler2D tMapA;
uniform float fSlide;
varying vec2 vUv;
void main() {
vec3 tex = texture2D(tMap, vUv).rgb;
vec3 texA = texture2D(tMapA, vUv).rgb;
gl_FragColor.rgb = mix(tex, texA, step(fSlide, vUv.x)) + 0.1;
gl_FragColor.a = 1.0;
}
Expand Down Expand Up @@ -101,24 +101,21 @@
},
});

const mesh = new Mesh(gl, {
geometry: geometry,
program: program,
});

const mesh = new Mesh(gl, { geometry, program });
mesh.scale.set(1, 2, 1);
mesh.rotation.set(-1.5, 0, 0);

mesh.setParent(scene);

gl.canvas.addEventListener('mousemove', (event) => {
const x = (2 * event.x) / gl.canvas.width;
gl.canvas.addEventListener('mousemove', (e) => {
const x = (2 * e.x) / gl.canvas.width;
program.uniforms.fSlide.value = x;
});

requestAnimationFrame(update);
function update(t) {
function update() {
requestAnimationFrame(update);

renderer.render({ scene, camera });
}
}
Expand Down
8 changes: 4 additions & 4 deletions examples/assets/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,15 +48,15 @@ a {
@font-face {
font-family: 'Raleway';
src: url('fonts/raleway-regular-webfont.woff2') format('woff2'),
url('fonts/raleway-regular-webfont.woff') format('woff');
url('fonts/raleway-regular-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'Raleway';
src: url('fonts/raleway-bold-webfont.woff2') format('woff2'),
url('fonts/raleway-bold-webfont.woff') format('woff');
url('fonts/raleway-bold-webfont.woff') format('woff');
font-weight: 700;
font-style: normal;
}
Expand Down Expand Up @@ -159,7 +159,7 @@ div.Example {
[data-hideSidebar] .Side {
transform: translateX(-100%);
}

[data-hideSidebar] .SideIcon {
left: 0;
transform: rotate(180deg);
Expand All @@ -184,4 +184,4 @@ canvas {

#dropdown {
margin: 1em 0em;
}
}
4 changes: 2 additions & 2 deletions examples/base-primitives.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@
fragment,

// Don't cull faces so that plane is double sided - default is gl.BACK
cullFace: null,
cullFace: false,
});

const plane = new Mesh(gl, { geometry: planeGeometry, program });
Expand All @@ -99,13 +99,13 @@
requestAnimationFrame(update);
function update() {
requestAnimationFrame(update);
controls.update();

plane.rotation.y -= 0.02;
sphere.rotation.y -= 0.03;
cube.rotation.y -= 0.04;
cylinder.rotation.y -= 0.02;

controls.update();
renderer.render({ scene, camera });
}
}
Expand Down
6 changes: 3 additions & 3 deletions examples/compressed-textures.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<body>
<div class="Info">Compressed Textures.</div>
<script type="module">
import { Renderer, Camera, Transform, Texture, Program, Mesh, Plane, Orbit, TextureLoader } from '../src/index.js';
import { Renderer, Camera, Transform, Program, Mesh, Plane, Orbit, TextureLoader } from '../src/index.js';

const vertex = /* glsl */ `
attribute vec2 uv;
Expand Down Expand Up @@ -112,14 +112,14 @@
uniforms: {
tMap: { value: texture },
},
cullFace: null,
cullFace: false,
});

const mesh = new Mesh(gl, { geometry, program });
mesh.setParent(scene);

requestAnimationFrame(update);
function update(t) {
function update() {
requestAnimationFrame(update);

controls.update();
Expand Down
14 changes: 7 additions & 7 deletions examples/cube-map.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
</div>
</div>
<script type="module">
import { Renderer, Camera, Transform, Texture, Program, Geometry, Mesh, Box, Orbit } from '../src/index.js';
import { Renderer, Camera, Transform, Texture, Program, Mesh, Box, Orbit } from '../src/index.js';

const vertex = /* glsl */ `
attribute vec3 position;
Expand All @@ -36,7 +36,7 @@
void main() {
vDir = normalize(position);
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;
Expand All @@ -53,7 +53,7 @@
// sample function is textureCube rather than texture2D
vec3 tex = textureCube(tMap, vDir).rgb;
gl_FragColor.rgb = tex;
gl_FragColor.a = 1.0;
}
Expand Down Expand Up @@ -127,7 +127,7 @@
uniforms: {
tMap: { value: texture },
},
cullFace: null,
cullFace: false,
});

const skybox = new Mesh(gl, { geometry, program });
Expand All @@ -138,12 +138,12 @@
mesh.setParent(scene);

requestAnimationFrame(update);
function update(t) {
function update() {
requestAnimationFrame(update);

controls.update();

mesh.rotation.y += 0.003;

controls.update();
renderer.render({ scene, camera });
}
}
Expand Down
8 changes: 5 additions & 3 deletions examples/curves.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
fragment,

// Don't cull faces so that plane is double sided - default is gl.BACK
cullFace: null,
cullFace: false,
});

const sphere = new Mesh(gl, { geometry: sphereGeometry, program });
Expand Down Expand Up @@ -117,16 +117,18 @@
});

for (let i = 0; i <= 60; i++) {
const p = [polyline, polyline2, polyline3][i % 3];
const mesh = new Mesh(gl, { geometry: p.geometry, program: p.program });
const { geometry, program } = [polyline, polyline2, polyline3][i % 3];
const mesh = new Mesh(gl, { geometry, program });
mesh.setParent(sphere);
mesh.rotation.y = (i * Math.PI) / 60;
}

requestAnimationFrame(update);
function update() {
requestAnimationFrame(update);

sphere.rotation.y -= 0.01;

controls.update();
renderer.render({ scene, camera });
}
Expand Down
4 changes: 2 additions & 2 deletions examples/draw-modes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
4 changes: 2 additions & 2 deletions examples/flat-shading-matcap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
// We're using the matcap to add some shininess to the model
float mat = texture2D(tMap, matcap(normalize(vMVPos.xyz), normal)).g;
gl_FragColor.rgb = normal + mat;
gl_FragColor.a = 1.0;
}
Expand Down Expand Up @@ -122,7 +122,7 @@
uniforms: {
tMap: { value: texture },
},
cullFace: null,
cullFace: false,
});

loadModel();
Expand Down
29 changes: 15 additions & 14 deletions examples/fog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 @@ -79,15 +79,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 Expand Up @@ -167,6 +167,7 @@
mesh.rotation.y += 0.003;
mesh.position.z = Math.sin(t * 0.0004) * 3.0;
}

program.uniforms.uTime.value = t * 0.001;
renderer.render({ scene, camera });
}
Expand Down
2 changes: 1 addition & 1 deletion examples/fresnel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,10 +113,10 @@
requestAnimationFrame(update);
function update() {
requestAnimationFrame(update);

torus.rotation.x += 0.01;

controls.update();

renderer.render({ scene, camera });
}
}
Expand Down
Loading

0 comments on commit 7c99222

Please sign in to comment.