Skip to content
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

Jump to bottom

Simple polish to the IntegerTextures example #5997

Merged
merged 1 commit into from
Jan 26, 2024
Merged

Simple polish to the IntegerTextures example #5997

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
69 changes: 19 additions & 50 deletions examples/src/examples/graphics/integer-textures.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ function controls({ observer, ReactPCUI, jsx, fragment }) {
* @param {Options} options - The example options.
* @returns {Promise<pc.AppBase>} The example application.
*/
async function example({ canvas, data, deviceType, files, glslangPath, twgslPath, dracoPath }) {
async function example({ canvas, data, deviceType, assetPath, files, glslangPath, twgslPath, dracoPath }) {
//
// In this example, integer textures are used to store the state of each pixel in a simulation.
// The simulation is run in a shader, and the results are rendered to a texture.
Expand All @@ -82,7 +82,9 @@ async function example({ canvas, data, deviceType, files, glslangPath, twgslPath
fallbackUrl: dracoPath + 'draco.js'
});

const assets = {};
const assets = {
helipad: new pc.Asset('helipad-env-atlas', 'texture', { url: assetPath + 'cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP, mipmaps: false })
};

const gfxOptions = {
deviceTypes: [deviceType],
Expand All @@ -97,10 +99,12 @@ async function example({ canvas, data, deviceType, files, glslangPath, twgslPath

createOptions.componentSystems = [
pc.RenderComponentSystem,
pc.CameraComponentSystem,
pc.LightComponentSystem
pc.CameraComponentSystem
];
createOptions.resourceHandlers = [
// @ts-ignore
pc.TextureHandler
];
createOptions.resourceHandlers = [];

const app = new pc.AppBase(canvas);
app.init(createOptions);
Expand Down Expand Up @@ -238,10 +242,14 @@ async function example({ canvas, data, deviceType, files, glslangPath, twgslPath

app.start();

// setup skydome
app.scene.envAtlas = assets.helipad.resource;
app.scene.skyboxMip = 2;
app.scene.exposure = 1;

// Create an Entity with a camera component
const cameraEntity = new pc.Entity();
cameraEntity.addComponent("camera", {
clearColor: new pc.Color(0.4, 0.45, 0.5),
farClip: 500
});

Expand All @@ -250,60 +258,21 @@ async function example({ canvas, data, deviceType, files, glslangPath, twgslPath
cameraEntity.lookAt(0, 5, 0);
app.root.addChild(cameraEntity);

// create material used on the ground plane
const groundMaterial = new pc.StandardMaterial();
groundMaterial.gloss = 0.6;
groundMaterial.metalness = 0.4;
groundMaterial.diffuse = new pc.Color(0.95, 0.85, 0.85);
groundMaterial.useMetalness = true;
groundMaterial.useLighting = true;
groundMaterial.update();

// Create the ground plane
const ground = new pc.Entity();
ground.addComponent('render', {
castShadows: false,
castShadowsLightmap: false,
lightmapped: false,
type: "plane",
material: groundMaterial
});
app.root.addChild(ground);
ground.setLocalPosition(0, 0, 0);
ground.setLocalScale(40, 40, 40);

// Create a directional light
const lightEntity = new pc.Entity();
lightEntity.addComponent("light", {
type: "directional",
color: pc.Color.WHITE,
range: 100,
intensity: 1,
shadowDistance: 256,
castShadows: true,
shadowBias: 0.1
// normalOffsetBias: 0.2
});
lightEntity.setLocalEulerAngles(60, 40, 0);
lightEntity.setLocalPosition(0, 10, 0);
app.root.addChild(lightEntity);

// create a plane called gameScreen to display the sand
// simulation visualization texture
const gameScreen = new pc.Entity();
gameScreen.addComponent('render', {
castShadows: true,
receiveShadows: false,
castShadowsLightmap: false,
lightmapped: false,
type: "plane"
type: "plane",
castShadows: false,
receiveShadows: false
});
gameScreen.setLocalPosition(0, 5, 0);
gameScreen.setLocalScale(PLANE_WIDTH, 1, PLANE_HEIGHT);
gameScreen.setEulerAngles(90, 0, 0);

/** @type {pc.StandardMaterial} */
const gameScreenMaterial = gameScreen.render.material;
gameScreenMaterial.diffuse = pc.Color.BLACK;
gameScreenMaterial.emissiveMap = outputTexture;
gameScreenMaterial.useLighting = false;
gameScreenMaterial.update();
Expand Down Expand Up @@ -544,7 +513,7 @@ export class IntegerTextureExample {
varying vec2 uv0;

vec3 whiteColor = vec3(1.0);
vec3 skyBlueColor = vec3(0.6, 0.7, 0.8);
vec3 skyBlueColor = vec3(0.2, 0.2, 0.2);
vec3 yellowSandColor = vec3(0.73, 0.58, 0.26);
vec3 orangeSandColor = vec3(0.87, 0.43, 0.22);
vec3 graySandColor = vec3(0.13, 0.16, 0.17);
Expand Down