Click here to Skip to main content
Click here to Skip to main content

An OpenGL Sample as Firefox Plugin

, 13 Sep 2007
Rate this:
Please Sign up or sign in to vote.
A tutorial on how a Firefox plugin does OpenGL rendering
Sample Image - maximum width is 600 pixels


This articles explains how OpenGL is rendered as a Firefox plugin. I don't know whether it's useful. I did it for fun!


I was trying to render an X3D file with OpenGL as a Firefox plugin. I know there are many such X3D file viewers, but mine intends to handle the haptic field... well, this sample is just a by-product.

Tinkering with the Code

You will first need to download Gecko plugin API and Firefox source code. Download Gecko SDK and extract to \yourroot\gecko-sdk\.

Download Firefox source code from here, extract to \yourroot\mozilla.
Then we start from a basic plugin sample. Go to the folder: yourroot\mozilla\modules\plugin\tools\sdk\samples\basic\windows.

Here's a little trick, we need to run unix2dos on npbasic.dsp and npbasic.dsw under this folder. Then we open and cover the project by Visual C++ Express, we will be successful now. From project properties, change the Additional include directories to yourroot\gecko-sdk\include; yourroot\mozilla\modules\plugin\tools\sdk\samples\include. Try to build now, if successful, we continue...

Open plugin.cpp, then

#include <span class="code-string">"plugin.h"</span>


#include <span class="code-keyword"><gl/gl.h> </span>

Then, after the line:

static WNDPROC lpOldProc = NULL; 

add two functions EnableOpenGL and DisableOpenGL:

void EnableOpenGL(HWND hWnd, HDC * hDC, HGLRC * hRC); 
void DisableOpenGL(HWND hWnd, HDC hDC, HGLRC hRC);

Add EnableOpenGL and SetTimer as shown below:

NPBool nsPluginInstance::init(NPWindow* aWindow)

    //we add EnableOpenGL and SetTimer
    EnableOpenGL( mhWnd, &hDC, &hRC );
        SetTimer(mhWnd, 0,  1,  (TIMERPROC) NULL); // no timer callback

Then, add DisableOpenGL as shown below:

void nsPluginInstance::shut() 
    // subclass it back 

    // We add DisableOpenGL

    DisableOpenGL( mhWnd, hDC, hRC );
.... } 

After that, in PluginWinProc, we need to handle WM_TIMER message like the following:

case WM_TIMER:
    theta += 1.0f;
    PostMessage( hWnd, WM_PAINT, NULL, NULL );

At last we do OpenGL rendering in the case of WM_PAINT, remove the original code under this case, and replace it with our code as follows:

glClearColor( 0.0f, 0.0f, 0.0f, 0.0f ); 
glRotatef( theta, 0.0f, 0.0f, 1.0f );
glBegin( GL_TRIANGLES ); 
   glColor3f( 1.0f, 0.0f, 0.0f ); 
   glVertex2f( 0.0f, 1.0f );
   glColor3f( 0.0f, 1.0f, 0.0f ); 
   glVertex2f( 0.87f, -0.5f );
   glColor3f( 0.0f, 0.0f, 1.0f );
   glVertex2f( -0.87f, -0.5f ); 
SwapBuffers( hDC );

It's almost done, but don't forget to define EnableOpenGL and DisableOpenGL:

void EnableOpenGL(HWND hWnd, HDC * hDC, HGLRC * hRC)
    int format;
    // get the device context (DC)
    *hDC = GetDC( hWnd ); // set the pixel format for the DC
    ZeroMemory( &pfd, sizeof( pfd ) );
    pfd.nSize = sizeof( pfd );
    pfd.nVersion = 1; 
    pfd.iPixelType = PFD_TYPE_RGBA;
    pfd.cColorBits = 24;
    pfd.cDepthBits = 16;
    pfd.iLayerType = PFD_MAIN_PLANE;
    format = ChoosePixelFormat( *hDC, &pfd );
    SetPixelFormat( *hDC, format, &pfd );
    // create and enable the render context (RC)
    *hRC = wglCreateContext( *hDC ); 
    wglMakeCurrent( *hDC, *hRC );

// Disable OpenGL
void DisableOpenGL(HWND hWnd, HDC hDC, HGLRC hRC)
    wglMakeCurrent( NULL, NULL );
    wglDeleteContext( hRC );
    ReleaseDC( hWnd, hDC );

It's done!

Build the Project

Nothing to say, just

Test the plugin

Copy npbasic.dll to C:\Program Files\Mozilla Firefox\plugins\ or yourfolder\Mozilla Firefox\plugins\.
From the folder yourroot\mozilla\modules\plugin\tools\sdk\samples\basic\, you will find test.html, double click and you would see a rotating triangle, colorful...

Another way to test the plugin

If we open a file of the type that a plugin is registered, then the plugin will be triggered. Open basic.rc with a text editor, find the string "FileExtents" and change the value to whatever you want. I changed it to hx3d. Next, create an empty file with the extension .hx3d, I created testbasic.hx3d under my folder. In the Firefox URL box, type c:\\testbasic.hx3d, you would also see the plugin triangle.

Now... enjoy!


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Ruiying WANG

No Biography provided

Comments and Discussions

Questionutility and dll Pinmembershenbagam1224-Jan-13 21:59 
GeneralLinker Error: 2001: Unresolved external symbol _NPN_USERAGENT Pinmemberveridev1-Jun-10 3:56 
Questiongecko 1.9.2 (firefox 3.6)+Visual Studio 2010 beta = ?? Pinmemberginkolev2-Apr-10 10:12 
QuestionHow about textures? PinmemberMember 603819618-Jun-09 2:34 
GeneralNice Example PinmemberVishalIndia6-Mar-09 19:37 
GeneralGreat example Pinmemberlin06759-Dec-08 0:04 
GeneralGetting linking Error PinmemberMember 414011926-Nov-08 1:49 
GeneralNot portable PinmemberKuryn18-Oct-08 11:50 
GeneralRe: Not portable Pinmemberivanmen28-Mar-09 12:09 
Generalcompiling error Pinmemberhyuen15-Jun-08 22:17 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 13 Sep 2007
Article Copyright 2007 by Ruiying WANG
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid