db2e1426e9
* Introduce two WebGL samples: triangle and suzanne.
This commit has no effect on mobile / desktop builds, it only adds new
targets to the `-p webgl` build.
We will eventually expose a proper JavaScript API, but for now these
samples use a (somewhat under-engineered) `filaweb` framework whereby
the WebAssembly module exposes a small number of C entry points: launch,
render, and resize.
Each sample has two source files: a cpp file and an html file. The cpp
file generates js / wasm pair. The generated js is simply a loader for
the wasm.
The CMake script creates a pristine "public" folder which contains the
minimal set of files needed to serve the web application using a simple
static file server. The public folder like this:
/suzanne.js built by em++ from suzanne.cpp
/suzanne.wasm built by em++ from suzanne.cpp
/suzanne.html copied from REPO/samples/web
/filaweb.js copied from REPO/samples/web
/favicon.png copied from REPO/samples/web
/monkey/*.png copied from REPO/assets/models
/monkey/*.filamesh built by filamesh
/desert/* built by cmgen
To decode PNG textures, we use the somewhat unusual approach of using
JavaScript to draw them into a hidden 2D canvas, then reading back the
pixels. This allows us to avoid fattening up the wasm file with a PNG
decoder. An alternative idea would be to pass a DOM Image directly into
glTexImage2D, but this would require some #ifdefing and/or JS injection
in Filament's OpenGL backend.
* Optimize the suzanne material.
126 lines
4.2 KiB
C++
126 lines
4.2 KiB
C++
/*
|
|
* Copyright (C) 2018 The Android Open Source Project
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
#include <filament/Engine.h>
|
|
#include <filament/IndexBuffer.h>
|
|
#include <filament/Material.h>
|
|
#include <filament/MaterialInstance.h>
|
|
#include <filament/RenderableManager.h>
|
|
#include <filament/Scene.h>
|
|
#include <filament/TransformManager.h>
|
|
#include <filament/VertexBuffer.h>
|
|
#include <filament/View.h>
|
|
|
|
#include "filaweb.h"
|
|
|
|
#include <cmath>
|
|
|
|
using namespace filament;
|
|
using namespace std;
|
|
|
|
using utils::Entity;
|
|
using utils::EntityManager;
|
|
|
|
struct TriangleApp {
|
|
VertexBuffer* vb;
|
|
IndexBuffer* ib;
|
|
Material* mat;
|
|
Camera* cam;
|
|
Entity renderable;
|
|
};
|
|
|
|
struct Vertex {
|
|
math::float2 position;
|
|
uint32_t color;
|
|
};
|
|
|
|
static const Vertex TRIANGLE_VERTICES[3] = {
|
|
{{1, 0}, 0xffff0000u},
|
|
{{cos(M_PI * 2 / 3), sin(M_PI * 2 / 3)}, 0xff00ff00u},
|
|
{{cos(M_PI * 4 / 3), sin(M_PI * 4 / 3)}, 0xff0000ffu},
|
|
};
|
|
|
|
static constexpr uint16_t TRIANGLE_INDICES[3] = { 0, 1, 2 };
|
|
|
|
static constexpr uint8_t BAKED_COLOR_PACKAGE[] = {
|
|
#include "generated/material/bakedColor.inc"
|
|
};
|
|
|
|
static TriangleApp app;
|
|
|
|
void setup(Engine* engine, View* view, Scene* scene) {
|
|
view->setClearColor({0.1, 0.125, 0.25, 1.0});
|
|
view->setPostProcessingEnabled(false);
|
|
view->setDepthPrepass(filament::View::DepthPrepass::DISABLED);
|
|
static_assert(sizeof(Vertex) == 12, "Strange vertex size.");
|
|
app.vb = VertexBuffer::Builder()
|
|
.vertexCount(3)
|
|
.bufferCount(1)
|
|
.attribute(VertexAttribute::POSITION, 0, VertexBuffer::AttributeType::FLOAT2, 0, 12)
|
|
.attribute(VertexAttribute::COLOR, 0, VertexBuffer::AttributeType::UBYTE4, 8, 12)
|
|
.normalized(VertexAttribute::COLOR)
|
|
.build(*engine);
|
|
app.vb->setBufferAt(*engine, 0,
|
|
VertexBuffer::BufferDescriptor(TRIANGLE_VERTICES, 36, nullptr));
|
|
app.ib = IndexBuffer::Builder()
|
|
.indexCount(3)
|
|
.bufferType(IndexBuffer::IndexType::USHORT)
|
|
.build(*engine);
|
|
app.ib->setBuffer(*engine,
|
|
IndexBuffer::BufferDescriptor(TRIANGLE_INDICES, 6, nullptr));
|
|
app.mat = Material::Builder()
|
|
.package((void*) BAKED_COLOR_PACKAGE, sizeof(BAKED_COLOR_PACKAGE))
|
|
.build(*engine);
|
|
app.renderable = EntityManager::get().create();
|
|
RenderableManager::Builder(1)
|
|
.boundingBox({{ -1, -1, -1 }, { 1, 1, 1 }})
|
|
.material(0, app.mat->getDefaultInstance())
|
|
.geometry(0, RenderableManager::PrimitiveType::TRIANGLES, app.vb, app.ib, 0, 3)
|
|
.culling(false)
|
|
.receiveShadows(false)
|
|
.castShadows(false)
|
|
.build(*engine, app.renderable);
|
|
scene->addEntity(app.renderable);
|
|
app.cam = engine->createCamera();
|
|
view->setCamera(app.cam);
|
|
};
|
|
|
|
void animate(Engine* engine, View* view, double now) {
|
|
constexpr float ZOOM = 1.5f;
|
|
const uint32_t w = view->getViewport().width;
|
|
const uint32_t h = view->getViewport().height;
|
|
const float aspect = (float) w / h;
|
|
app.cam->setProjection(Camera::Projection::ORTHO,
|
|
-aspect * ZOOM, aspect * ZOOM,
|
|
-ZOOM, ZOOM, 0, 1);
|
|
auto& tcm = engine->getTransformManager();
|
|
tcm.setTransform(tcm.getInstance(app.renderable),
|
|
math::mat4f::rotate(now, math::float3{0, 0, 1}));
|
|
};
|
|
|
|
void gui(filament::Engine* engine, filament::View*) {
|
|
};
|
|
|
|
// This is called only after the JavaScript layer has created a WebGL 2.0 context and all assets
|
|
// have been downloaded.
|
|
extern "C" void launch() {
|
|
filaweb::Application::get()->run(setup, gui, animate);
|
|
}
|
|
|
|
// The main() entry point is implicitly called after JIT compilation, but potentially before the
|
|
// WebGL context has been created or assets have finished loading.
|
|
int main() { }
|