View matrix not passed to shader when using ShaderMaterial

I’m writing custom shaders and trying to get the matrices into shaders. It works just fine for worldViewProjection but not for view. As far as I can tell, all the values of view are just 0.0.

But according to the Building Shaders With Babylon.js article, I read it that all the uniform matrices would be set by Babylon.js:

BABYLON.ShaderMaterial can also handle the following matrices for you:

  • world,
  • view,
  • projection,
  • worldView,
  • worldViewProjection.

No need for math anymore. For instance, each time you execute sphere.rotation.y += 0.05, the world matrix of the sphere will be generated for you and transmitted to the GPU.

In the following, I post a minimal example of the problematic source code. It only produces the correct result if line #59 is commented-in, i.e., this one:

planeMaterial.setMatrix("view", camera.getViewMatrix());

but if it is commented-out, the plane is just black, which is not what I would expect.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../style.css">
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <title>Custom Shaders... view not working</title>
    <canvas id="renderCanvas"></canvas>
    <script type="text/javascript">
      const canvas = document.getElementById('renderCanvas');
      var engine = new BABYLON.Engine(canvas, true, {preserveDrawingBuffer: true, stencil: true});
      var scene = new BABYLON.Scene(engine);
      var camera = addCameraToScene();

      var ground = BABYLON.Mesh.CreateGround('ground1', 10, 10, 100, scene, false);

      BABYLON.Effect.ShadersStore["customVertexShader"] = `
      precision highp float;

      attribute vec3 position;
      uniform mat4 world;
      uniform mat4 view;
      uniform mat4 worldViewProjection;

      varying vec3 vColor;

      void main() {
          vec4 p = vec4(position, 1.);
          gl_Position = worldViewProjection * p;

          vColor = mat3(view) *;
      BABYLON.Effect.ShadersStore["customFragmentShader"] = `
      precision highp float;

      varying vec3 vColor;

      void main() {
          gl_FragColor = vec4(vColor ,1.);
      const shaderMaterial = new BABYLON.ShaderMaterial("custom", scene, "./custom", {
        attributes: ["position"],
        uniforms: ["view", "worldViewProjection"]
      var planeMaterial = new BABYLON.ShaderMaterial('custom', scene, 'custom', { });

      ground.material = planeMaterial;

      // run the render loop
          planeMaterial.diffuseColor = new BABYLON.Color3(1, 0, 0, 1);
          // planeMaterial.setMatrix("view", camera.getViewMatrix());

      // the canvas/window resize event handler
      window.addEventListener('resize', function(){

      // ----------------------------------------------------------------------
      // --- vvv -------------------- FUNCTIONS ----------------------- vvv ---

      function addCameraToScene() {
        // Create an arcball camera, let it focus on (0,0,0), position it at a distance of 10, at rotation of PI/3:
        var camera = new BABYLON.ArcRotateCamera('camera1', 0, 1.047, 10, new BABYLON.Vector3(0, 0, 0), scene);
        // Target the camera to scene origin:
        // Attach the camera to the canvas:
        camera.attachControl(canvas, false);
        camera.lowerBetaLimit = 0.2; // Almost peak
        camera.upperBetaLimit = 1.5; // Almost straight down to xz-plane
        camera.lowerRadiusLimit = 3; // Not tooo close
        camera.minZ = 1.0;
        return camera;

You should assign shaderMaterial instead. planeMaterial is not constructed correctly, the array of uniforms is not passed to the constructor, so a default array is used (["worldViewProjection"]), and this array does not contain the view matrix.