Creative Dev Blog

3D・WebGL寄り

Bokeh Gradient WebGL Hero

淡いボケ、円形アクセント、ゆるいライン模様で、導入セクションに奥行きを足すWebGL背景表現です。

Y

Yutaka Kizaki

@junkbranding

2026年5月26日

読了時間: 5分

構成 / File Structure

</>Code Viewer

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

import { createBokehProgram } from './webgl/createBokehProgram.js'

function Demo() {
  const canvasRef = React.useRef(null)
  const mouseRef = React.useRef({ x: 0.5, y: 0.5 })
  const [status, setStatus] = React.useState('loading')
  const [message, setMessage] = React.useState('')

React.useEffect(() => {
    const canvas = canvasRef.current
    let isMounted = true
    let frameId = 0
    let resizeObserver

try {
      if (!canvas) {
        throw new Error('Canvasを初期化できませんでした')
      }

const gl = canvas.getContext('webgl', {
        alpha: false,
        antialias: true,
        powerPreference: 'high-performance',
      })

if (!gl) {
        throw new Error('WebGLを利用できません')
      }

const program = createBokehProgram(gl)
      const positionBuffer = gl.createBuffer()
      const positionLocation = gl.getAttribLocation(program, 'a_position')
      const resolutionLocation = gl.getUniformLocation(program, 'u_resolution')
      const timeLocation = gl.getUniformLocation(program, 'u_time')
      const mouseLocation = gl.getUniformLocation(program, 'u_mouse')

gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
      gl.bufferData(
        gl.ARRAY_BUFFER,
        new Float32Array([-1, -1, 3, -1, -1, 3]),
        gl.STATIC_DRAW
      )

function resize() {
        const ratio = Math.min(window.devicePixelRatio || 1, 1.5)
        const width = Math.max(1, Math.floor(canvas.clientWidth * ratio))
        const height = Math.max(1, Math.floor(canvas.clientHeight * ratio))

if (canvas.width !== width || canvas.height !== height) {
          canvas.width = width
          canvas.height = height
          gl.viewport(0, 0, width, height)
        }
      }

function render(now) {
        resize()
        gl.useProgram(program)
        gl.enableVertexAttribArray(positionLocation)
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
        gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0)
        gl.uniform2f(resolutionLocation, canvas.width, canvas.height)
        gl.uniform1f(timeLocation, now * 0.001)
        gl.uniform2f(mouseLocation, mouseRef.current.x, mouseRef.current.y)
        gl.drawArrays(gl.TRIANGLES, 0, 3)
        frameId = window.requestAnimationFrame(render)
      }

resizeObserver = new ResizeObserver(resize)
      resizeObserver.observe(canvas)
      frameId = window.requestAnimationFrame(render)

if (isMounted) {
        setStatus('ready')
      }
    } catch (error) {
      if (isMounted) {
        setStatus('error')
        setMessage(error?.message || 'WebGLシーンを読み込めませんでした')
      }
    }

return () => {
      isMounted = false
      window.cancelAnimationFrame(frameId)
      resizeObserver?.disconnect()
    }
  }, [])

function handlePointerMove(event) {
    const rect = event.currentTarget.getBoundingClientRect()
    mouseRef.current = {
      x: (event.clientX - rect.left) / rect.width,
      y: 1 - (event.clientY - rect.top) / rect.height,
    }
  }

function handlePointerLeave() {
    mouseRef.current = { x: 0.5, y: 0.5 }
  }

return (
    <section className="bokeh-gradient-stage">
      <div className="bokeh-gradient-shell">
        <canvas
          ref={canvasRef}
          className="bokeh-gradient-scene"
          aria-label="Decorative WebGL background animation"
          onPointerMove={handlePointerMove}
          onPointerLeave={handlePointerLeave}
        />

<div className="bokeh-gradient-veil" />

<div className="hero-copy">
          <h1>JUNK</h1>
        </div>

<div className="scene-status" data-visible={status !== 'ready'}>
          {status === 'error' ? message : 'Loading WebGL scene'}
        </div>
      </div>
    </section>
  )
}

はじめに

自分用メモ。

ファーストビューの背景は、主張を強くしすぎると文字が読みにくくなる。淡いグラデーション、円形アクセント、少しだけ動くラインを重ねるくらいが扱いやすい。

このサンプルでは、WebGLを背景として敷き、前面の文字はDOMで分けている。背景は雰囲気を作る役、文字は読ませる役として分けておく。

WebGL背景の基本

ここで見ておくのは、1枚のcanvasで複数の背景要素をまとめて扱える点。CSSだけのグラデーションより、線の揺れや淡い粒感を足しやすい。

ファーストビューに少し奥行きを付けたい
背景にゆるい動きを入れたい
画像ではなくコードで色や形を調整したい
文字の読みやすさはDOM側で保ちたい

組み合わせのポイント

背景、円形アクセント、ライン模様、ボケを別の役割として考える
動きは強くしすぎず、背景全体が少し呼吸するくらいに抑える
前面の JUNK はWebGLに描かず、通常のHTMLとして重ねる
白いベールを挟んで、背景の強さと文字の読みやすさを調整する

実装のポイント

Component.jsx はcanvasの初期化、リサイズ、マウス位置、描画ループだけを見る
createBokehProgram.js はshader programを作る処理だけに分ける
fragmentShader.js では背景色、円形アクセント、ライン、ボケ、grainをまとめて描く
styles.css ではcanvas、ベール、文字の重なり順だけを整える

まとめ

覚えておくのは、背景表現は作り込みより分担。WebGLは雰囲気、CSSは読みやすさ、HTMLは情報を担当する。そこを分けておくと、見た目の調整もしやすい。

タグ

WebGLJavaScriptアニメーションUIUX3Dパフォーマンス

表現タイプから探す

スクロール連動

スクロールに連動する多彩な表現を集めました。

パララックス系

奥行き感や視差効果で没入感を高める表現です。

カード・UIパーツ系

カードやUIパーツのインタラクティブ表現。

テキスト演出系

文字を魅せるための多彩なテキスト表現。

ページ遷移・画面切り替え系

ページやセクションのスムーズな切り替え表現。

ローディング系

読み込みを楽しく魅せるローディング表現。

マウス・インタラクション系

カーソル操作に反応するインタラクティブ表現。

背景・ビジュアル表現系

背景やビジュアルで魅せるダイナミックな表現。

3D・WebGL寄り

WebGLや3Dを活用したリッチな表現カテゴリ。

ボタン・CTA系

CTAやボタンを魅力的にするアニメーション表現。

関連記事

Three.jsWebGL3DUICSS

R3F Canvas Background Basic

React Three FiberのCanvasをDOMコンテンツの背面に置くための、最小限のレイヤー構造を作ります。

2026年6月5日

Three.jsWebGL3DUICSS

R3F Canvas Background Basic

React Three FiberのCanvasをDOMコンテンツの背面に置くための、最小限のレイヤー構造を作ります。

2026年6月5日

WebGLJavaScriptSVGCSSアニメーションインタラクションUX

Flowmap JUNKBRANDING Mask React

OGLのFlowmapで歪ませたWebGL背景を、JUNKBRANDINGの白マスクで抜いて見せるReact実装です。

2026年5月28日