<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
	<channel>
		<title>Glsl on NicoLabs</title>
		<link>http://blog.hellonico.info/ja/tags/glsl/</link>
		<description>Recent content in Glsl on NicoLabs</description>
		<generator>Hugo</generator>
		<language>ja</language>
		
		
		
		
			<lastBuildDate>Sun, 28 Jun 2026 07:30:00 +0900</lastBuildDate>
		
			<atom:link href="http://blog.hellonico.info/ja/tags/glsl/index.xml" rel="self" type="application/rss+xml" />
			<item>
				<title>純粋なConi LispでWebGLシェーダーを書く！</title>
				<link>http://blog.hellonico.info/ja/posts/coni/coni-webgl-shaders/</link>
				<pubDate>Sun, 28 Jun 2026 07:30:00 +0900</pubDate>
				<guid>http://blog.hellonico.info/ja/posts/coni/coni-webgl-shaders/</guid>
				<description>&lt;p&gt;前回の記事では、80,000パーティクルのWebGLマトリックスをオーケストレーションすることで、Coni WASMの生み出すパワーを紹介しました。しかし、WebGLのパイプラインには常に一つの厄介な問題が残っていました。それは&lt;strong&gt;シェーダーそのもの&lt;/strong&gt;です。&lt;/p&gt;&#xA;&lt;p&gt;WebGLコードを書いたことがある人なら、その面倒さを知っているはずです。頂点シェーダーとフラグメントシェーダーを、コードベース全体に連結された巨大で厄介な文字列リテラルとして書くことになります。構文のハイライトもフォーマットも失われ、さらにLispハッカーにとって最も悲劇的なことに、構造的編集（Paredit/Slurp/Barf）も失われてしまいます。&lt;/p&gt;&#xA;&lt;p&gt;本日、新しい&lt;code&gt;libs/webgl/src/glsl.coni&lt;/code&gt;ライブラリにより、私たちがその最後のフロンティアを征服したことを発表できることを嬉しく思います。&lt;/p&gt;&#xA;&lt;p&gt;&lt;strong&gt;GLSLシェーダーをConiのネイティブLisp構文で完全に記述できるようになりました。&lt;/strong&gt;&lt;/p&gt;&#xA;&lt;h3 id=&#34;defshaderの登場&#34;&gt;&lt;code&gt;defshader&lt;/code&gt;の登場&lt;/h3&gt;&#xA;&lt;p&gt;Coniの強力なAST（抽象構文木）とマクロシステムを活用することで、私たちは&lt;code&gt;defshader&lt;/code&gt;を構築しました。これは標準的なLispのフォーム、型、数学的演算を受け取り、それらがGPUに到達する前に自動的に厳密なGLSLへとトランスパイルします。&lt;/p&gt;&#xA;&lt;p&gt;私たちのAmplifocusパーティクルエンジンのために、このフラグメントシェーダーがいかに美しく書かれているかを見てください：&lt;/p&gt;&#xA;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;&#34;&gt;&lt;code class=&#34;language-clojure&#34; data-lang=&#34;clojure&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;(&lt;span style=&#34;color:#a6e22e&#34;&gt;require&lt;/span&gt; &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;libs/webgl/src/glsl.coni&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#e6db74&#34;&gt;:all&lt;/span&gt;)&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;(&lt;span style=&#34;color:#a6e22e&#34;&gt;defshader&lt;/span&gt; fs-src&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  (&lt;span style=&#34;color:#a6e22e&#34;&gt;precision&lt;/span&gt; mediump float)&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  (&lt;span style=&#34;color:#a6e22e&#34;&gt;varying&lt;/span&gt; vec4 v_color)&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  (&lt;span style=&#34;color:#66d9ef&#34;&gt;defn &lt;/span&gt;void main []&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#75715e&#34;&gt;;; ネイティブの数学と座標マッピング！&lt;/span&gt;&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    (set vec2 coord (- gl_PointCoord (&lt;span style=&#34;color:#a6e22e&#34;&gt;vec2&lt;/span&gt; &lt;span style=&#34;color:#ae81ff&#34;&gt;0.5&lt;/span&gt; &lt;span style=&#34;color:#ae81ff&#34;&gt;0.5&lt;/span&gt;)))&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    (set float dist (&lt;span style=&#34;color:#a6e22e&#34;&gt;length&lt;/span&gt; coord))&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    (&lt;span style=&#34;color:#66d9ef&#34;&gt;if &lt;/span&gt;(&amp;gt; dist &lt;span style=&#34;color:#ae81ff&#34;&gt;0.5&lt;/span&gt;)&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;      (&lt;span style=&#34;color:#a6e22e&#34;&gt;discard&lt;/span&gt;))&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#75715e&#34;&gt;;; LispのS式を使った発光（グロー）の計算&lt;/span&gt;&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    (set float glow (- &lt;span style=&#34;color:#ae81ff&#34;&gt;1.0&lt;/span&gt; (* dist &lt;span style=&#34;color:#ae81ff&#34;&gt;2.0&lt;/span&gt;)))&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    (set vec4 final_color (* v_color glow))&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    (set gl_FragColor final_color)))&#xA;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id=&#34;なぜこれがゲームチェンジャーなのか&#34;&gt;なぜこれがゲームチェンジャーなのか？&lt;/h3&gt;&#xA;&lt;ol&gt;&#xA;&lt;li&gt;&lt;strong&gt;文字列リテラルからの解放:&lt;/strong&gt; シェーダーはファーストクラスのコードになります。アプリケーションの他の部分と完全にフォーマットが統一されます。&lt;/li&gt;&#xA;&lt;li&gt;&lt;strong&gt;ASTレベルの検証:&lt;/strong&gt; Coniコンパイラは、ブラウザでWebGLプログラムをコンパイルしようとする前に、シェーダーの構造をパースして検証できます。&lt;/li&gt;&#xA;&lt;li&gt;&lt;strong&gt;構造的編集:&lt;/strong&gt; 標準的なLispの構造的編集ツールを使用して、複雑なGPU計算をスラープ、バーフ、そして操作することができます。CスタイルのGLSL文字列でそれをやろうとしてみてください！&lt;/li&gt;&#xA;&lt;li&gt;&lt;strong&gt;シームレスな統合:&lt;/strong&gt; 使用可能なWebGLシェーダーへのコンパイルは、&lt;code&gt;core-gl/gl-shader&lt;/code&gt;関数を呼び出すだけというシンプルさです：&lt;code&gt;(core-gl/gl-shader gl (.-FRAGMENT_SHADER gl) fs-src)&lt;/code&gt;。&lt;/li&gt;&#xA;&lt;/ol&gt;&#xA;&lt;h3 id=&#34;ブラウザのためのフルスタックlisp&#34;&gt;ブラウザのためのフルスタックLisp&lt;/h3&gt;&#xA;&lt;p&gt;このアップデートにより、パイプラインは完成しました。&lt;code&gt;reframe&lt;/code&gt;によるDOM操作から、WebAudioの合成、WASMのFloatバッファ、そして今や実際のGPU頂点変換に至るまで、100% Coniで実現できます。&lt;/p&gt;</description>
			</item>
	</channel>
</rss>
