THREE.JS (半透明シェーダー)



地球時計3JS - 半透明シェーダー -.htm

地球時計3JS - 半透明シェーダー -.zip




zipを解凍したらthreejsフォルダにthree.jsライブラリ(three.js-master.zip)
を解凍してください
HTML、JSは./WORK/javascripts/threejs/examples/
にあります


半透明シェーダーを作りました
./WORK/javascripts/threejs/examples/TransparentShader.js
です


import * as THREE from '../build/three.module.js';
import { TransparentShader } from './TransparentShader.js';

...省略...

  const geometry = new THREE.SphereGeometry( 30, 128, 128 );

  const shader = TransparentShader;
  const backuniforms = THREE.UniformsUtils.clone( shader.uniforms );
  const tex = new THREE.TextureLoader().load( '../../../texture/earth.png' );
  const backmaterial = new THREE.ShaderMaterial( {
    uniforms: backuniforms,
    vertexShader: shader.vertexShader,
    fragmentShader: shader.fragmentShader,
    side: THREE.BackSide,
    transparent: true,
    opacity: 0.5,
    blending: THREE.CustomBlending,
    blendSrc: THREE.SrcAlphaFactor,
    blendSrcAlpha: 0.5,
    blendEquation: THREE.MaxEquation,
    blendDst: THREE.SrcAlphaFactor
  } );
  backmaterial.uniforms[ 'Threshold' ].value = 0.5;
  backmaterial.uniforms[ 'Fill' ].value = true;
  backmaterial.uniforms[ 'Color' ].value = new THREE.Vector4(0.5, 0.5, 0.5, 1.0);
  backmaterial.uniforms[ 'Sampler' ].value = tex;
  backmaterial.uniforms[ 'Opacity' ].value = 0.5;
  backmaterial.uniforms[ 'uDirLightPos' ].value = dlight.position;
  backmaterial.uniforms[ 'uDirLightColor' ].value = new THREE.Vector4(dlight.color.r, dlight.color.g, dlight.color.b, 1.0);
  backmaterial.uniforms[ 'uDirLightIntensity' ].value = 1.0;
  backmaterial.uniforms[ 'uAmbientLightColor' ].value = new THREE.Vector4(alight.color.r, alight.color.g, alight.color.b, 1.0);

  meshB = new THREE.Mesh( geometry, backmaterial );
  meshB.renderOrder = 1;


  const frontuniforms = THREE.UniformsUtils.clone( shader.uniforms );
  const frontmaterial = new THREE.ShaderMaterial( {
    uniforms: frontuniforms,
    vertexShader: shader.vertexShader,
    fragmentShader: shader.fragmentShader,
    side: THREE.FrontSide,
    transparent: true,
    opacity: 0.5,
    blending: THREE.CustomBlending,
    blendSrc: THREE.SrcAlphaFactor,
    blendSrcAlpha: 0.5,
    blendEquation: THREE.MaxEquation,
    blendDst: THREE.SrcAlphaFactor
  } );
  frontmaterial.uniforms[ 'Threshold' ].value = 0.1;
  frontmaterial.uniforms[ 'Fill' ].value = false;
  frontmaterial.uniforms[ 'Color' ].value = new THREE.Vector4(0.5, 0.5, 0.5, 1.0);
  frontmaterial.uniforms[ 'Sampler' ].value = tex;
  frontmaterial.uniforms[ 'Opacity' ].value = 0.5;
  frontmaterial.uniforms[ 'uDirLightPos' ].value = dlight.position;
  frontmaterial.uniforms[ 'uDirLightColor' ].value = new THREE.Vector4(dlight.color.r, dlight.color.g, dlight.color.b, 1.0);
  frontmaterial.uniforms[ 'uDirLightIntensity' ].value = 1.0;
  frontmaterial.uniforms[ 'uAmbientLightColor' ].value = new THREE.Vector4(alight.color.r, alight.color.g, alight.color.b, 1.0);

  meshF = new THREE.Mesh( geometry, frontmaterial );
  meshF.renderOrder = 2;

  scene.add( meshB );
  scene.add( meshF );

...省略...


使い方は↑のように使ってください

