Skip to content

Instantly share code, notes, and snippets.

@Popov72
Created October 24, 2019 12:00
Show Gist options
  • Save Popov72/4c474e5f678e0a3059c19d5682b5be62 to your computer and use it in GitHub Desktop.
Save Popov72/4c474e5f678e0a3059c19d5682b5be62 to your computer and use it in GitHub Desktop.
Babylon playground for simple custom ShaderMaterial
var createScene = function() {
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("Camera", - Math.PI / 2, Math.PI / 4, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
BABYLON.Effect.ShadersStore["customVertexShader"]= `
precision highp float;
// Attributes
attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;
// Uniforms
uniform mat4 worldViewProjection;
uniform float time;
// Varying
varying vec2 vUV;
void main(void) {
vec4 q = vec4(position, 1.0);
vec3 p = q.xyz;
p.x = p.x + sin(2.0 * position.y + time);
p.y = p.y + sin(time + 4.0);
gl_Position = worldViewProjection * vec4(p, 1.0);
vUV = uv;
}`;
BABYLON.Effect.ShadersStore["customFragmentShader"]=`
precision highp float;
varying vec2 vUV;
uniform sampler2D textureSampler;
void main(void) {
gl_FragColor = texture2D(textureSampler, vUV);
}`;
var shaderMaterial = new BABYLON.ShaderMaterial("shader", scene, {
vertex: "custom",
fragment: "custom",
},
{
attributes: ["position", "normal", "uv"],
uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"]
});
var mainTexture = new BABYLON.Texture("textures/amiga.jpg", scene);
shaderMaterial.setTexture("textureSampler", mainTexture);
var box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);
box.material = shaderMaterial;
var time = 0.;
scene.registerBeforeRender(function() {
box.material.setFloat("time", time);
time += 0.01;
});
return scene;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment