Feed on
Posts
Comments

Changes to the Shader Loader

Apr 17th, 2012 by

I designed the shader loader to simplify loading shader files.  I wanted to to have a list of shader fx files close at hand and just click on them to instantly open them in the editor. 

No clicking a file menu, no waiting for a dialog to open and close.

It’s been a feature of Shazzam since version 1.0 and it’s done an splendid job up to this point.

The shader loader in version 1.4 now supports nested folders.  You point the shader loader at a folder (by clicking on the Change location link) and it provides access to the files in that folder and it’s children.

image

Figure 1: The Shader Loader showing the Your Folder tab

It’s a simple change, but it means less fussing with the folder dialog.

Change in Dialogs

Speaking of the folder dialog, we got rid of the atrocious "Browse for Folder dialog" and replaced it with the Windows Vista/7 file dialog.

image

Figure 2: Yuck.  The Browse for Folder dialog

image

Figure 3:  The Vista/Windows 7 dialog.

Sample Shaders in the Shader Loader

Now that Shader loader supports nested folders, the Sample Shaders and Tutorials tab have changed.  The shaders are now categorized by folder.

image

 

Learn more about shaders, get the book

HLSL and Pixel Shaders for XAML Developers

A comprehensive guide to creating HLSL pixel shaders for WPF and Silverlight applications

Posted in v1.4 | Comments Off

Take a Screenshot of Active Effect

Apr 11th, 2012 by

I love writing shaders and experimenting with the shader properties on the Tryout tab. Before long, I’ll have a bunch of test animations running and find myself mesmerized by the artistic images playing on the screen. You can capture the active shader with the screenshot tool by pressing Ctrl-F2 at any time in Shazzam, even while test animations are running.

image

Due to a limitation in the WPF API you cannot capture a screenshot if you are targeting the PS_3 specification. In addition, you are limited to capturing the effect applied to the image in the Custom Image tab. None of the other sample images or UI are capturable.

The screenshots are stored in a folder under the Shazzam install location. Just use the Tools-Explore Screenshots menu to peruse your screenshot masterpieces.

Posted in Shazzam, v1.4 | Comments Off

New Distortion Shader Preview Tool

Apr 11th, 2012 by

Writing displacement/distortion shaders is fun.  You can produce some wild looking effects.  I’ve added a black/white checkerboard to the preview section to make it easer to see the distorted results of the shader.

image

Here’s a few examples using the new preview tab.

0408

This feature is part of the V1.4 release.

Posted in Shazzam, v1.4 | Comments Off

That’s right, HLSL Intellisense debuts in Shazzam v1.4

Apr 9th, 2012 by

All modern programming IDE have some form of auto-completion.  Those of us that spend our time in Microsoft tools like Visual Studio are aware of their Intellisense (TM)engine.  I use the Ctrl-Spacebar shortcut so often, the letters are fading on the tops of the keys on my keyboard.

Wouldn’t it be awesome if we could use Intellisense in Microsoft Word or other document editors.  I’d love to to be able to type Indu – Ctrl-Spacebar in Word to have it show a list of words like Industry.

- Walt Ritscher

I’ve wanted to add an auto-complete feature to Shazzam since version 1.0.   It’s a hard task, you need to create a parser that understands the programming language.

The parser needs to understand a lot about the language.  If you are in the midst of writing an if statement (within the parenthesis) do you want show the same keywords as when writing text in the middle of an XML comment line?

The code editor I’m using in Shazzam doesn’t help much either, But I managed to get a rudimentary code completion engine written for Version 1.4

Touring the Auto-complete feature

Here’s what you see when you type the word "if" in the Shazzam editor.

image

Figure 01: The Shazzam auto-complete for if keyword

As you can see, the popup lists all the HLSL keywords that contain the letters "if".  You can move the cursor up/down the list with the arrow keys. When a keyword is selected in the list, you get a context-sensitive help window with information about that keyword.

Autocomplete

Once the word is highlighted, press the spacebar to auto-enter the text.

This is the autocomplete I get for the if keyword.

if( ){}

More examples

image

Figure 02: Float2x3

image

Figure 03: The register keyword

image

Figure 04:  The lerp function

image

Figure 05:  The Shazzam XML tags

Bugs and other oddities

The auto-text is not perfect yet.  There are times when it munges existing text or shows keywords where you don’t expect to see them (in the middle of XML comment).  Even so, it dramatically speeds up my coding efforts.

Enjoy.

