メインコンテンツまでスキップ

EffectTextureMaker

EffectTextureMaker は,ブラウザで主にエフェクト用のテクスチャを作成することができるものです.様々な種類のテンプレートを選択して,適当にパラメータを調整するだけで,簡単かつ直感的にテクスチャを作成することができます.また,アニメーションにも対応しており,特定のフレームごとにレンダリングした画像をまとめたスプライトシートも作成することができます.さらに詳しいことは この記事 を参照してください.

機能

  • 68種類のエフェクトテンプレートがあります
  • セーブ・ロード機能
  • ノーマルマップを作成することができます
  • スプライトシートを作成することができます
  • ブラウザがサポートしている画像形式で保存することができます
  • 最大 2048 サイズに対応しています
  • カラーバランス調整により,色の指定をハイライト,中間,シャドウの3つに分けて行うことができます

ライセンス

EffectTextureMaker で作成したテクスチャは商用・非商用問わず,自由に使ってもらって構いません.作成したテクスチャは CC0 (Creative Commons Zero) が適用されます.

EffectTextureMaker

使い方

  1. 解像度を決める (resolution)
  2. 生成するエフェクトの種類を選択する (type)
  3. パラメータを適当に調整する (Parameters)
  4. Saveボタンを押すとレンダリングした画像が開きますので保存してください.

time

時間.アニメーションするタイプのエフェクトで使えます.

animate

エフェクトをアニメーションします.一部のエフェクトで使えます.

polarConversion

エフェクトを極座標変換します.

Toon

トゥーンシェーディングします.暗い部分(dark)、明るい部分(light)、それ以外の3諧調です.

項目意味
enable有効にします
dark暗い部分の割合
light明るい部分の割合

Tiling

エフェクトの上下左右をループするように処理します.(イマイチです)

項目意味
enable有効にします
radial mask境界の交わり具合を調整します

NormalMap

法線マップに変換します.輝度を高さとして勾配を求めます.

項目意味
generate有効にします
cHeightScale高さのスケール

ColorBalance

エフェクトにカラーバランスの色調補正をかけます.

項目意味
Shadows暗い部分
Midtones中間の部分
Highlights明るい部分
resetColorBalance初期値に戻します

SpriteSheet

アニメーションするエフェクトを1枚のテクスチャに並べて生成します(スプライトシート).

項目意味
dimension画像の分割数です
timeアニメーションの開始時間
timeLengthアニメーションの長さ
timeStepステップ時間

例えば、以下のような設定だとします:

  • resolution : 512
  • dimesion : 8
  • time : 0
  • timeLength : 3
  • timeStep : 0.1

これは 512x512 の画像の中に最大で 16 個のスプライトを描画します.つまり1つのスプライトのサイズは 64x64 (512/8)で最大64個となります. 0 を開始時間として、 0.1 秒ごとに1つのスプライトを描画し、それを 3 秒分行います.スプライトの最大数に達すればそこで描画が終了します.

SpriteSheet

Image with alpha (PNG)

アルファチャンネル付きのPNG形式で保存します.これは実験的な機能です. また、スプライトシートの保存には使えません.

項目意味
threshold0 (黒)に切り捨てる閾値
tolerance1 (白)に切り上げる下限値
blur全体にブラー処理をかける強さ
visibleアルファを確認します
Save (PNG)保存します
Download (PNG)ダウンロードします

Save と Download の2種類がありますが、ブラウザ互換のために用意しているだけなのでどちらを使っても構いません.

セーブとロード

JSON形式で保存したり読み込んだりすることができます.それぞれコントローラーの上にある saveload ボタンを押してください.

ギャラリー

Wood
Wood
Circle
Circle
Solar
Solar
Corona
Corona
Spark
Spark
Ring
Ring
Gradation
Gradation
GradationLine
GradationLine
Flash
Flash
Cone
Cone
Flower
Flower
FlowerFun
FlowerFun
WaveRing
WaveRing
Smoke
Smoke
Flame
Flame
FlameEye
FlameEye
Fire
Fire
Cell
Cell
Lightning
Lightning
Flare
Flare
Flare2
Flare2
Flare3
Flare3
LensFlare
LensFlare
Sun
Sun
MagicCircle
MagicCircle
Mandara
Mandara
Explosion
Explosion
Explosion2
Explosion2
Cross
Cross
Laser
Laser
Laser2
Laser2
Light
Light
Cloud
Cloud
Cloud2
Cloud2
PerlinNoise
PerlinNoise
SeemlessNoise
SeemlessNoise
BooleanNoise
BooleanNoise
CellNoise
CellNoise
TurbulentNoise
TurbulentNoise
FbmNoise
FbmNoise
FbmNoise2
FbmNoise2
FbmNoise3
FbmNoise3
RandomNoise
RandomNoise
VoronoiNoise
VoronoiNoise
SparkNoise
SparkNoise
MarbleNoise
MarbleNoise
TessNoise
TessNoise
GradientNoise
GradientNoise
Checker
Checker
FlameLance
FlameLance
Bonfire
Bonfire
Snow
Snow
DiamondGear
DiamondGear
BrushStroke
BrushStroke
Speckle
Speckle
Bubbles
Bubbles
Pentagon
Pentagon
Grunge
Grunge
Energy
Energy
InkSplat
InkSplat
Particle
Particle
Electric
Electric
Caustics
Caustics
Squiggles
Squiggles
WaterTurbulence
WaterTurbulence
Trabeculum
Trabeculum
BinaryMatrix
BinaryMatrix
CoherentNoise
CoherentNoise

CoherentNoise

シームレスなノイズテクスチャを生成します.

  • NoiseFrequency の値は Repeat の数で割り切れる値にしてください
  • Gain を最大にすると、2値化することができます.また、Bias パラメータで調整することができます.
  • VoronoiCellVoronoiNoise が有効でないと効果がありません.
  • RidgeOffsetRidge が有効でないと効果がありません.
  • ScaleShift は値を [-1,1] から [0,1] にマッピングする効果です.
  • GradientNoise は Perlin Noise です.
  • Bias はノイズの平均をシフトする効果です.
  • Gain はノイズの鋭さを調整します.

Tips

次のような画像を作るときのパラメータです.

Tips01
  • type: GradientLine
  • Direction X: 0
  • Direction Y: 1
  • Offset: 0
  • PowerExponent: 5
  • polarConversion: 有効

お問い合わせ

mebiusbox[at]gmail[dot].com までご連絡ください.

免責事項

以下を参照してください.

プライバシーポリシー

コピーライト

Copyright (C) 2017-2024 mebiusbox software.

Changes

  • 2024-03-26:
    • CoherentNoise を追加しました.
    • ノイズ球が正常に描画できない不具合を修正
    • パラメータのリセットボタンを追加
  • 2023-12-31: BinaryMatrix を追加しました.
  • 2023-12-12: スプライトシートをアルファチャンネル付きのPNG形式で保存できるようになりました.
  • 2023-11-23: アルファチャンネルを追加したPNG形式で保存できるようになりました(実験的).メニューには「Save (PNG)」と「Download (PNG)」がありますが機能は同じです.これはブラウザ互換のために2種類用意しました.