引数
ベタアルファ閾値:float:material.uniforms[ 'Threshold' ].value
ベタフィル:bool:material.uniforms[ 'Fill' ].value
ベタ色:THREE.Vector4:material.uniforms[ 'Color' ].value
テクスチャ:THREE.Texture:material.uniforms[ 'Sampler' ].value
透明度:float:material.uniforms[ 'Opacity' ].value
ディレクションライト場所:THREE.Vector3:material.uniforms[ 'uDirLightPos' ].value
ディレクションライト色:THREE.Vector4:material.uniforms[ 'uDirLightColor' ].value
ディレクションライト光度:THREE.Vector4:material.uniforms[ 'uDirLightIntensity' ].value
アンビエントライト色:THREE.Vector4:material.uniforms[ 'uAmbientLightColor' ].value

Threshold == 0.0
のベタはライティングが適用されます







THREEJS - CUBE - 半透明シェーダー -.htm

THREEJS - CUBE - 半透明シェーダー -.zip





import * as THREE from '../build/three.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { TransparentShader } from './TransparentShader.js';

...省略...

  const geometry = new THREE.BoxGeometry( 10, 10, 10 );

  const shader = TransparentShader;
  const backuniforms = THREE.UniformsUtils.clone( shader.uniforms );
  const tex = new THREE.TextureLoader().load( '../../../img/maggi.png' );
  const backmaterial = new THREE.ShaderMaterial( {
    uniforms: backuniforms,
    vertexShader: shader.vertexShader,
    fragmentShader: shader.fragmentShader,
    side: THREE.BackSide,
    transparent: true,
    opacity: 0.5,
    blending: THREE.CustomBlending,
    blendSrc: THREE.SrcAlphaFactor,
    blendSrcAlpha: 0.5,
    blendEquation: THREE.AddEquation,
    blendDst: THREE.OneMinusSrcAlphaFactor
  } );
  backmaterial.uniforms[ 'Threshold' ].value = 0.1;
  backmaterial.uniforms[ 'Fill' ].value = true;
  backmaterial.uniforms[ 'Color' ].value = new THREE.Vector4(0.2, 0.6, 0.6, 1.0);
  backmaterial.uniforms[ 'Sampler' ].value = tex;
  backmaterial.uniforms[ 'Opacity' ].value = 0.5;
  backmaterial.uniforms[ 'uDirLightPos' ].value = dlight.position;
  backmaterial.uniforms[ 'uDirLightColor' ].value = new THREE.Vector4(dlight.color.r, dlight.color.g, dlight.color.b, 1.0);
  backmaterial.uniforms[ 'uDirLightIntensity' ].value = 2.0;
  backmaterial.uniforms[ 'uAmbientLightColor' ].value = new THREE.Vector4(alight.color.r, alight.color.g, alight.color.b, 1.0);

  const backuniforms2 = THREE.UniformsUtils.clone( shader.uniforms );
  const backmaterial2 = new THREE.ShaderMaterial( {
    uniforms: backuniforms2,
    vertexShader: shader.vertexShader,
    fragmentShader: shader.fragmentShader,
    side: THREE.BackSide,
    transparent: true,
    opacity: 0.5,
    blending: THREE.CustomBlending,
    blendSrc: THREE.SrcAlphaFactor,
    blendSrcAlpha: 0.5,
    blendEquation: THREE.AddEquation,
    blendDst: THREE.SrcAlphaFactor
  } );
  backmaterial2.uniforms[ 'Threshold' ].value = 0.0;
  backmaterial2.uniforms[ 'Fill' ].value = true;
  backmaterial2.uniforms[ 'Color' ].value = new THREE.Vector4(0.3, 0.5, 0.1, 0.5);
  backmaterial2.uniforms[ 'Sampler' ].value = null;
  backmaterial2.uniforms[ 'Opacity' ].value = 0.5;
  backmaterial2.uniforms[ 'uDirLightPos' ].value = dlight.position;
  backmaterial2.uniforms[ 'uDirLightColor' ].value = new THREE.Vector4(dlight.color.r, dlight.color.g, dlight.color.b, 1.0);
  backmaterial2.uniforms[ 'uDirLightIntensity' ].value = 2.0;
  backmaterial2.uniforms[ 'uAmbientLightColor' ].value = new THREE.Vector4(alight.color.r, alight.color.g, alight.color.b, 1.0);

  const frontuniforms = THREE.UniformsUtils.clone( shader.uniforms );
  const frontmaterial = new THREE.ShaderMaterial( {
    uniforms: frontuniforms,
    vertexShader: shader.vertexShader,
    fragmentShader: shader.fragmentShader,
    side: THREE.FrontSide,
    transparent: true,
    opacity: 0.5,
    blending: THREE.CustomBlending,
    blendSrc: THREE.SrcAlphaFactor,
    blendSrcAlpha: 0.5,
    blendEquation: THREE.AddEquation,
    blendDst: THREE.OneMinusSrcAlphaFactor
  } );
  frontmaterial.uniforms[ 'Threshold' ].value = 0.1;
  frontmaterial.uniforms[ 'Fill' ].value = false;
  frontmaterial.uniforms[ 'Color' ].value = new THREE.Vector4(0.5, 0.5, 0.5, 1.0);
  frontmaterial.uniforms[ 'Sampler' ].value = tex;
  frontmaterial.uniforms[ 'Opacity' ].value = 0.5;
  frontmaterial.uniforms[ 'uDirLightPos' ].value = dlight.position;
  frontmaterial.uniforms[ 'uDirLightColor' ].value = new THREE.Vector4(dlight.color.r, dlight.color.g, dlight.color.b, 1.0);
  frontmaterial.uniforms[ 'uDirLightIntensity' ].value = 2.0;
  frontmaterial.uniforms[ 'uAmbientLightColor' ].value = new THREE.Vector4(alight.color.r, alight.color.g, alight.color.b, 1.0);


  const frontuniforms2 = THREE.UniformsUtils.clone( shader.uniforms );
  const frontmaterial2 = new THREE.ShaderMaterial( {
    uniforms: frontuniforms2,
    vertexShader: shader.vertexShader,
    fragmentShader: shader.fragmentShader,
    side: THREE.FrontSide,
    transparent: true,
    opacity: 0.5,
    blending: THREE.CustomBlending,
    blendSrc: THREE.SrcAlphaFactor,
    blendSrcAlpha: 0.5,
    blendEquation: THREE.AddEquation,
    blendDst: THREE.SrcAlphaFactor
  } );
  frontmaterial2.uniforms[ 'Threshold' ].value = 0.0;
  frontmaterial2.uniforms[ 'Fill' ].value = true;
  frontmaterial2.uniforms[ 'Color' ].value = new THREE.Vector4(0.1, 0.3, 0.5, 1.0);
  frontmaterial2.uniforms[ 'Sampler' ].value = null;
  frontmaterial2.uniforms[ 'Opacity' ].value = 0.5;
  frontmaterial2.uniforms[ 'uDirLightPos' ].value = dlight.position;
  frontmaterial2.uniforms[ 'uDirLightColor' ].value = new THREE.Vector4(dlight.color.r, dlight.color.g, dlight.color.b, 1.0);
  frontmaterial2.uniforms[ 'uDirLightIntensity' ].value = 2.0;
  frontmaterial2.uniforms[ 'uAmbientLightColor' ].value = new THREE.Vector4(alight.color.r, alight.color.g, alight.color.b, 1.0);

  let i;
  for(i = 0; i < 9; i++) {
    meshB = new THREE.Mesh( geometry, backmaterial );
    meshB.position.set(((i % 3) - 1) * 50, 0, Math.floor(i / 3) * 50);
    meshB.renderOrder = 1;
    meshF = new THREE.Mesh( geometry, frontmaterial );
    meshF.position.set(((i % 3) - 1) * 50, 0, Math.floor(i / 3) * 50);
    meshF.renderOrder = 2;

    scene.add( meshB );
    scene.add( meshF );

    boxies.push( meshB );
    boxies.push( meshF );
  }
  for(i = 0; i < 9; i++) {
    meshB2 = new THREE.Mesh( geometry, backmaterial2 );
    meshB2.position.set(((i % 3) - 1) * 50, -25, Math.floor(i / 3) * 50);
    meshB2.renderOrder = 1;
    meshF2 = new THREE.Mesh( geometry, frontmaterial2 );
    meshF2.position.set(((i % 3) - 1) * 50, -25, Math.floor(i / 3) * 50);
    meshF2.renderOrder = 2;

    scene.add( meshB2 );
    scene.add( meshF2 );

    boxies2.push( meshB2 );
    boxies2.push( meshF2 );
  }

...省略...


今回は
blendEquation: THREE.AddEquation
で作りました
適宜アルファブレンディングを変えてくださいね





THREE.JSプログラミング講座
3Dプログラミング講座
NAS6LIB
THREE.JSテスト解説・THREE.JS使い方
THREE.JS examplesをいじってみた(フレネル反射透過シェーダー)
THREE.JS (半透明シェーダー)
THREE.JS 3D演算で必要な計算(具体例)★とても重要★
THREE.JS THREE-VRM をいじってみた

<<prev フレネル反射透過シェーダー : 3D演算で必要な計算(具体例) next>>





戻る