Forked from: cx20's [Grimoire.js] きのこの山たけのこの里の断面図を高さマップとして使ってみるテスト View Diff (222)

Fork
1
Fav
0
View
106
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 144 lines
  • HTML 30 lines
  • CSS 11 lines
Changelog:

`GeometryFactory` is now accepts Promise as a returned value(from last version).
By making use of this feature, users can define a primitive using hight-map.

Descriptions:

`GeometryFactory` is mostly used for generating some geometries with different arguments.
If you just want to instanciate a Geometry without thinking about next time, you can simply instanciate Geometry and assign the instance of Geometry to the attribute you want to set.

But, if you want to use many models using hight map, you should create a `Geometry type` for flexibility.
By this change, you can instanciate a geometry with hight map just by specifing source file of the image.

```javascript
GeometryFactory.addType("hight-map", {
src: {
converter: "String",
default: null
}
}, function(gl, attrs) {
if (attrs.src === null) {
throw new Error("Geometry typed `hight-map` must have src attribute.");
}

return new Promise((resolve, reject) => {
ImageResolver.resolve(attrs.src).then(img => {
const hightData = getHeightData(img);
var geometry = new Geometry(gl);
const HEIGHT_SEGMENT = img.width - 1;
const WIDTH_SEGMENT = img.height - 1;
const positions = new Float32Array((WIDTH_SEGMENT + 1) * (HEIGHT_SEGMENT + 1) * 3);
const normals = new Float32Array((WIDTH_SEGMENT + 1) * (HEIGHT_SEGMENT + 1) * 3);
const texcoords = new Float32Array((WIDTH_SEGMENT + 1) * (HEIGHT_SEGMENT + 1) * 2);
const indices = new Uint32Array(WIDTH_SEGMENT * HEIGHT_SEGMENT * 6);
var k = 0;
for (var row = 0; row < HEIGHT_SEGMENT; row++) {
for (var col = 0; col < WIDTH_SEGMENT; col++) {
var a = (row + 1) * (WIDTH_SEGMENT + 1) + col;
var b = (row + 0) * (WIDTH_SEGMENT + 1) + col;
var c = (row + 0) * (WIDTH_SEGMENT + 1) + col + 1;
var d = (row + 1) * (WIDTH_SEGMENT + 1) + col + 1;
indices[k * 6 + 0] = a;
indices[k * 6 + 1] = b;
indices[k * 6 + 2] = c;
indices[k * 6 + 3] = d;
indices[k * 6 + 4] = a;
indices[k * 6 + 5] = c;
k++;
}
}
k = 0;
for (var x = -1; x < 1; x += 2 / WIDTH_SEGMENT) {
for (var y = -1; y < 1; y += 2 / HEIGHT_SEGMENT) {
const u = x / 2 + 0.5;
const v = y / 2 + 0.5;
const pw = Math.floor(u * img.width);
const ph = Math.floor(v * img.height);
var z = hightData[ph * (WIDTH_SEGMENT + 1) + pw];
var z2 = z / 32 - 0.5;
positions[k * 3 + 0] = x;
positions[k * 3 + 1] = z2;
positions[k * 3 + 2] = y;

normals[k * 3 + 0] = x;
normals[k * 3 + 1] = z2;
normals[k * 3 + 2] = y;

texcoords[k * 2 + 0] = u;
texcoords[k * 2 + 1] = v;

k++;
}
}
geometry.addAttributes(positions, {
POSITION: {
size: 3
}
});
geometry.addAttributes(normals, {
NORMAL: {
size: 3
}
});
geometry.addAttributes(texcoords, {
TEXCOORD: {
size: 2
}
});
geometry.addIndex("default", indices, WebGLRenderingContext.TRIANGLES);
resolve(geometry);
});
});
});
```
  • forked: [Grimoire.js] きのこの山たけのこの里の断面図を高さマップとして使ってみるテスト
  • forked: [Grimoire.js] きのこの山たけのこの里の断面図を高さマップとして使ってみるテスト

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

LimeStreem

Author

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Forked

sort by