Shader Book Coming soon

HLSL and Pixel Shaders for the XAML Developer. O’Reilly Media Inc..

http://shop.oreilly.com/product/0636920023869.do

Posted in v1.4 | Comments Off

Full-screen mode changes – Shazzam v1.4

Apr 9th, 2012 by

The full screen mode in Shazzam has a few changes.

V1.3

Here is a screen shot of full screen image in Version 1.3.

image

Note that you can see the menu and toolbar on the left side.

V1.4

Here is the full screen view in Version 1.4.

image

Note that the menus and toolbar are hidden. Press the Escape key to return to split screen mode.  You get the same full screen look for the code editor too.

image

Book Excerpt

From the upcoming HLSL and Pixel Shaders for XAML Developer book.

http://shop.oreilly.com/product/0636920023869.do

Show the image previews in full-screen mode by choosing the View-Full Screen Image menu (F9). This hides the toolbar and code windows. Use the Escape or F9 key to toggle back to split-screen mode.

Show the code window in full-screen mode by choosing the View-Full Screen Code menu (F10). This hides the toolbar and image preview windows. Use the Escape or F10 key to toggle back to split screen mode.

Posted in v1.4 | Comments Off

Pixel Shader Compare in Shazzam 1.4

Dec 29th, 2011 by

Another new feature coming in Version 1.4 is the compare tab.  This feature is has been a common request from the Shazzam user community.  In version 1.3 you can toggle the view between shader view and original UI view by choosing the Apply Shader and Remove Shader menu items.

image

Figure 1: No Shader.

 

image

Figure 2: Apply Shader.

 

Side-by-side comparison

In the new version I’ve added a Compare tab.  This shows the original UI and applied effect on the same screen.

image

Figure 3: Compare Tab, side-by-side.

 

In some instances you may want to see the images above-below instead of side-by-side.  Uncheck the side-by-side check box and this is what you see.

image

Figure 4: Compare Tab, above-below.

 

Watch the video

Here is a video of the compare tab in action.

Shazzam Beta, January 2012

Look for a beta in early January.

Shader Book Coming soon

HLSL and Pixel Shaders for the XAML Developer. O’Reilly Media Inc..

Posted in v1.4 | 1 Comment »

Color Picker Improvements

Dec 20th, 2011 by

Changes for Shazzam v.1.4

Color Picker

Shazzam has always had a color picker.  In v1.3 it lives on the Plugin pane on the left side of the application.  That location is temporary, it was placed there in the first release due to the product schedule.  But that is not where it really belongs.  It should be on the "Tryout" tab, so that you can interactively change the color while testing the shader.

In version 1.3 the Tryout tab has a text box for color values.  You enter a color string or hexadecimal string in the textbox and Shazzam updates the color.

image

image

New Home

I’m happy to announce that the Color Picker has migrated to the Tryout tab.  Not only has it move, but it has some improvements.

You can choose colors from the dropdown and see the preview.  Here is an example using the Available colors view.

image

 

You can also use a custom color chooser as show in the following screenshot.

image

 

One of the features that I really like about Shazzam in the ability to animate the test values.  I’m not alone that feeling, I get lots of positive comments regarding the animations.

For that reason I’ve also added the color animation feature to the Tryout tab.

 

Here is a video showing the new features.

Shazzam v1.4 ColorPicker on Vimeo.

 

 

Shazzam Beta, January 2012

Look for a beta in Early January.

Shader Book Coming soon

HLSL and Pixel Shaders for the XAML Developer. O’Reilly Media Inc..

Posted in Shazzam, v1.4 | Comments Off

Output directory and file changes for Shazzam v1.4

Dec 15th, 2011 by

The changes have started for the next version of Shazzam.

File Output

I’ve revamped the output directory implementation to make it easier to find related shader files.    When a shader is compiled in Shazzam there are four files created.  For example, let’s say you are working with the Bands.fx file.  The fx file contains your HLSL code. When you compile the HLSL you get these four additional files.

  • temp.ps
  • BandsEffect.ps
  • BandsEffect.cs
  • BandsEffect.vb

The temp.ps file is used by Shazzam when it dynamically generates the test UI.

The BandsEffect.ps file is a copy of the temp.ps file.  This is the file that should be added to your .NET project.  Both these ps files contain the binary output from the compiler.

image

The *.vb and *.cs files contain the auto generated .NET classes.

image

Version 1.3 locations

To find these files, use the Tools/Explore Compiled Shaders menu.

