Babylon.js - loop through a scene and apply a simple fragment shader to all of the objects

You have a library - a fully loaded 2014 Babylon.js.

You have a fragment shader - let's call it sample.fragment.fx.

You have a scene - loaded ahead of time, possibly from a .babylon JSON file.

Your goal is to assign the fragment shader to every textured object in the scene using a snippet of JavaScript or TypeScript code.

Scoring:

The main multiplier is calculated in the form of one divided by the total number of bytes in the snippet not counting whitespace characters used for formatting.

Additional multipliers (apply one for each condition met) -

*0.5 (bad) - The solution does not reference the "sample" fragment shader by name.

*0.8 (bad) - The solution is presented in TypeScript.

*1.1 (good) - The solution implements a proper for loop (either the for or forEach keyword is used).

*1.2 (good) - The solution intelligently applies the shader only to objects that meet a certain arbitrary criterion, for example: it has texture, or it has a certain prefix in its name.

*1.3 (good) - After all multipliers are applied, the score is greater than 0.008.

This should remain open indefinitely. The highest score wins.

user27016

Posted 2014-07-09T08:00:29.993

Reputation: 11

Answers

In Javascript

// The suffix of all meshes wich should have the shader applied
var suffix = "shader";

//If true, the shader will be applied on this mesh
var predicate = function(mesh) {
    return (
       mesh.material 
       && mesh.name.indexOf(suffix , mesh.name.length - suffix.length) !== -1
    );
};

// Creation of the shader material
var shaderMaterial = new BABYLON.ShaderMaterial("sampleShader", scene, "sample", {
            attributes: ["position"],
            uniforms: ["worldViewProjection"]
            });

// Apply the shader on all meshes
scene.meshes.forEach(function(m) {
    if (predicate(m)) {
        m.material = shaderMaterial;
    }
});

Temechon

Posted 2014-07-09T08:00:29.993

Reputation: 31

Welcome to PPCG.SE! Please add your score to your answer. :) – Martin Ender – 2014-07-09T10:13:09.490

Thanks :) How can I do that ? – Temechon – 2014-07-09T12:19:20.580

1Well, count the non-whitespace characters. There are some online tools for that. I tend to just copy it into a text editor with regex-replace feature and replace \s by nothing to remove all whitespace, then look at how many bytes are left in the file. That's the base score, then you'll have to apply the scoring mechanism described in the challenge. Also you can of course save quite a few bytes by using single-letter variable names instead of suffix, predicate and shaderMaterial. – Martin Ender – 2014-07-09T12:21:39.853

Thank you, and you're right about the variables. I didn't know the scoring was about the file size. I will update my solution accordingly. – Temechon – 2014-07-09T14:06:54.333

var t = new BABYLON.ShaderMaterial("sh", scene, "./sample", {
    attributes: ["uv"], uniforms: ["view"]
});

scene.meshes.forEach(function(m) { m.material = m.material && t; });

score : 1/164 * 1.1 (forEach) * 1.2 (material predicate) = 0.00804 * 1.3 = 0.0104

Raanan W

Posted 2014-07-09T08:00:29.993

Reputation: 121