@shaderfrog/core 0.0.2 → 0.1.1

package/dist/plugins/playcanvas/playengine.js

@@ -0,0 +1,510 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var _a, _b;
+import * as pc from 'playcanvas';
+import { EngineNodeType } from '../../engine';
+import { nodeName, doesLinkThruShader, prepopulatePropertyInputs, mangleMainFn, } from '../../graph';
+import { NodeType } from '../../graph-types';
+import importers from './importers';
+import { returnGlPositionHardCoded, returnGlPosition, returnGlPositionVec3Right, } from '../../ast/manipulate';
+import { property, } from '../../nodes/code-nodes';
+import { namedAttributeStrategy, texture2DStrategy, uniformStrategy, } from '../../strategy';
+var log = function () {
+    var _a;
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return (_a = console.log).call.apply(_a, __spreadArray([console, '\x1b[33m(playengine)\x1b[0m'], __read(args), false));
+};
+export var physicalDefaultProperties = {
+    // Required for objects with opacity
+    blendType: pc.BLEND_NORMAL,
+    // Hack (for now?). Playcanvas optimizes their materials to not calculate in
+    // the generated GLSL, if opacity is set to 1 or is unused. This forces the
+    // generated shader to include the opacity calculation. When we tween the
+    // opacity slider at runtime, playcanvas instantly generates a new shader +
+    // GLSL. The front-end code hijacks that call, and for now, for conveneinece,
+    // uses the GLSL from the core here that always includes opacity. Another
+    // option is to hijack both variations of the shader and generate two core
+    // variations. I might need to consider that with additional parameter
+    // variations.
+    opacity: 0.5,
+    // not sure if required for metalness https://developer.playcanvas.com/en/api/pc.StandardMaterial.html#useMetalness
+    useMetalness: true,
+    // Double sided
+    cull: pc.CULLFACE_NONE,
+};
+/**
+ * For the use of "0.5", apparently PlayCanvas optimizes uniform
+ * generation where if you set diffuse to white (1,1,1) then it doesn't
+ * add the diffuse uniform, because that's the default state.
+ */
+export var defaultPropertySetting = function (app, property) {
+    if (property.type === 'texture') {
+        return new pc.Texture(app.graphicsDevice);
+    }
+    else if (property.type === 'number') {
+        return 0.5;
+    }
+    else if (property.type === 'rgb') {
+        return new pc.Color(0.5, 0.5, 0.5);
+    }
+    else if (property.type === 'rgba') {
+        return new pc.Color(0.5, 0.5, 0.5, 0.5);
+    }
+};
+var applyPlayMaterialProperties = function (engineContext, shaderMaterial, app, graph, node, sibling) {
+    // Find inputs to this node that are dependent on a property of the material
+    var propertyInputs = node.inputs
+        .filter(function (i) { return i.property; })
+        .reduce(function (acc, input) {
+        var _a;
+        return (__assign(__assign({}, acc), (_a = {}, _a[input.id] = input, _a)));
+    }, {});
+    // Then look for any edges into those inputs and set the material property
+    var props = graph.edges
+        .filter(function (edge) { return edge.to === node.id || edge.to === (sibling === null || sibling === void 0 ? void 0 : sibling.id); })
+        .reduce(function (acc, edge) {
+        // Check if we've plugged into an input for a property
+        var propertyInput = propertyInputs[edge.input];
+        if (propertyInput) {
+            // Find the property itself
+            var property_1 = (node.config.properties || []).find(function (p) { return p.property === propertyInput.property; });
+            /**
+             * For the mutation, you apparently need to explicitily call .set() on
+             * some properties, like diffuse:
+             *    material.diffuse = new pc.Color(0.5, 0.5, 0.5)
+             * has no effect. You have to do
+             *     material.diffuse.set(0.5, 0.5, 0.5)
+             * and note the API isn't great, you can't do
+             *     material.diffuse.set(new pc.Color(...))
+             * This code will probably error on some properties because I don't know
+             * if all "rgb" properties have to be set in this painful way.
+             */
+            acc[property_1.property] = defaultPropertySetting(app, property_1);
+            // @ts-ignore
+            shaderMaterial[property_1.property] = acc[property_1.property];
+        }
+        return acc;
+    }, {});
+    return props;
+};
+export var physicalNode = function (id, name, groupId, position, uniforms, stage, nextStageNodeId) {
+    return prepopulatePropertyInputs({
+        id: id,
+        name: name,
+        groupId: groupId,
+        position: position,
+        type: EngineNodeType.physical,
+        config: {
+            uniforms: uniforms,
+            version: 3,
+            mangle: false,
+            preprocess: true,
+            properties: [
+                property('Color', 'diffuse', 'rgb'),
+                // Object is black while using these
+                // property('Emissive', 'emissive', 'rgb'),
+                // property('Emissive Intensity', 'emissiveIntensity', 'number'),
+                // property('Emissive Map', 'emissiveMap', 'texture'),
+                property('Diffuse Map', 'diffuseMap', 'texture', 'filler_texture_diffuseMap'),
+                property('Normal Map', 'normalMap', 'texture', 'filler_texture_normalMap'),
+                property('Bumpiness', 'bumpiness', 'number'),
+                property('Specular', 'specular', 'rgb'),
+                property('Glosiness', 'gloss', 'number'),
+                property('Opacity', 'opacity', 'number'),
+                property('Opacity Map', 'opacityMap', 'texture'),
+                property('Metalness', 'metalness', 'number'),
+                property('Reflectivity', 'reflectivity', 'number'),
+                property('Refraction', 'refraction', 'number'),
+                property('Refraction Index', 'refractionIndex', 'number'),
+                // property('Bump Map', 'bumpTexture', 'texture', 'filler_bumpSampler'),
+                // property('Metalness', 'metallic', 'number'),
+                // property('Roughness', 'roughness', 'number'),
+                // property('Env Map', 'environmentTexture', 'samplerCube'),
+                // property('Reflection Texture', 'reflectionTexture', 'samplerCube'),
+                // property('Refraction Texture', 'refractionTexture', 'samplerCube'),
+                // property('Index Of Refraction', 'indexOfRefraction', 'number'),
+                // property('Alpha', 'alpha', 'number'),
+                // property('Direct Intensity', 'directIntensity', 'number'),
+                // property('Environment Intensity', 'environmentIntensity', 'number'),
+                // property('Camera Exposure', 'cameraExposure', 'number'),
+                // property('Camera Contrast', 'cameraContrast', 'number'),
+                // property('Micro Surface', 'microSurface', 'number'),
+                // property('Reflectivity Color', 'reflectivityColor', 'rgb'),
+            ],
+            hardCodedProperties: physicalDefaultProperties,
+            strategies: [
+                uniformStrategy(),
+                stage === 'fragment'
+                    ? texture2DStrategy()
+                    : namedAttributeStrategy('vertex_position'),
+            ],
+        },
+        inputs: [],
+        outputs: [
+            {
+                name: 'vector4',
+                category: 'data',
+                id: '1',
+            },
+        ],
+        source: '',
+        stage: stage,
+        nextStageNodeId: nextStageNodeId,
+    });
+};
+export var toonNode = function (id, name, groupId, position, uniforms, stage, nextStageNodeId) {
+    return prepopulatePropertyInputs({
+        id: id,
+        name: name,
+        groupId: groupId,
+        position: position,
+        type: EngineNodeType.toon,
+        config: {
+            uniforms: uniforms,
+            version: 3,
+            preprocess: true,
+            mangle: false,
+            properties: [
+                property('Color', 'color', 'rgb', 'uniform_diffuse'),
+                property('Texture', 'map', 'texture', 'filler_map'),
+                property('Gradient Map', 'gradientMap', 'texture', 'filler_gradientMap'),
+                property('Normal Map', 'normalMap', 'texture', 'filler_normalMap'),
+                property('Normal Scale', 'normalScale', 'vector2'),
+                property('Displacement Map', 'displacementMap', 'texture'),
+                property('Env Map', 'envMap', 'samplerCube'),
+            ],
+            strategies: [
+                uniformStrategy(),
+                stage === 'fragment'
+                    ? texture2DStrategy()
+                    : namedAttributeStrategy('position'),
+            ],
+        },
+        inputs: [],
+        outputs: [
+            {
+                name: 'vector4',
+                category: 'data',
+                id: '1',
+            },
+        ],
+        source: '',
+        stage: stage,
+        nextStageNodeId: nextStageNodeId,
+    });
+};
+export var mIdx = 0;
+var id = function () { return mIdx++; };
+var nodeCacheKey = function (graph, node) {
+    return ('[ID:' +
+        node.id +
+        'Edges:' +
+        graph.edges
+            .filter(function (edge) { return edge.to === node.id; })
+            .map(function (edge) { return "(".concat(edge.to, "->").concat(edge.input, ")"); })
+            .sort()
+            .join(',') +
+        ']'
+    // Currently excluding node inputs because these are calculated *after*
+    // the onbeforecompile, so the next compile, they'll all change!
+    // node.inputs.map((i) => `${i.id}${i.bakeable}`)
+    );
+};
+var programCacheKey = function (engineContext, graph, node, sibling) {
+    var app = engineContext.runtime.app;
+    var lights = app.root
+        .findComponents('light')
+        .map(function (l) { return l.type; });
+    return ([node, sibling]
+        .sort(function (a, b) { return a.id.localeCompare(b.id); })
+        .map(function (n) { return nodeCacheKey(graph, n); })
+        .join('-') +
+        '|Lights:' +
+        lights.join(',') +
+        '|Envtex:' +
+        [app.scene.envAtlas, app.scene.prefilteredCubemaps].join(','));
+};
+var cacher = function (engineContext, graph, node, sibling, newValue) { return __awaiter(void 0, void 0, void 0, function () {
+    var cacheKey, materialData;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                cacheKey = programCacheKey(engineContext, graph, node, sibling);
+                if (engineContext.runtime.cache.data[cacheKey]) {
+                    log("Cache hit \"".concat(cacheKey, "\""));
+                }
+                else {
+                    log("Cache miss \"".concat(cacheKey, "\""));
+                }
+                return [4 /*yield*/, (engineContext.runtime.cache.data[cacheKey] ||
+                        newValue())];
+            case 1:
+                materialData = _a.sent();
+                log("Material cache \"".concat(cacheKey, "\" is now"), materialData);
+                engineContext.runtime.cache.data[cacheKey] = materialData;
+                engineContext.runtime.engineMaterial = materialData.material;
+                // TODO: We mutate the nodes here, can we avoid that later?
+                node.source =
+                    node.stage === 'fragment' ? materialData.fragment : materialData.vertex;
+                sibling.source =
+                    sibling.stage === 'fragment' ? materialData.fragment : materialData.vertex;
+                return [2 /*return*/];
+        }
+    });
+}); };
+var onBeforeCompileMegaShader = function (engineContext, graph, node, sibling) { return __awaiter(void 0, void 0, void 0, function () {
+    var _a, appUn, sceneData, app, pbrName, shaderMaterial, newProperties, applied, vertexSource, fragmentSource, origMat;
+    return __generator(this, function (_b) {
+        _a = engineContext.runtime, appUn = _a.app, sceneData = _a.sceneData;
+        app = appUn;
+        pbrName = "engine_pbr".concat(id());
+        shaderMaterial = new pc.StandardMaterial();
+        shaderMaterial.name = pbrName;
+        newProperties = __assign({}, (node.config.hardCodedProperties ||
+            sibling.config.hardCodedProperties ||
+            {}));
+        Object.assign(shaderMaterial, newProperties);
+        applied = applyPlayMaterialProperties(engineContext, shaderMaterial, app, graph, node, sibling);
+        log('Engine megashader initial properties', __assign(__assign({}, newProperties), applied));
+        // This is a hack to force the material to regenerate. The chunks are used
+        // internally in playcanvas to generate the material cache key. If you use
+        // a real chunk, it messes up the GLSL. So this introduces a fake chunk that
+        // isn't used in the GLSL, but forces a new material to generate. The code
+        // path I'm hacking through is:
+        // render() -> renderForward() -> updatePassShader() -> getShaderVariant() ->
+        // library.getProgram() -> generateShaderDefinition()
+        // TODO: Try using the new hook https://github.com/playcanvas/engine/pull/5524
+        shaderMaterial.chunks.engineHackSource = "".concat(Math.random());
+        // I had this here before for testing, I commented it out trying to figure out
+        // the opacity issue while working on Playcanvas. Can remove if I ever figure
+        // out the opacity issue
+        // shaderMaterial.clearVariants();
+        shaderMaterial.update();
+        origMat = sceneData.mesh.render.meshInstances[0].material;
+        sceneData.mesh.render.meshInstances[0].material = shaderMaterial;
+        // Force shader compilation
+        app.render();
+        sceneData.mesh.render.meshInstances[0].material = origMat;
+        return [2 /*return*/, new Promise(function (resolve) {
+                var variants = shaderMaterial.variants;
+                if (variants.size === 1) {
+                    var _a = __read(variants.entries().next().value, 2), untypedVariant = _a[1];
+                    var variant = untypedVariant;
+                    var _b = variant.definition, fshader = _b.fshader, vshader = _b.vshader;
+                    fragmentSource = fshader;
+                    vertexSource = vshader;
+                    engineContext.runtime.cache.nodes[node.id] = {
+                        fragment: fshader,
+                        vertex: vshader,
+                    };
+                }
+                else {
+                    console.error('Bad variants!', variants);
+                }
+                resolve({
+                    material: shaderMaterial,
+                    fragment: fragmentSource,
+                    vertex: vertexSource,
+                });
+            })];
+    });
+}); };
+// TODO: NEED TO DO SAME THREE MANGLIGN STEP HERE
+var megaShaderMainpulateAst = function (engineContext, engine, graph, node, ast, inputEdges) {
+    var programAst = ast;
+    var mainName = 'main' || nodeName(node);
+    if (node.stage === 'vertex') {
+        if (doesLinkThruShader(graph, node)) {
+            returnGlPositionHardCoded(mainName, programAst, 'vec3', 'transformed');
+        }
+        else {
+            returnGlPosition(mainName, programAst);
+        }
+    }
+    // We specify engine nodes are mangle: false, which is the graph step that
+    // handles renaming the main fn, so we have to do it ourselves
+    mangleMainFn(programAst, node);
+    return programAst;
+};
+var evaluateNode = function (node) {
+    if (node.type === 'number') {
+        return parseFloat(node.value);
+        // Apparently PlayCanvas can't use new pc.Vec2(...), etc for vector uniforms,
+        // and instead requires arrays? But can (maybe) use a pc.Color() for other
+        // uniforms? I need to test the color assumption, but it's weird PC doesn't
+        // use its own types for uniforms
+    }
+    else if (node.type === 'texture') {
+        return node;
+    }
+    else if (node.type === 'vector2') {
+        return [parseFloat(node.value[0]), parseFloat(node.value[1])];
+    }
+    else if (node.type === 'vector3') {
+        return [
+            parseFloat(node.value[0]),
+            parseFloat(node.value[1]),
+            parseFloat(node.value[2]),
+        ];
+    }
+    else if (node.type === 'vector4') {
+        return [
+            parseFloat(node.value[0]),
+            parseFloat(node.value[1]),
+            parseFloat(node.value[2]),
+            parseFloat(node.value[3]),
+        ];
+    }
+    else if (node.type === 'rgb') {
+        return [
+            parseFloat(node.value[0]),
+            parseFloat(node.value[1]),
+            parseFloat(node.value[2]),
+        ];
+    }
+    else if (node.type === 'rgba') {
+        return [
+            parseFloat(node.value[0]),
+            parseFloat(node.value[1]),
+            parseFloat(node.value[2]),
+            parseFloat(node.value[3]),
+        ];
+    }
+    else {
+        return node.value;
+    }
+};
+export var playengine = {
+    name: 'playcanvas',
+    importers: importers,
+    mergeOptions: {
+        includePrecisions: true,
+        includeVersion: false,
+    },
+    evaluateNode: evaluateNode,
+    constructors: (_a = {},
+        _a[EngineNodeType.physical] = physicalNode,
+        _a[EngineNodeType.toon] = toonNode,
+        _a),
+    // TODO: Move into core based on engine shader scrape
+    preserve: new Set([
+        // Ugh I gotta stop doing this
+        'vPositionW',
+        'vertex_normal',
+        'vertex_position',
+        'vertex_texCoord0',
+        'vertex_texCoord1',
+        'matrix_model',
+        'matrix_viewProjection',
+        'matrix_normal',
+        'normal',
+        'uv',
+        'uv2',
+        // varyings
+        'vUv0',
+        'time',
+    ]),
+    parsers: (_b = {},
+        _b[NodeType.SOURCE] = {
+            manipulateAst: function (engineContext, engine, graph, node, ast, inputEdges) {
+                var programAst = ast;
+                var mainName = 'main' || nodeName(node);
+                // This hinges on the vertex shader calling vec3(p)
+                if (node.stage === 'vertex') {
+                    if (doesLinkThruShader(graph, node)) {
+                        returnGlPositionVec3Right(mainName, programAst);
+                    }
+                    else {
+                        returnGlPosition(mainName, programAst);
+                    }
+                }
+                return ast;
+            },
+        },
+        _b[EngineNodeType.physical] = {
+            onBeforeCompile: function (graph, engineContext, node, sibling) {
+                return cacher(engineContext, graph, node, sibling, function () {
+                    return onBeforeCompileMegaShader(engineContext, graph, node, sibling);
+                });
+            },
+            manipulateAst: megaShaderMainpulateAst,
+        },
+        _b),
+};
+playengine.parsers[EngineNodeType.toon] =
+    playengine.parsers[EngineNodeType.physical];
+playengine.parsers[EngineNodeType.phong] =
+    playengine.parsers[EngineNodeType.physical];

package/dist/plugins/three/importers.js

@@ -0,0 +1,15 @@
+import { renameBindings } from '@shaderfrog/glsl-parser/parser/utils';
+var importers = {
+    babylon: {
+        convertAst: function (ast, type) {
+            renameBindings(ast.scopes[0], function (name) {
+                return name === 'vMainUV1' ? 'vUv' : name === 'vNormalW' ? 'vNormal' : name;
+            });
+        },
+        nodeInputMap: {},
+        edgeMap: {
+            bumpSampler: 'normalMap',
+        },
+    },
+};
+export default importers;

package/{src/plugins/three/index.ts → dist/plugins/three/index.js}

@@ -1,3 +1,2 @@
 import { threngine } from './threngine';
-
 export { threngine as engine };