plunkerでplaycanvas その4

概要

plunkerでplaycanvasやってみた。
shaderやってみた。

参考にしたページ。

写真

サンプルコード

var canvas = document.getElementById("application-canvas");
var app = new pc.Application(canvas);
app.start();
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
app.setCanvasResolution(pc.RESOLUTION_AUTO);
var camera = new pc.Entity();
camera.addComponent("camera", { 
  clearColor: new pc.Color(1.0, 1.0, 1.0) 
});
app.root.addChild(camera);
camera.setPosition(0, 0, 3.0); 
var light = new pc.Entity();
light.addComponent('light');  
light.rotate(45, 0, 0);
app.root.addChild(light);
app.scene.ambientLight = new pc.Color(0.2, 0.2, 0.2);   
var plane = new pc.Entity();
plane.addComponent("model", { 
  type: "plane" 
});
plane.addComponent("script");
app.root.addChild(plane);
plane.rotate(90, 0, 0);
var vs = new pc.Asset("vs", "shader");
var fs = new pc.Asset("fs", "shader");
vs.resource = document.getElementById("vs").textContent;
fs.resource = document.getElementById("fs").textContent;
app.assets.loadFromUrl("AkwjW.jpg", "texture", function(err, asset) {
  plane.script.create("customShader", {
    attributes: {
      vs: vs,
      fs: fs,
      diffuseMap: asset,
      heightMap: asset
    }
  });
});
var CustomShader = pc.createScript('customShader');
CustomShader.attributes.add('vs', {
  type: 'asset',
  assetType: 'shader',
  title: 'Vertex Shader'
});
CustomShader.attributes.add('fs', {
  type: 'asset',
  assetType: 'shader',
  title: 'Fragment Shader'
});
CustomShader.attributes.add('diffuseMap', {
  type: 'asset',
  assetType: 'texture',
  title: 'Diffuse Map'
});
CustomShader.attributes.add('heightMap', {
  type: 'asset',
  assetType: 'texture',
  title: 'Height Map'
});
CustomShader.prototype.initialize = function() {
  this.time = 0;
  var app = this.app;
  var model = this.entity.model.model;
  var gd = app.graphicsDevice;
  var diffuseTexture = this.diffuseMap.resource;
  var heightTexture = this.heightMap.resource;
  var vertexShader = this.vs.resource;
  var fragmentShader = "precision " + gd.precision + " float;\n";
  fragmentShader = fragmentShader + this.fs.resource;
  var shaderDefinition = {
    attributes: {
      aPosition: pc.SEMANTIC_POSITION,
      aUv0: pc.SEMANTIC_TEXCOORD0
    },
    vshader: vertexShader,
    fshader: fragmentShader
  };
  this.shader = new pc.Shader(gd, shaderDefinition);
  this.material = new pc.Material();
  this.material.setShader(this.shader);
  this.material.setParameter('uTime', 0);
  this.material.setParameter('uDiffuseMap', diffuseTexture);
  this.material.setParameter('uHeightMap', heightTexture);
  model.meshInstances[0].material = this.material;
};
CustomShader.prototype.update = function(dt) {
  this.time += dt;
  var t = (this.time % 2);
  if (t > 1) 
  {
    t = 1 - (t - 1);
  }
  if (this.material) 
  {
    this.material.setParameter('uTime', t);
  }
};

成果物

以上。