image

In version 1.3 the files were scatter across three different folder.  That made it confusing to find your all the related files, so a change was made for version 1.4.

Version 1.4 Locations

In version 1.4 a directory is created for each compiled shader.  In our example a BandsEffect directory is created. 

image

Within the BandsEffect directory, you’ll find the three generated files.

image

Another change you may notice is that the ps file name now matches the other two filenames in the directory.  Version 1.3 used different names which was a was another unintended inconsistency.

Changes to generated .NET effect class

The final change is noticeable in the generated C#/VB classes.  The UriSource property now reflects the new ps file name.

image

 

Shader Book Coming soon

HLSL and Pixel Shaders for the XAML Developer. O’Reilly Media Inc..

Posted in Shazzam | 2 Comments »

New version of Shazzam coming in 2012

Dec 14th, 2011 by

The last release of Shazzam (version 1.3) was in July of 2010.  Version 1.3 had a lot of good updates and has been well received in the community.  I’ve been very happy with the outcome and the current version is very stable.

I’ve given a lot of thought to the future of Shazzam.   I’ve always felt that it would make a good addin for Visual Studio.  It turns out that a lot of people who use Shazzam are not using Visual Studio.  There are the designers who use Expression Blend and the gamer shops that use Shazzam for shader previewing.  That makes the idea of creating a VS addin less appealing.  And then there is Visual Studio 2012 coming.  It has a very impressive set of tools for graphics developers, including shader editors.

So what’s happening with Shazzam?   There will be a new release early in 2012.   It will continue to be a standalone product.  I have some ideas on improvements and other fixes.  For one, I want to make it more "social".  By that I mean making it easier to share shaders files with the community.

More importantly, I am writing a book on shaders for O’Reilly (details in another post).  Shazzam will play an important role in the book and it needs some improvements to help that goal.

If you have suggestions add them to the comments, or look for the new forums coming soon.

Shader Book Coming soon

HLSL and Pixel Shaders for the XAML Developer. O’Reilly Media Inc..

Posted in Shader, Shazzam | Comments Off

Shazzam 1.3 – Eighty sample shaders included

Jul 15th, 2010 by

The list of sample shaders included in Shazzam Shader Editor continues to grow.   Thanks to our growing community of users we continue to get shader submissions.  Ten of the shaders in this release were contributed by you.  Thank you!

BTW, if you think you have a great shader send it to me (see link on sidebar).

Generative Shaders

There are a handful of generative shaders in Shazzam.  Generative shader ignore any of the underlying pixels in the source and draw their own pixels.  Take this Generative_Star.fx shader for example.  It’s drawing a four pointed star.

image

Figure 1 – Generative_Star.fx

image

Figure 2 – Generative_Star property setters.

image

Figure 3 – Generative_Mandelbrot.fx

image

Figure 4 – Generative_Bands.fx

New and interesting shaders

I continue to find and invent new pixel shaders for Shazzam. Here are  few of my new samples and some from the community.

First, a look at the original image.

image

Figure 5 – Original image.

 

The first shader I want to look at is the ApplyTextureMap.fx shader.  There is a more detailed post about this shader on this site.  ApplyTextureMap takes a second texture and morphs the pixels of the original.  A common use for this in painting programs is to apply noise or canvas texture to the image.

image

Fiigure 6 – Morphed image.

Glass Tiles: This shader comes from Fakhruddin Faizal.

image

Figure 7 – GlassTiles.fx

PaperFold:  From SilverlightShow

image

Figure 8 – Paperfold.fx

Circles:  This is one of mine.

image

Figure 9 – Circles.fx

image

Figure 10 – Circles1.fx

FrostedOutline: Also from Fakhruddin Faizal.

image

Figure 11 – FrostedOutline.fx

I really like the frosted look on this sample image.

image

Figure 12 – Sample

image

Figure 13 – Sample with FrostedOutline applied.

Microsoft shaders

While I was working on the first version of Shazzam the WPF team released sample shaders on CodePlex.   I contacted them and asked if I could include them in Shazzam and they gave me a enthusiastic ‘yes!”.  So most of those shaders wound up inside Shazzam.  Version 1.3 adds the Transition effects from Microsoft.   But I’ll show you those shaders in another post.

Version 1.3 release date:  July 14, 2010

Do you know about the Shazzam twitter feed?

http://twitter.com/shazzamtool

Posted in Uncategorized | 2 Comments »

Older Posts »